feat(davinci-client): add form image collector

Author: vatsalparikh

.changeset/curly-wolves-swim.md

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

.changeset/silent-ideas-joke.md

@@ -2,4 +2,4 @@
 '@forgerock/davinci-client': minor
 ---
 
-Support form agreements with additional `title` property ReadOnlyCollector
+Support form agreements with AgreementCollector

.changeset/single-checkbox.md

@@ -2,7 +2,7 @@
 '@forgerock/davinci-client': minor
 ---
 
-Adds support for the SINGLE_CHECKBOX field. A new ValidatedBooleanCollector interface was introduced including validation support for required checkboxes and updater support for booleans. A BooleanCollector was also added for parity in the case that no validation is required.
+Adds support for the SINGLE_CHECKBOX field. A new ValidatedBooleanCollector interface was introduced including validation support for required checkboxes and updater support for booleans.
 
 **Type improvements**
 

e2e/davinci-app/components/agreement.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 { AgreementCollector } from '@forgerock/davinci-client/types';
+
+export default function (formEl: HTMLFormElement, collector: AgreementCollector) {
+  const output = collector.output;
+  const componentEnabled = output.enabled;
+
+  if (!componentEnabled) {
+    return;
+  }
+
+  const content = output.label;
+  const titleEnabled = output.titleEnabled;
+  const title = output.title;
+
+  if (titleEnabled) {
+    const titleEl = document.createElement('h3');
+    titleEl.innerText = title;
+    formEl?.appendChild(titleEl);
+  }
+
+  const agreement = document.createElement('p');
+  agreement.innerText = content;
+  formEl?.appendChild(agreement);
+}

e2e/davinci-app/components/boolean.ts

