Skip to content

Commit 1529c56

Browse files
ancheetahancheetah
committed
chore(davinci-client): add PhoneNumberExtensionCollector
1 parent 9aa183c commit 1529c56

13 files changed

Lines changed: 504 additions & 93 deletions

File tree

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

Lines changed: 90 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import type {
88
DeviceAuthenticationCollector,
99
DeviceRegistrationCollector,
1010
PhoneNumberCollector,
11+
PhoneNumberExtensionCollector,
12+
PhoneNumberExtensionInputValue,
13+
PhoneNumberInputValue,
1114
Updater,
1215
} from '@forgerock/davinci-client/types';
1316

@@ -19,11 +22,16 @@ import type {
1922
*/
2023
export default function objectValueComponent(
2124
formEl: HTMLFormElement,
22-
collector: DeviceRegistrationCollector | DeviceAuthenticationCollector | PhoneNumberCollector,
25+
collector:
26+
| DeviceRegistrationCollector
27+
| DeviceAuthenticationCollector
28+
| PhoneNumberCollector
29+
| PhoneNumberExtensionCollector,
2330
updater:
2431
| Updater<DeviceRegistrationCollector>
2532
| Updater<DeviceAuthenticationCollector>
26-
| Updater<PhoneNumberCollector>,
33+
| Updater<PhoneNumberCollector>
34+
| Updater<PhoneNumberExtensionCollector>,
2735
submitForm: () => void,
2836
) {
2937
if (
@@ -61,7 +69,7 @@ export default function objectValueComponent(
6169
buttonEl.textContent = option.label;
6270
formEl.appendChild(buttonEl);
6371
}
64-
} else {
72+
} else if (collector.type === 'PhoneNumberCollector') {
6573
const phoneLabel = document.createElement('label');
6674
phoneLabel.textContent = collector.output.label || 'Phone Number';
6775
phoneLabel.className = 'object-options-title';
@@ -73,6 +81,9 @@ export default function objectValueComponent(
7381
phoneInput.setAttribute('name', 'phone-number-input');
7482
phoneInput.setAttribute('placeholder', 'Enter phone number');
7583

84+
formEl.appendChild(phoneLabel);
85+
formEl.appendChild(phoneInput);
86+
7687
// Add change event listener
7788
phoneInput.addEventListener('change', (event) => {
7889
// Properly type the event target
@@ -84,14 +95,85 @@ export default function objectValueComponent(
8495
return;
8596
}
8697

87-
updater({
98+
const phoneNumberInputValue: PhoneNumberInputValue = {
8899
phoneNumber: selectedValue,
89100
countryCode: collector.output.value?.countryCode || '',
90-
extension: collector.output.value?.extension || '',
91-
} as any);
101+
};
102+
const phoneNumberUpdater = updater as Updater<PhoneNumberCollector>;
103+
phoneNumberUpdater(phoneNumberInputValue);
92104
});
105+
} else if (collector.type === 'PhoneNumberExtensionCollector') {
106+
const phoneLabel = document.createElement('label');
107+
phoneLabel.textContent = collector.output.label || 'Phone Number';
108+
phoneLabel.className = 'object-options-title';
109+
phoneLabel.setAttribute('for', 'phone-number-input-1');
93110

94-
formEl.appendChild(phoneLabel);
95-
formEl.appendChild(phoneInput);
111+
const phoneInput = document.createElement('input');
112+
phoneInput.setAttribute('type', 'tel');
113+
phoneInput.setAttribute('id', 'phone-number-input-1');
114+
phoneInput.setAttribute('name', 'phone-number-input-1');
115+
phoneInput.setAttribute('placeholder', 'Enter phone number');
116+
117+
const extensionLabel = document.createElement('label');
118+
extensionLabel.textContent = collector.output.options.extensionLabel || 'Extension';
119+
extensionLabel.className = 'object-options-title';
120+
extensionLabel.setAttribute('for', 'extension-input-1');
121+
122+
const extensionInput = document.createElement('input');
123+
extensionInput.setAttribute('type', 'text');
124+
extensionInput.setAttribute('id', 'extension-input-1');
125+
extensionInput.setAttribute('name', 'extension-input-1');
126+
extensionInput.setAttribute('placeholder', 'Enter extension');
127+
128+
const divEl = document.createElement('div');
129+
divEl.style = 'display: flex; gap: 8px;';
130+
divEl.appendChild(phoneLabel);
131+
divEl.appendChild(phoneInput);
132+
divEl.appendChild(extensionLabel);
133+
divEl.appendChild(extensionInput);
134+
135+
formEl.appendChild(divEl);
136+
137+
const phoneNumberExtensionUpdater = updater as Updater<PhoneNumberExtensionCollector>;
138+
139+
// Add change event listener for phone number input
140+
phoneInput.addEventListener('change', (event) => {
141+
const target = event.target as HTMLInputElement;
142+
const phoneValue = target.value;
143+
const extensionValue = extensionInput.value;
144+
145+
if (!phoneValue) {
146+
console.error('No value found for phone number');
147+
return;
148+
}
149+
150+
const phoneNumberExtensionInputValue: PhoneNumberExtensionInputValue = {
151+
phoneNumber: phoneValue,
152+
countryCode: collector.output.value?.countryCode || '',
153+
extension: extensionValue,
154+
};
155+
156+
phoneNumberExtensionUpdater(phoneNumberExtensionInputValue);
157+
});
158+
159+
// Add change event listener for extension input
160+
extensionInput.addEventListener('change', (event) => {
161+
const target = event.target as HTMLInputElement;
162+
const extensionValue = target.value;
163+
const phoneValue = phoneInput.value;
164+
165+
if (!extensionValue) {
166+
console.error('No value found for extension');
167+
return;
168+
}
169+
170+
const phoneNumberExtensionInputValue: PhoneNumberExtensionInputValue = {
171+
phoneNumber: phoneValue,
172+
countryCode: collector.output.value?.countryCode || '',
173+
extension: extensionValue,
174+
};
175+
176+
phoneNumberExtensionUpdater(phoneNumberExtensionInputValue);
177+
});
96178
}
97179
}

‎e2e/davinci-app/main.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,10 @@ const urlParams = new URLSearchParams(window.location.search);
247247
formEl, // You can ignore this; it's just for rendering
248248
collector, // This is the plain object of the collector
249249
);
250-
} else if (collector.type === 'PhoneNumberCollector') {
250+
} else if (
251+
collector.type === 'PhoneNumberCollector' ||
252+
collector.type === 'PhoneNumberExtensionCollector'
253+
) {
251254
objectValueComponent(
252255
formEl, // You can ignore this; it's just for rendering
253256
collector, // This is the plain object of the collector

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ test('Should render form fields', async ({ page }) => {
3131
await page.locator('#combobox-field-key-3').check();
3232
await page.locator('#combobox-field-key-2').uncheck();
3333

34-
await page.locator('#phone-number-input').fill('1234567890');
34+
await page.locator('#phone-number-input-1').fill('1234567890');
35+
await page.locator('#extension-input-1').fill('7890');
3536

3637
await expect(page.getByRole('button', { name: 'Flow Button' })).toBeVisible();
3738
await expect(page.getByRole('button', { name: 'Flow Link' })).toBeVisible();
@@ -56,7 +57,7 @@ test('Should render form fields', async ({ page }) => {
5657
'phone-field': {
5758
phoneNumber: '1234567890',
5859
countryCode: 'GB',
59-
extension: '4321',
60+
extension: '7890',
6061
},
6162
});
6263
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import type {
4646
MultiValueCollectors,
4747
FidoRegistrationInputValue,
4848
FidoAuthenticationInputValue,
49+
PhoneNumberExtensionInputValue,
4950
} from './collector.types.js';
5051
import type {
5152
InitFlow,
@@ -338,6 +339,7 @@ export async function davinci<ActionType extends ActionTypes = ActionTypes>({
338339
| string
339340
| string[]
340341
| PhoneNumberInputValue
342+
| PhoneNumberExtensionInputValue
341343
| FidoRegistrationInputValue
342344
| FidoAuthenticationInputValue,
343345
index?: number,

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

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@ import type {
2424
InferMultiValueCollectorType,
2525
InferActionCollectorType,
2626
PhoneNumberCollector,
27-
ObjectOptionsCollectorWithObjectValue,
27+
PhoneNumberExtensionCollector,
28+
ObjectValueCollectorWithObjectValue,
2829
InferValueObjectCollectorType,
2930
PhoneNumberInputValue,
3031
PhoneNumberOutputValue,
31-
PhoneNumberOptions,
32+
PhoneNumberExtensionInputValue,
33+
PhoneNumberExtensionOutputValue,
3234
} from './collector.types.js';
3335

3436
describe('Collector Types', () => {
@@ -370,16 +372,15 @@ describe('Collector Types', () => {
370372
name: '',
371373
input: {
372374
key: '',
373-
value: { countryCode: '', phoneNumber: '', extension: '' },
375+
value: { countryCode: '', phoneNumber: '' },
374376
type: '',
375377
validation: null,
376378
},
377379
output: {
378380
key: '',
379381
label: '',
380382
type: '',
381-
options: { showExtension: false },
382-
value: { countryCode: '', phoneNumber: '', extension: '' },
383+
value: { countryCode: '', phoneNumber: '' },
383384
},
384385
};
385386

@@ -388,13 +389,52 @@ describe('Collector Types', () => {
388389
});
389390

390391
describe('ObjectValueCollector Types', () => {
392+
it('should correctly infer PhoneNumberExtensionCollector Type', () => {
393+
const tCollector: InferValueObjectCollectorType<'PhoneNumberExtensionCollector'> = {
394+
category: 'ObjectValueCollector',
395+
error: null,
396+
type: 'PhoneNumberExtensionCollector',
397+
id: '',
398+
name: '',
399+
input: {
400+
key: '',
401+
value: { countryCode: '', phoneNumber: '', extension: '' },
402+
type: '',
403+
validation: null,
404+
},
405+
output: {
406+
key: '',
407+
label: '',
408+
type: '',
409+
options: { extensionLabel: '' },
410+
value: {},
411+
},
412+
};
413+
414+
expectTypeOf(tCollector).toEqualTypeOf<PhoneNumberExtensionCollector>();
415+
});
416+
417+
it('should validate PhoneNumberExtensionCollector structure', () => {
418+
expectTypeOf<PhoneNumberExtensionCollector>()
419+
.toHaveProperty('category')
420+
.toEqualTypeOf<'ObjectValueCollector'>();
421+
expectTypeOf<PhoneNumberExtensionCollector>()
422+
.toHaveProperty('type')
423+
.toEqualTypeOf<'PhoneNumberExtensionCollector'>();
424+
expectTypeOf<
425+
PhoneNumberExtensionCollector['input']['value']
426+
>().toEqualTypeOf<PhoneNumberExtensionInputValue>();
427+
expectTypeOf<
428+
PhoneNumberExtensionCollector['output']['value']
429+
>().toEqualTypeOf<PhoneNumberExtensionOutputValue>();
430+
});
431+
391432
it('should validate PhoneNumberCollector structure', () => {
392433
expectTypeOf<PhoneNumberCollector>().toEqualTypeOf<
393-
ObjectOptionsCollectorWithObjectValue<
434+
ObjectValueCollectorWithObjectValue<
394435
'PhoneNumberCollector',
395436
PhoneNumberInputValue,
396-
PhoneNumberOutputValue,
397-
PhoneNumberOptions
437+
PhoneNumberOutputValue
398438
>
399439
>();
400440
expectTypeOf<PhoneNumberCollector>()
@@ -404,7 +444,6 @@ describe('Collector Types', () => {
404444
.toHaveProperty('type')
405445
.toEqualTypeOf<'PhoneNumberCollector'>();
406446
expectTypeOf<PhoneNumberCollector['input']['value']>().toEqualTypeOf<PhoneNumberInputValue>();
407-
expectTypeOf<PhoneNumberCollector['output']['options']>().toEqualTypeOf<PhoneNumberOptions>();
408447
});
409448

410449
it('should validate PhoneNumberCollector base type constraints', () => {
@@ -416,15 +455,14 @@ describe('Collector Types', () => {
416455
name: 'Test',
417456
input: {
418457
key: 'phone',
419-
value: { countryCode: '+1', phoneNumber: '5555555555', extension: '' },
458+
value: { countryCode: '+1', phoneNumber: '5555555555' },
420459
type: 'string',
421460
validation: null,
422461
},
423462
output: {
424463
key: 'phone',
425464
label: 'Phone Number',
426465
type: 'phone',
427-
options: { showExtension: true },
428466
value: { countryCode: '+1', phoneNumber: '5555555555' },
429467
},
430468
};

0 commit comments

Comments
 (0)