refactor(reactjs-todo-davinci): split object value component

Author: ancheetah

javascript/reactjs-todo-davinci/client/components/davinci-client/boolean.js

@@ -12,7 +12,7 @@ import React, { useState } from 'react';
 import { interpolateRichContent } from '../utilities/rich-content';
 
 export default function BooleanComponent({ collector, inputName, updater }) {
-  const [isChecked, setIsChecked] = useState(collector.output.value);
+  const [isChecked, setIsChecked] = useState(collector.output.value ?? false);
 
   const fieldId = collector.output.key || `${inputName}-checkbox-field`;
 

javascript/reactjs-todo-davinci/client/components/davinci-client/device.js

@@ -0,0 +1,54 @@
+/*
+ * ping-sample-web-react-davinci
+ *
+ * device.js
+ *
+ * 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 React, { useEffect, useContext, useState } from 'react';
+import { ThemeContext } from '../../context/theme.context.js';
+
+export default function DeviceComponent({ collector, updater }) {
+  const [selectedDevice, setSelectedDevice] = useState(
+    collector.output.options?.[0]?.value ?? null,
+  );
+  const theme = useContext(ThemeContext);
+
+  useEffect(() => {
+    if (selectedDevice) {
+      const result = updater(selectedDevice);
+      if (result && 'error' in result) {
+        console.error('Failed to update device', result.error);
+      }
+    }
+  }, [selectedDevice, updater]);
+
+  return (
+    <div className="d-flex flex-column align-items-center mt-2 mb-2">
+      <label
+        htmlFor="device-select"
+        className={`form-label cstm_subhead-text mb-4 fw-bold text-center ${theme.textMutedClass}`}
+      >
+        {collector.output.label || 'select an option'}
+      </label>
+      <select
+        id="device-select"
+        className="form-select form-select-lg w-100"
+        value={selectedDevice}
+        onChange={(event) => setSelectedDevice(event.target.value)}
+      >
+        {collector.output.options?.map((option) => (
+          <option key={option.value + option.label} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <button type="submit" className="mt-5 justify-content w-100 btn btn-primary">
+        Next
+      </button>
+    </div>
+  );
+}

javascript/reactjs-todo-davinci/client/components/davinci-client/form.js

@@ -16,7 +16,8 @@ import Password from './password.js';
 import SocialLoginButton from './social-login-button.js';
 import SubmitButton from './submit-button.js';
 import Protect from './protect.js';
-import ObjectValueComponent from './object-value.js';
+import PhoneNumberComponent from './phone-number.js';
+import DeviceComponent from './device.js';
 import SingleSelect from './single-select.js';
 import FlowLink from './flow-link.js';
 import FidoComponent from './fido.js';
@@ -186,11 +187,18 @@ export default function Form() {
         );
       case 'PhoneNumberCollector':
       case 'PhoneNumberExtensionCollector':
+        return (
+          <PhoneNumberComponent
+            inputName={idx + collectorName}
+            collector={collector}
+            updater={updater(collector)}
+            key={idx + collectorName}
+          />
+        );
       case 'DeviceRegistrationCollector':
       case 'DeviceAuthenticationCollector':
         return (
-          <ObjectValueComponent
-            inputName={idx + collectorName}
+          <DeviceComponent
             collector={collector}
             updater={updater(collector)}
             key={idx + collectorName}

…omponents/davinci-client/object-value.js …omponents/davinci-client/phone-number.jsjavascript/reactjs-todo-davinci/client/components/davinci-client/object-value.js renamed to javascript/reactjs-todo-davinci/client/components/davinci-client/phone-number.js javascript/reactjs-todo-davinci/client/components/davinci-client/object-value.js renamed to javascript/reactjs-todo-davinci/client/components/davinci-client/phone-number.js

@@ -1,67 +1,22 @@
 /*
  * ping-sample-web-react-davinci
  *
- * object-value.js
+ * phone-number.js
  *
- * Copyright (c) 2025 - 2026 Ping Identity Corporation. All rights reserved.
+ * 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 React, { useEffect, useContext, useState } from 'react';
-import { ThemeContext } from '../../context/theme.context.js';
+import React, { useState } from 'react';
 
-export default function ObjectValueComponent({ collector, updater, inputName }) {
-  const [selectedDevice, setSelectedDevice] = useState(
-    collector.output.options?.[0]?.value ?? null,
-  );
+export default function PhoneNumberComponent({ collector, updater, inputName }) {
   const [phoneValue, setPhoneValue] = useState({
     phoneNumber: collector.input.value?.phoneNumber ?? '',
     extension: collector.input.value?.extension ?? '',
   });
-  const theme = useContext(ThemeContext);
 
-  useEffect(() => {
-    if (
-      collector.type === 'DeviceAuthenticationCollector' ||
-      collector.type === 'DeviceRegistrationCollector'
-    ) {
-      updater(selectedDevice);
-    }
-  }, [selectedDevice, updater, collector.type]);
-
-  const handleChangeDevice = (event) => {
-    event.preventDefault();
-    setSelectedDevice(event.target.value);
-  };
-  if (
-    collector.type === 'DeviceAuthenticationCollector' ||
-    collector.type === 'DeviceRegistrationCollector'
-  ) {
-    return (
-      <div className="d-flex flex-column align-items-center mt-2 mb-2">
-        <label
-          htmlFor="device-select"
-          className={`form-label cstm_subhead-text mb-4 fw-bold text-center ${theme.textMutedClass}`}
-        >
-          {collector.output.label || 'select an option'}
-        </label>
-        <select
-          id="device-select"
-          className="form-select form-select-lg w-100"
-          value={selectedDevice}
-          onChange={handleChangeDevice}
-        >
-          {collector.output.options.map((option) => (
-            <option key={option.value + option.label} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        <button className="mt-5 justify-content w-100 btn btn-primary">Next</button>
-      </div>
-    );
-  } else if (collector.type === 'PhoneNumberCollector') {
+  if (collector.type === 'PhoneNumberCollector') {
     const phoneInputId = `${inputName}-phone-number`;
     const required = collector.input.validation?.some(
       (validation) => validation.type === 'required' && validation.rule === true,
@@ -146,6 +101,6 @@ export default function ObjectValueComponent({ collector, updater, inputName })
       </>
     );
   } else {
-    return null; // Or handle other collector types, if applicable
+    return null;
   }
 }

javascript/reactjs-todo-davinci/client/components/davinci-client/readonly.js

@@ -20,7 +20,7 @@ export default function ReadOnly({ collector }) {
   } else if (collectorType === 'RichTextCollector') {
     const { richContent } = output;
 
-    if (!richContent.replacements?.length) {
+    if (!richContent?.replacements?.length) {
       return <p>{output.content}</p>;
     }
 
@@ -43,5 +43,7 @@ export default function ReadOnly({ collector }) {
         <p>{content}</p>
       </div>
     );
+  } else {
+    return null;
   }
 }

javascript/reactjs-todo-davinci/package.json

@@ -39,7 +39,7 @@
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
-    "@forgerock/davinci-client": "https://pkg.pr.new/@forgerock/davinci-client@638",
+    "@forgerock/davinci-client": "^0.0.0-beta-20260615202501",
     "@forgerock/oidc-client": "latest",
     "@forgerock/protect": "latest",
     "cookie-parser": "^1.4.5",