feat(davinci-client): add form image collector (#698)

* feat(davinci-client): add form image collector

* fix(davinci-client): address PR review comments on ImageCollector

Author: vatsalparikh

.changeset/curly-wolves-swim.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/davinci-client': minor
+---
+
+Add `ImageCollector` for rendering `IMAGE` form fields from PingOne Forms.

e2e/davinci-app/components/form-image.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { ImageCollector } from '@forgerock/davinci-client/types';
+
+export default function (formEl: HTMLFormElement, collector: ImageCollector) {
+  if (collector.error) {
+    const errorEl = document.createElement('p');
+    errorEl.innerText = `Image error: ${collector.error}`;
+    formEl.appendChild(errorEl);
+    return;
+  }
+
+  const container = document.createElement('div');
+
+  const img = document.createElement('img');
+  img.src = collector.output.src;
+  img.alt = collector.output.alt;
+  img.setAttribute('data-testid', 'form-image');
+
+  if (collector.output.href) {
+    const anchor = document.createElement('a');
+    anchor.href = collector.output.href;
+    anchor.appendChild(img);
+    container.appendChild(anchor);
+  } else {
+    container.appendChild(img);
+  }
+
+  formEl.appendChild(container);
+}

e2e/davinci-app/main.ts

@@ -35,6 +35,7 @@ import readOnlyComponent from './components/read-only.js';
 import objectValueComponent from './components/object-value.js';
 import fidoComponent from './components/fido.js';
 import qrCodeComponent from './components/qr-code.js';
+import formImageComponent from './components/form-image.js';
 import pollingComponent from './components/polling.js';
 import booleanComponent from './components/boolean.js';
 
@@ -232,6 +233,8 @@ const urlParams = new URLSearchParams(window.location.search);
         );
       } else if (collector.type === 'QrCodeCollector') {
         qrCodeComponent(formEl, collector);
+      } else if (collector.type === 'ImageCollector') {
+        formImageComponent(formEl, collector);
       } else if (collector.type === 'TextCollector') {
         textComponent(
           formEl, // You can ignore this; it's just for rendering

e2e/davinci-app/server-configs.ts

@@ -46,6 +46,18 @@ export const serverConfigs: Record<string, DaVinciConfig> = {
         'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
     },
   },
+  /**
+   * Form Fields (old env — image feature flag enabled)
+   */
+  '60de77d5-dd2c-41ef-8c40-f8bb2381a359': {
+    clientId: '60de77d5-dd2c-41ef-8c40-f8bb2381a359',
+    redirectUri: window.location.origin + '/',
+    scope: 'openid profile email name revoke',
+    serverConfig: {
+      wellknown:
+        'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
+    },
+  },
   /**
    * Form Fields
    */

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import { expect, test } from '@playwright/test';
+
+import { asyncEvents } from './utils/async-events.js';
+
+test('Should render image collector in form', async ({ page }) => {
+  const { navigate } = asyncEvents(page);
+  await navigate('/?clientId=60de77d5-dd2c-41ef-8c40-f8bb2381a359');
+
+  await expect(page.getByText('Select Test Form')).toBeVisible();
+  await page.getByRole('button', { name: 'Form Fields' }).click();
+
+  await expect(page.getByText('Form Fields Tests')).toBeVisible();
+
+  const formImage = page.getByTestId('form-image');
+  await expect(formImage).toBeVisible();
+  await expect(formImage).toHaveAttribute('src', /QC-Montreal-Skyline_hero\.jpg/);
+  await expect(formImage).toHaveAttribute('alt', 'New Image');
+
+  const formImageAnchor = page.locator('a:has([data-testid="form-image"])');
+  await expect(formImageAnchor).toHaveAttribute('href', 'https://www.pingidentity.com/en.html');
+});

packages/davinci-client/api-report/davinci-client.api.md

@@ -173,7 +173,7 @@ export interface CollectorRichContent {
 }
 
 // @public (undocumented)
-export type Collectors = FlowCollector | PasswordCollector | ValidatedPasswordCollector | TextCollector | BooleanCollector | ValidatedBooleanCollector | SingleSelectCollector | IdpCollector | SubmitCollector | ActionCollector<'ActionCollector'> | SingleValueCollector<'SingleValueCollector'> | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | ReadOnlyCollector | RichTextCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | QrCodeCollector | UnknownCollector;
+export type Collectors = FlowCollector | PasswordCollector | ValidatedPasswordCollector | TextCollector | BooleanCollector | ValidatedBooleanCollector | SingleSelectCollector | IdpCollector | SubmitCollector | ActionCollector<'ActionCollector'> | SingleValueCollector<'SingleValueCollector'> | MultiSelectCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | ReadOnlyCollector | RichTextCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | QrCodeCollector | ImageCollector | UnknownCollector;
 
 // @public
 export type CollectorValueType<T> = T extends {
@@ -283,16 +283,12 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
     resume: (input: {
         continueToken: string;
     }) => Promise<InternalErrorResponse | NodeStates>;
-    start: <QueryParams extends OutgoingQueryParams = OutgoingQueryParams>(options?: StartOptions<QueryParams> | undefined) => Promise<ContinueNode | ErrorNode | FailureNode | StartNode | SuccessNode>;
+    start: <QueryParams extends OutgoingQueryParams = OutgoingQueryParams>(options?: StartOptions<QueryParams> | undefined) => Promise<StartNode | ErrorNode | FailureNode | ContinueNode | SuccessNode>;
     update: <T extends SingleValueCollectors | MultiSelectCollector | ObjectValueCollectors | AutoCollectors>(collector: T) => Updater<T>;
     validate: (collector: SingleValueCollectors | ObjectValueCollectors | MultiValueCollectors | AutoCollectors) => Validator;
     pollStatus: (collector: PollingCollector) => Poller;
     getClient: () => {
-        action: string;
-        collectors: Collectors[];
-        description?: string;
-        name?: string;
-        status: "continue";
+        status: "start";
     } | {
         action: string;
         collectors: Collectors[];
@@ -302,7 +298,11 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
     } | {
         status: "failure";
     } | {
-        status: "start";
+        action: string;
+        collectors: Collectors[];
+        description?: string;
+        name?: string;
+        status: "continue";
     } | {
         authorization?: {
             code?: string;
@@ -313,15 +313,9 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
     getCollectors: () => Collectors[];
     getError: () => DaVinciError | null;
     getErrorCollectors: () => CollectorErrors[];
-    getNode: () => ContinueNode | ErrorNode | FailureNode | StartNode | SuccessNode;
+    getNode: () => StartNode | ErrorNode | FailureNode | ContinueNode | SuccessNode;
     getServer: () => {
-        _links?: Links;
-        id?: string;
-        interactionId?: string;
-        interactionToken?: string;
-        href?: string;
-        eventName?: string;
-        status: "continue";
+        status: "start";
     } | {
         _links?: Links;
         eventName?: string;
@@ -338,7 +332,13 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         interactionToken?: string;
         status: "failure";
     } | {
-        status: "start";
+        _links?: Links;
+        id?: string;
+        interactionId?: string;
+        interactionToken?: string;
+        href?: string;
+        eventName?: string;
+        status: "continue";
     } | {
         _links?: Links;
         eventName?: string;
@@ -355,14 +355,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "data" | "fulfilledTimeStamp"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -379,14 +379,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "error"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -407,14 +407,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "data" | "fulfilledTimeStamp"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -431,14 +431,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "error"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: FetchBaseQueryError | SerializedError | undefined;
+            error?: SerializedError | FetchBaseQueryError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -945,6 +945,25 @@ export type GetClient = StartNode['client'] | ContinueNode['client'] | ErrorNode
 // @public (undocumented)
 export type IdpCollector = ActionCollectorWithUrl<'IdpCollector'>;
 
+// @public
+export interface ImageCollector extends NoValueCollectorBase<'ImageCollector'> {
+    // (undocumented)
+    output: NoValueCollectorBase<'ImageCollector'>['output'] & {
+        src: string;
+        alt: string;
+        href?: string;
+    };
+}
+
+// @public (undocumented)
+export type ImageField = {
+    type: 'IMAGE';
+    key: string;
+    description: string;
+    imageUrl: string;
+    hyperlinkUrl?: string;
+};
+
 // @public (undocumented)
 export type InferActionCollectorType<T extends ActionCollectorTypes> = T extends 'IdpCollector' ? IdpCollector : T extends 'SubmitCollector' ? SubmitCollector : T extends 'FlowCollector' ? FlowCollector : ActionCollectorWithUrl<'ActionCollector'> | ActionCollectorNoUrl<'ActionCollector'>;
 
@@ -955,7 +974,7 @@ export type InferAutoCollectorType<T extends AutoCollectorTypes> = T extends 'Pr
 export type InferMultiValueCollectorType<T extends MultiValueCollectorTypes> = T extends 'MultiSelectCollector' ? MultiValueCollectorWithValue<'MultiSelectCollector'> : MultiValueCollectorWithValue<'MultiValueCollector'> | MultiValueCollectorNoValue<'MultiValueCollector'>;
 
 // @public
-export type InferNoValueCollectorType<T extends NoValueCollectorTypes> = T extends 'ReadOnlyCollector' ? ReadOnlyCollector : T extends 'RichTextCollector' ? RichTextCollector : T extends 'QrCodeCollector' ? QrCodeCollector : NoValueCollectorBase<'NoValueCollector'>;
+export type InferNoValueCollectorType<T extends NoValueCollectorTypes> = T extends 'ReadOnlyCollector' ? ReadOnlyCollector : T extends 'RichTextCollector' ? RichTextCollector : T extends 'QrCodeCollector' ? QrCodeCollector : T extends 'ImageCollector' ? ImageCollector : NoValueCollectorBase<'NoValueCollector'>;
 
 // @public
 export type InferSingleValueCollectorType<T extends SingleValueCollectorTypes> = T extends 'TextCollector' ? TextCollector : T extends 'SingleSelectCollector' ? SingleSelectCollector : T extends 'ValidatedTextCollector' ? ValidatedTextCollector : T extends 'PasswordCollector' ? PasswordCollector : T extends 'ValidatedPasswordCollector' ? ValidatedPasswordCollector : T extends 'BooleanCollector' ? BooleanCollector : T extends 'ValidatedBooleanCollector' ? ValidatedBooleanCollector : SingleValueCollectorWithValue<'SingleValueCollector'> | SingleValueCollectorNoValue<'SingleValueCollector'>;
@@ -1127,10 +1146,10 @@ export interface NoValueCollectorBase<T extends NoValueCollectorTypes> {
 }
 
 // @public (undocumented)
-export type NoValueCollectors = NoValueCollectorBase<'NoValueCollector'> | ReadOnlyCollector | RichTextCollector | QrCodeCollector;
+export type NoValueCollectors = NoValueCollectorBase<'NoValueCollector'> | ReadOnlyCollector | RichTextCollector | QrCodeCollector | ImageCollector;
 
 // @public
-export type NoValueCollectorTypes = 'ReadOnlyCollector' | 'RichTextCollector' | 'NoValueCollector' | 'QrCodeCollector';
+export type NoValueCollectorTypes = 'ReadOnlyCollector' | 'RichTextCollector' | 'NoValueCollector' | 'QrCodeCollector' | 'ImageCollector';
 
 // @public
 export interface OAuthDetails {
@@ -1513,7 +1532,7 @@ export type ReadOnlyField = {
 };
 
 // @public (undocumented)
-export type ReadOnlyFields = ReadOnlyField | QrCodeField | AgreementField;
+export type ReadOnlyFields = ReadOnlyField | QrCodeField | AgreementField | ImageField;
 
 // @public (undocumented)
 export type RedirectField = {