@@ -5,7 +5,6 @@
  * of the MIT license. See the LICENSE file for details.
  */
 import type {
-  BooleanCollector,
   ValidatedBooleanCollector,
   Updater,
   Validator,
@@ -15,15 +14,15 @@ import { dotToCamelCase, richContentInterpolation } from '../helper.js';
 /**
  * Creates a single checkbox and attaches it to the form
  * @param {HTMLFormElement} formEl - The form element to attach the checkbox to
- * @param {BooleanCollector | ValidatedBooleanCollector} collector - Contains the configuration
+ * @param {ValidatedBooleanCollector} collector - Contains the configuration
  * @param {Updater} updater - Function to call when selection changes
  * @param {Validator} validator - Function to validate the input
  */
 export default function booleanComponent(
   formEl: HTMLFormElement,
-  collector: BooleanCollector | ValidatedBooleanCollector,
-  updater: Updater<BooleanCollector | ValidatedBooleanCollector>,
-  validator?: Validator<ValidatedBooleanCollector>,
+  collector: ValidatedBooleanCollector,
+  updater: Updater<ValidatedBooleanCollector>,
+  validator: Validator<ValidatedBooleanCollector>,
 ) {
   const collectorKey = dotToCamelCase(collector.output.key);
 
@@ -58,16 +57,7 @@ export default function booleanComponent(
   // Add event listener to handle single-select behavior
   checkbox.addEventListener('change', (event) => {
     const checked = (event.target as HTMLInputElement).checked;
-
-    if (collector.type === 'BooleanCollector') {
-      const updateError = updater(checked);
-      if (updateError && 'error' in updateError) {
-        console.error(updateError.error.message);
-      }
-      return;
-    }
-
-    const result = validator && validator(checked);
+    const result = validator(checked);
     const errorEl = formEl?.querySelector(`.${collectorKey}-error`);
 
     // Validate the input

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2025 - 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/components/label.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2025 - 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 { ReadOnlyCollector, RichTextCollector } from '@forgerock/davinci-client/types';
+import { richContentInterpolation } from '../helper.js';
+
+export default function (
+  formEl: HTMLFormElement,
+  collector: ReadOnlyCollector | RichTextCollector,
+) {
+  const p = document.createElement('p');
+  p.style.whiteSpace = 'pre-line';
+
+  if (collector.type !== 'RichTextCollector') {
+    p.innerText = collector.output.content;
+    formEl?.appendChild(p);
+    return;
+  }
+
+  const { richContent } = collector.output;
+
+  if (richContent.replacements.length === 0) {
+    p.innerText = collector.output.content;
+    formEl?.appendChild(p);
+    return;
+  }
+
+  // Interpolate the template by splitting on {{key}} and inserting links
+  const pRichText = richContentInterpolation(richContent);
+
+  formEl?.appendChild(pRichText);
+}

e2e/davinci-app/components/read-only.ts

@@ -10,7 +10,6 @@ import { davinci } from '@forgerock/davinci-client';
 import { oidc } from '@forgerock/oidc-client';
 import type { OidcConfig } from '@forgerock/oidc-client/types';
 import type {
-  Collectors,
   CustomLogger,
   DaVinciConfig,
   DavinciClient,
@@ -31,10 +30,12 @@ import socialLoginButtonComponent from './components/social-login-button.js';
 import { serverConfigs } from './server-configs.js';
 import singleValueComponent from './components/single-value.js';
 import multiValueComponent from './components/multi-value.js';
-import readOnlyComponent from './components/read-only.js';
+import labelComponent from './components/label.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 agreementComponent from './components/agreement.js';
 import pollingComponent from './components/polling.js';
 import booleanComponent from './components/boolean.js';
 
@@ -206,7 +207,7 @@ const urlParams = new URLSearchParams(window.location.search);
 
     const collectors = davinciClient.getCollectors();
 
-    collectors.forEach((collector: Collectors) => {
+    collectors.forEach((collector) => {
       if (collector.type === 'TextCollector' && collector.name === 'protectsdk') {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         collector;
@@ -226,12 +227,16 @@ const urlParams = new URLSearchParams(window.location.search);
           submitForm,
         );
       } else if (collector.type === 'ReadOnlyCollector' || collector.type === 'RichTextCollector') {
-        readOnlyComponent(
+        labelComponent(
           formEl, // You can ignore this; it's just for rendering
           collector, // This is the plain object of the collector
         );
       } else if (collector.type === 'QrCodeCollector') {
         qrCodeComponent(formEl, collector);
+      } else if (collector.type === 'ImageCollector') {
+        formImageComponent(formEl, collector);
+      } else if (collector.type === 'AgreementCollector') {
+        agreementComponent(formEl, collector);
       } else if (collector.type === 'TextCollector') {
         textComponent(
           formEl, // You can ignore this; it's just for rendering
@@ -286,15 +291,6 @@ const urlParams = new URLSearchParams(window.location.search);
           davinciClient.update(collector), // Returns an update function for this collector
           submitForm,
         );
-      } else if (collector.type === 'BooleanCollector') {
-        booleanComponent(formEl, collector, davinciClient.update(collector));
-      } else if (collector.type === 'ValidatedBooleanCollector') {
-        booleanComponent(
-          formEl,
-          collector,
-          davinciClient.update(collector),
-          davinciClient.validate(collector),
-        );
       } else if (collector.type === 'FlowCollector') {
         flowLinkComponent(
           formEl, // You can ignore this; it's just for rendering
@@ -309,6 +305,13 @@ const urlParams = new URLSearchParams(window.location.search);
         singleValueComponent(formEl, collector, davinciClient.update(collector));
       } else if (collector.type === 'MultiSelectCollector') {
         multiValueComponent(formEl, collector, davinciClient.update(collector));
+      } else if (collector.type === 'ValidatedBooleanCollector') {
+        booleanComponent(
+          formEl,
+          collector,
+          davinciClient.update(collector),
+          davinciClient.validate(collector),
+        );
       }
     });
 

e2e/davinci-app/main.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
    */