From c6d3d3e68404e42f13de9ca08550bcb55e2090ee Mon Sep 17 00:00:00 2001 From: Akshay Vasishth Date: Wed, 29 Jul 2026 01:54:03 +0530 Subject: [PATCH 1/4] FORMS-26630: Add terms and conditions component --- .../components/CheckBoxGroup.test.tsx | 25 +- .../components/TermsAndConditions.test.tsx | 219 ++++++++++++++++++ .../__tests__/utils/index.tsx | 4 +- .../src/components/CheckBoxGroup.tsx | 28 ++- .../src/components/TermsAndConditions.tsx | 132 +++++++++++ .../src/utils/mappings.ts | 2 + .../src/utils/utils.tsx | 12 +- 7 files changed, 410 insertions(+), 12 deletions(-) create mode 100644 packages/react-vanilla-components/__tests__/components/TermsAndConditions.test.tsx create mode 100644 packages/react-vanilla-components/src/components/TermsAndConditions.tsx diff --git a/packages/react-vanilla-components/__tests__/components/CheckBoxGroup.test.tsx b/packages/react-vanilla-components/__tests__/components/CheckBoxGroup.test.tsx index 73b11914..45874f0e 100644 --- a/packages/react-vanilla-components/__tests__/components/CheckBoxGroup.test.tsx +++ b/packages/react-vanilla-components/__tests__/components/CheckBoxGroup.test.tsx @@ -10,8 +10,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import CheckBoxGroup from '../../src/components/CheckBoxGroup'; import { createForm, Provider, renderComponent } from '../utils'; -import userEvent from "@testing-library/user-event"; -import "@testing-library/jest-dom/extend-expect" +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom/extend-expect'; const field = { name: 'checkbox', @@ -135,7 +135,7 @@ describe('Checkbox Group', () => { test('enum names should render correctly under a non-default locale', async () => { const f = { ...field, - enumNames: ['case à cocher 1', 'case à cocher 2', 'case à cocher 3'], + enumNames: ['case à cocher 1', 'case à cocher 2', 'case à cocher 3'] }; const form = createForm(f); const component = ; @@ -146,4 +146,23 @@ describe('Checkbox Group', () => { expect(getByText('case à cocher 2')).not.toBeNull(); expect(getByText('case à cocher 3')).not.toBeNull(); }); + + test('should render as anchor tag with checkbox hidden for toggleablelink', async () => { + + const field = { + id: 'toggleablelink-abcd', + name: 'link1234', + visible: true, + fieldType: 'checkbox-group', + ':type': 'core/fd/components/form/toggleablelink/v1/toggleablelink', + enum: ['https://www.adobe.com'], + enumNames: ['label for the link'] + }; + const { renderResponse } = await helper(field); + const anchor = renderResponse.container.querySelector('a.cmp-adaptiveform-checkboxgroup__links'); + const checkboxInput = renderResponse.container.querySelector(`[name=${field.name}]`); + + expect(anchor).toHaveAttribute('href', field.enum[0]); + expect(checkboxInput).toHaveStyle('display: none'); + }); }); diff --git a/packages/react-vanilla-components/__tests__/components/TermsAndConditions.test.tsx b/packages/react-vanilla-components/__tests__/components/TermsAndConditions.test.tsx new file mode 100644 index 00000000..ff6fb886 --- /dev/null +++ b/packages/react-vanilla-components/__tests__/components/TermsAndConditions.test.tsx @@ -0,0 +1,219 @@ +/* + * Copyright 2026 Adobe, Inc. + * + * Your access and use of this software is governed by the Adobe Customer Feedback Program Terms and Conditions or other Beta License Agreement signed by your employer and Adobe, Inc.. This software is NOT open source and may not be used without one of the foregoing licenses. Even with a foregoing license, your access and use of this file is limited to the earlier of (a) 180 days, (b) general availability of the product(s) which utilize this software (i.e. AEM Forms), (c) January 1, 2023, (d) Adobe providing notice to you that you may no longer use the software or that your beta trial has otherwise ended. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL ADOBE NOR ITS THIRD PARTY PROVIDERS AND PARTNERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import { act } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom/extend-expect'; +import TermsAndConditions from '../../src/components/TermsAndConditions'; +import mappings from '../../src/utils/mappings'; +import { renderComponent } from '../utils'; + +// jsdom does not implement IntersectionObserver; capture the callback so +// tests can simulate the intersetion element entering the viewport. +let intersectionCallback: (entries: Array<{ isIntersecting: boolean }>) => void = () => undefined; +const mockUnobserve = jest.fn(); + +beforeEach(() => { + mockUnobserve.mockClear(); + (global as any).IntersectionObserver = jest.fn((cb: any) => { + intersectionCallback = cb; + return { + observe: jest.fn(), + unobserve: mockUnobserve, + disconnect: jest.fn() + }; + }); +}); + +const textItem = { + id: 'text-def', + fieldType: 'plain-text', + name: 'consenttext', + value: 'Text related to the terms and conditions come here' +}; + +const checkboxItem = { + id: 'checkbox-abc', + fieldType: 'checkbox', + name: 'approvalcheckbox', + type: 'string', + required: true, + enabled: false, + label: { value: 'I agree to the terms & conditions' }, + enum: ['true'] +}; + +const textOnlyField = { + id: 'termsandconditions-abc', + fieldType: 'panel', + name: 'termsandconditions1234', + visible: true, + enabled: true, + type: 'object', + label: { value: 'Terms And Conditions', visible: true }, + properties: { + 'fd:tnc': true + }, + items: [textItem, checkboxItem] +}; + +const modalModeField = { + ...textOnlyField, + id: 'termsandconditions-modal', + properties: { + 'fd:tnc': true, + 'fd:showAsPopup': true + } +}; + +const linkItem = { + id: 'toggleablelink-1234', + fieldType: 'checkbox-group', + name: 'link1234', + visible: true, + enum: ['https://www.adobe.com'], + enumNames: ['label for the link'], + ':type': 'core/fd/components/form/toggleablelink/v1/toggleablelink', + events: { + 'custom:setProperty': [ + '$event.payload' + ], + 'change': [ + "if(length($field.$value) == length($field.$enum), dispatchEvent($parent.approvalcheckbox, 'custom:setProperty', {enabled : true()}), {})" + ] + } +}; + +const linkModeField = { + id: 'termsandconditions-abc', + fieldType: 'panel', + name: 'termsandconditions1234', + visible: true, + enabled: true, + type: 'object', + label: { value: 'Terms And Conditions', visible: true }, + properties: { + 'fd:tnc': true + }, + items: [ + { + id: 'checkbox-abc', + fieldType: 'checkbox', + name: 'approvalcheckbox', + type: 'string', + required: true, + enabled: false, + enforceEnum: true, + label: { value: 'I agree to the terms & conditions' }, + enum: ['true'] + }, + linkItem + ] +}; + + +describe('Terms And Conditions', () => { + + test('should render plain text and approval checkbox with no link', () => { + const helper = renderComponent(TermsAndConditions); + const { renderResponse } = helper(textOnlyField, null, mappings); + + expect(renderResponse.getByText(textItem.value)).toBeVisible(); + expect(renderResponse.getByText(checkboxItem.label.value)).toBeVisible(); + + const checkboxWidget = renderResponse.container.getElementsByClassName('cmp-adaptiveform-checkbox__widget')[0]; + + expect(checkboxWidget).toBeVisible(); + expect(checkboxWidget).toHaveAttribute('name', checkboxItem.name); + expect(renderResponse.container.getElementsByClassName('cmp-adaptiveform-termsandcondition__link').length).toEqual(0); + }); + + + test('link mode renders the checkbox-group and approval checkbox, with no text ', () => { + const helper = renderComponent(TermsAndConditions); + const { renderResponse } = helper(linkModeField, null, mappings); + + expect(renderResponse.container.getElementsByClassName('cmp-adaptiveform-termsandcondition__text').length).toEqual(0); + expect(renderResponse.container.getElementsByClassName('cmp-adaptiveform-termsandcondition__link').length).toEqual(1); + const linkTag = renderResponse.container.getElementsByClassName('cmp-adaptiveform-checkboxgroup__links')[0]; + expect(linkTag).toHaveAttribute('href', linkItem.enum[0]); + expect(linkTag).toHaveAttribute('title', linkItem.enumNames[0]); + + const checkboxWidget = renderResponse.container.getElementsByClassName('cmp-adaptiveform-checkbox__widget')[0]; + expect(checkboxWidget).toHaveAttribute('name', 'approvalcheckbox'); + }); + + test('clicking the link enables the approval checkbox', () => { + const helper = renderComponent(TermsAndConditions); + const { renderResponse } = helper(linkModeField, null, mappings); + const checkboxWidget = renderResponse.container.getElementsByClassName('cmp-adaptiveform-checkbox__widget')[0]; + expect(checkboxWidget).toHaveAttribute('name', 'approvalcheckbox'); + expect(checkboxWidget).toBeDisabled(); + const linkTag = renderResponse.getByText(linkItem.enumNames[0]); + userEvent.click(linkTag); + expect(checkboxWidget).toBeEnabled(); + }); + + test('modal can be toggled using approval checkbox', () => { + const helper = renderComponent(TermsAndConditions); + const { renderResponse } = helper(modalModeField, null, mappings); + + const contentContainer = renderResponse.container.getElementsByClassName('cmp-adaptiveform-termsandcondition__content-container--modal')[0]; + expect(contentContainer).toHaveStyle('display: none'); + + const checkboxWrapper = renderResponse.container.getElementsByClassName('cmp-adaptiveform-termsandcondition__approvalcheckbox')[0]; + userEvent.click(checkboxWrapper); + expect(contentContainer).toHaveStyle('display: block'); + + act(() => { + intersectionCallback([{ isIntersecting: true }]); + }); + + const closeButton = renderResponse.getByLabelText('Close terms and conditions document'); + userEvent.click(closeButton); + expect(contentContainer).toHaveStyle('display: none'); + const checkboxWidget = renderResponse.container.getElementsByClassName('cmp-adaptiveform-checkbox__widget')[0]; + expect(checkboxWidget).toHaveAttribute('name', 'approvalcheckbox'); + expect(checkboxWidget).toBeEnabled(); + }); + + + test('checkbox becomes enabled once the text-intersect div is scrolled into view', () => { + const helper = renderComponent(TermsAndConditions); + const largeTextItem = {...textItem, value: 'Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here.Text related to the terms and conditions come here'} + const field = {...textOnlyField, items: [checkboxItem, largeTextItem]}; + const { renderResponse } = helper(field, null, mappings); + + const checkboxElement = renderResponse.container.querySelector(`#${checkboxItem.id}-widget`); + expect(checkboxElement).toBeDisabled(); + + act(() => { + intersectionCallback([{ isIntersecting: true }]); + }); + + expect(checkboxElement).toBeEnabled(); + expect(mockUnobserve).toHaveBeenCalled(); + }); + + test('checkbox stays disabled while intersection has not fired', () => { + const helper = renderComponent(TermsAndConditions); + const largeTextItem = {...textItem, value: 'Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here. Text related to the terms and conditions come here.Text related to the terms and conditions come here'} + const field = {...textOnlyField, items: [checkboxItem, largeTextItem]}; + const { renderResponse } = helper(field, null, mappings); + + const checkboxElement = renderResponse.container.querySelector(`#${checkboxItem.id}-widget`); + expect(checkboxElement).toBeDisabled(); + + act(() => { + intersectionCallback([{ isIntersecting: false }]); + }); + + expect(checkboxElement).toBeDisabled(); + expect(mockUnobserve).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/react-vanilla-components/__tests__/utils/index.tsx b/packages/react-vanilla-components/__tests__/utils/index.tsx index 83b4b037..c66815cb 100644 --- a/packages/react-vanilla-components/__tests__/utils/index.tsx +++ b/packages/react-vanilla-components/__tests__/utils/index.tsx @@ -46,7 +46,7 @@ export const Provider = }; export const renderComponent = function (Component: JSXElementConstructor) { - const test = (field: any, operation?: any) => { + const test = (field: any, operation?: any, mappings = {}) => { const form = createForm(field); if (operation) { operation(form, form.items[0]); @@ -54,7 +54,7 @@ export const renderComponent = function (Component: JSXElementConstructor; - const wrapper = Provider(form); + const wrapper = Provider(form,mappings); const renderResponse = render(component, { wrapper }); return { renderResponse, diff --git a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx index 3fc6255a..375a1272 100644 --- a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx +++ b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx @@ -27,6 +27,7 @@ const CheckBoxGroup = (props: PROPS) => { const { id, label, required, enumNames, enum: enums, value, name, readOnly, visible, enabled, appliedCssClassNames, valid } = props; const options = enumNames && enumNames.length ? enumNames : enums || []; const orientation = props.layout?.orientation.toUpperCase(); + const isToggleableLink = props[':type'].includes('toggleablelink'); const getValue = useCallback((value: any) => { if (value) { @@ -40,9 +41,8 @@ const CheckBoxGroup = (props: PROPS) => { const newVal = getValue(value); - const changeHandler = useCallback((event: React.ChangeEvent) => { - const val = event.target.value; - const checked = event.target.checked; + const toggleValue = useCallback((val: string, checked: boolean) => { + if(readOnly) { return; } let valAdded = [...newVal]; if (checked) { valAdded.push(val); @@ -51,7 +51,16 @@ const CheckBoxGroup = (props: PROPS) => { valAdded = valAdded.filter((item) => item != val); } props.dispatchChange(valAdded); - }, [props.dispatchChange, newVal]); + }, [props.dispatchChange, newVal, readOnly]); + + const changeHandler = useCallback((event: React.ChangeEvent) => { + toggleValue(event.target.value, event.target.checked); + }, [toggleValue]); + + const linkClickHandler = useCallback((index: number) => { + let valAdded = [...newVal]; + toggleValue(enums![index],!valAdded.includes(enums![index])); + },[toggleValue, enums]); return (
{ readOnly={readOnly} checked={value?.includes(enums?.[index])} aria-invalid={!valid} + disabled={!enabled} + style={isToggleableLink ? {display: 'none'}: undefined} /> - {richTextString(item)} + {isToggleableLink ? + linkClickHandler(index)} + >{richTextString(item)} : richTextString(item) + }
))} diff --git a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx new file mode 100644 index 00000000..b8b52378 --- /dev/null +++ b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx @@ -0,0 +1,132 @@ +// ******************************************************************************* +// * Copyright 2026 Adobe +// * +// * Licensed under the Apache License, Version 2.0 (the “License”); +// * you may not use this file except in compliance with the License. +// * You may obtain a copy of the License at +// * +// * http://www.apache.org/licenses/LICENSE-2.0 +// * +// * Unless required by applicable law or agreed to in writing, software +// * distributed under the License is distributed on an “AS IS” BASIS, +// * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// * See the License for the specific language governing permissions and +// * limitations under the License. +// ****************************************************************************** + +import React, { useCallback, useContext, useState, useEffect } from 'react'; +import { withRuleEngine } from '../utils/withRuleEngine'; +import { PROPS_PANEL } from '../utils/type'; +import { getChild } from '../utils/utils'; +import { FormContext, useFormIntl } from '@aemforms/af-react-renderer'; +import LabelWithDescription from './common/LabelWithDescription'; + +const TermsAndConditions = (props: PROPS_PANEL) => { + + const { mappings, form } = useContext(FormContext); + const i18n = useFormIntl(); + const { id, label, enabled, visible, required, appliedCssClassNames, properties, items } = props; + const hasModal = properties?.['fd:showAsPopup'] ?? false; + const [open, setOpen] = useState(false); + const textIntersectId = `${props.id}-text-intersect`; + const closeIconLabel = i18n.formatMessage({ id: 'termsAndConditions.closeButton.ariaLabel', defaultMessage: 'Close terms and conditions document' }); + + useEffect(() => { + const textItem = getElementByFieldType('plain-text'); + if (!textItem) { return; } + + const node = document.getElementById(textIntersectId); + if (!node) { return; } + + const observer = new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + const item: any = getElementByFieldType('checkbox'); + if(item) { + const itemInForm = form.getElement(item.id); + if(itemInForm) { + form.getElement(item.id).enabled = true; + } + observer.unobserve(node); + } + } + }, { threshold: 1 }); + + observer.observe(node); + return () => observer.disconnect(); + }, [items, textIntersectId]); + + const getElementByFieldType = (fieldType: string) => items.find(item => item.fieldType === fieldType); + const approvalCheckboxItem = getElementByFieldType('checkbox'); + + const showModal = useCallback((show: boolean) => { + if (hasModal) { + const item: any = getElementByFieldType('checkbox'); + if(item) { + const itemInForm = form.getElement(item.id); + // do not show if approval checkbox enabled + if(itemInForm && !itemInForm.enabled || !show) { + setOpen(show); + } + } + + } + }, [hasModal]); + + return (
+ + +
+
+ {hasModal && (
+ + + +

{i18n.formatMessage({ id: 'termsAndConditions.header.label', defaultMessage: 'Please review the terms and conditions' })}

+
) + } +
+ { + items.map((item: any, index) => { + // text or link render below + const classSuffix = item.fieldType === 'plain-text' ? 'text' : item.fieldType === 'checkbox-group' ? 'link' : null; + { + return (classSuffix && (
+ {getChild(item, index, mappings)} + {classSuffix === 'text' && (
)} +
)); + } + }) + } +
+
+
+ +
showModal(true)}> + {approvalCheckboxItem && getChild(approvalCheckboxItem, 1, mappings)} +
+
); +}; + +export default withRuleEngine(TermsAndConditions); diff --git a/packages/react-vanilla-components/src/utils/mappings.ts b/packages/react-vanilla-components/src/utils/mappings.ts index 90b887a7..4b496593 100644 --- a/packages/react-vanilla-components/src/utils/mappings.ts +++ b/packages/react-vanilla-components/src/utils/mappings.ts @@ -39,6 +39,7 @@ import ReCaptcha from '../components/ReCaptcha'; import HCaptcha from '../components/HCaptcha'; import Image from '../components/Image'; import Scribble from '../components/Scribble'; +import TermsAndConditions from '../components/TermsAndConditions'; const mappings = { 'text-input': TextField, @@ -64,6 +65,7 @@ const mappings = { 'core/fd/components/form/telephoneinput/v1/telephoneinput': TelephoneInput, 'core/fd/components/form/switch/v1/switch': Switch, 'core/fd/components/form/hcaptcha/v1/hcaptcha': HCaptcha, + 'core/fd/components/form/termsandconditions/v1/termsandconditions': TermsAndConditions, captcha: ReCaptcha, image: Image, signature: Scribble, diff --git a/packages/react-vanilla-components/src/utils/utils.tsx b/packages/react-vanilla-components/src/utils/utils.tsx index 6dd1f340..81ccb50a 100644 --- a/packages/react-vanilla-components/src/utils/utils.tsx +++ b/packages/react-vanilla-components/src/utils/utils.tsx @@ -1,3 +1,6 @@ +import React from 'react'; +import { getRenderer } from '@aemforms/af-react-renderer'; + export const formatBytes = (bytes: number, decimals = 0) => { if (!+bytes) { return '0 Bytes'; @@ -8,9 +11,9 @@ export const formatBytes = (bytes: number, decimals = 0) => { const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; - }; +}; - export const syncAriaDescribedBy = (id: string, tooltip?: string, description?: string, error?: string) => { +export const syncAriaDescribedBy = (id: string, tooltip?: string, description?: string, error?: string) => { const descriptions = []; if (description) { @@ -24,4 +27,9 @@ export const formatBytes = (bytes: number, decimals = 0) => { } return descriptions.join(' '); +}; + +export const getChild = (child: any, index: number, mappings: any) => { + const Comp = getRenderer(child,mappings ); + return Comp ? : null; }; \ No newline at end of file From 44edb05a1d274ca68d98b0a2bfb646373e412bf3 Mon Sep 17 00:00:00 2001 From: Akshay Vasishth Date: Wed, 29 Jul 2026 18:56:19 +0530 Subject: [PATCH 2/4] FORMS-26630: parity with CC and fix uncontrolled field error in checkboxgroup --- .../src/components/CheckBoxGroup.tsx | 2 +- .../src/components/TermsAndConditions.tsx | 28 +++++++++++-------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx index 375a1272..4b0d7da3 100644 --- a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx +++ b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx @@ -97,7 +97,7 @@ const CheckBoxGroup = (props: PROPS) => { value={enums![index]} onChange={changeHandler} readOnly={readOnly} - checked={value?.includes(enums?.[index])} + checked={!!value?.includes(enums?.[index])} aria-invalid={!valid} disabled={!enabled} style={isToggleableLink ? {display: 'none'}: undefined} diff --git a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx index b8b52378..ff84bf04 100644 --- a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx +++ b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx @@ -25,7 +25,7 @@ const TermsAndConditions = (props: PROPS_PANEL) => { const { mappings, form } = useContext(FormContext); const i18n = useFormIntl(); - const { id, label, enabled, visible, required, appliedCssClassNames, properties, items } = props; + const { id, label, enabled, visible, required, appliedCssClassNames, properties, items, readOnly } = props; const hasModal = properties?.['fd:showAsPopup'] ?? false; const [open, setOpen] = useState(false); const textIntersectId = `${props.id}-text-intersect`; @@ -39,23 +39,27 @@ const TermsAndConditions = (props: PROPS_PANEL) => { if (!node) { return; } const observer = new IntersectionObserver(([entry]) => { - if (entry.isIntersecting) { - const item: any = getElementByFieldType('checkbox'); - if(item) { - const itemInForm = form.getElement(item.id); - if(itemInForm) { - form.getElement(item.id).enabled = true; - } - observer.unobserve(node); - } + if (entry.isIntersecting && enabled && !readOnly) { + // keeping same behavior as core components, although we have only 1 approval checkbox to enable + const checkboxList: Array = getElementsByFieldType('checkbox'); + checkboxList.forEach((checkbox: any)=> { + if(checkbox) { + const itemInForm = form.getElement(checkbox.id); + if(itemInForm) { + form.getElement(checkbox.id).enabled = true; + } + observer.unobserve(node); + } + }); } }, { threshold: 1 }); observer.observe(node); return () => observer.disconnect(); - }, [items, textIntersectId]); + }, [items, textIntersectId, enabled, readOnly]); const getElementByFieldType = (fieldType: string) => items.find(item => item.fieldType === fieldType); + const getElementsByFieldType = (fieldType: string) => items.filter(item => item.fieldType === fieldType); const approvalCheckboxItem = getElementByFieldType('checkbox'); const showModal = useCallback((show: boolean) => { @@ -70,7 +74,7 @@ const TermsAndConditions = (props: PROPS_PANEL) => { } } - }, [hasModal]); + }, [hasModal, items]); return (
Date: Thu, 30 Jul 2026 19:03:50 +0530 Subject: [PATCH 3/4] FORMS-26630: Add parity with core components --- .../src/components/CheckBox.tsx | 7 ++++--- .../src/components/CheckBoxGroup.tsx | 2 +- .../src/components/RadioButtonGroup.tsx | 4 +++- .../src/components/TermsAndConditions.tsx | 18 +++++++++++------- 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/react-vanilla-components/src/components/CheckBox.tsx b/packages/react-vanilla-components/src/components/CheckBox.tsx index 665085ea..a1472b4b 100644 --- a/packages/react-vanilla-components/src/components/CheckBox.tsx +++ b/packages/react-vanilla-components/src/components/CheckBox.tsx @@ -26,9 +26,10 @@ const CheckBox = (props: PROPS) => { const unSelectedValue = (enums?.length || 0) < 2 ? null : enums?.[1]; const handleChange = useCallback((e: React.ChangeEvent) => { + if(readOnly) { return; } const val = e.target.checked ? selectedValue : unSelectedValue; props.dispatchChange(val); - }, [props.dispatchChange]); + }, [props.dispatchChange, readOnly]); return (
{ className={'cmp-adaptiveform-checkbox__widget'} title={props.tooltipText || ''} onChange={handleChange} - value={value} + value={value || ''} checked={selectedValue === value ? true : false} name={name} required={required} readOnly={readOnly} - disabled={!enabled} + disabled={!enabled || readOnly} aria-checked={selectedValue === value ? 'true' : 'false'} aria-invalid={!valid} aria-describedby={syncAriaDescribedBy(id, props.tooltip, props.description, props.errorMessage)} /> diff --git a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx index 4b0d7da3..a3c417aa 100644 --- a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx +++ b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx @@ -99,7 +99,7 @@ const CheckBoxGroup = (props: PROPS) => { readOnly={readOnly} checked={!!value?.includes(enums?.[index])} aria-invalid={!valid} - disabled={!enabled} + disabled={!enabled || readOnly} style={isToggleableLink ? {display: 'none'}: undefined} /> {isToggleableLink ? diff --git a/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx b/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx index 368bac7b..4e0173fe 100644 --- a/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx +++ b/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx @@ -29,9 +29,10 @@ const RadioButtonGroup = (props: PROPS) => { const orientation = props.layout?.orientation.toUpperCase(); const changeHandler = useCallback((event: React.ChangeEvent) => { + if(readOnly) { return; } const val = event.target.value; props.dispatchChange(val); - }, [props.dispatchChange]); + }, [props.dispatchChange, readOnly]); return (
{ aria-checked={value === enums![index] ? 'true' : 'false'} checked={value?.length ? value?.includes(enums?.[index]) : null} aria-invalid={!valid} + disabled={!enabled || readOnly} /> {richTextString(item)} diff --git a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx index ff84bf04..8ef5c655 100644 --- a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx +++ b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx @@ -62,20 +62,24 @@ const TermsAndConditions = (props: PROPS_PANEL) => { const getElementsByFieldType = (fieldType: string) => items.filter(item => item.fieldType === fieldType); const approvalCheckboxItem = getElementByFieldType('checkbox'); - const showModal = useCallback((show: boolean) => { + const toggleModal = useCallback((show: boolean) => { if (hasModal) { const item: any = getElementByFieldType('checkbox'); if(item) { - const itemInForm = form.getElement(item.id); - // do not show if approval checkbox enabled - if(itemInForm && !itemInForm.enabled || !show) { setOpen(show); - } } } }, [hasModal, items]); + const handleApprovalCheckboxClick = useCallback((event: React.MouseEvent)=> { + // below check is to keep behavior same as core components + // label click toggles popup, input won't + if((event.target as HTMLElement).tagName !== 'INPUT') { + toggleModal(true); + } + },[toggleModal]); + return (
{ + onClick={()=>toggleModal(false)}>X

{i18n.formatMessage({ id: 'termsAndConditions.header.label', defaultMessage: 'Please review the terms and conditions' })}

) @@ -127,7 +131,7 @@ const TermsAndConditions = (props: PROPS_PANEL) => {
showModal(true)}> + onClick={handleApprovalCheckboxClick}> {approvalCheckboxItem && getChild(approvalCheckboxItem, 1, mappings)}
); From d791545f0db7eb791907d774715985fececf3a6a Mon Sep 17 00:00:00 2001 From: Akshay Vasishth Date: Thu, 30 Jul 2026 19:13:27 +0530 Subject: [PATCH 4/4] FORMS-26630: Add core component reference --- .../src/components/TermsAndConditions.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx index 8ef5c655..3147c853 100644 --- a/packages/react-vanilla-components/src/components/TermsAndConditions.tsx +++ b/packages/react-vanilla-components/src/components/TermsAndConditions.tsx @@ -12,6 +12,9 @@ // * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // * See the License for the specific language governing permissions and // * limitations under the License. + +// * The BEM markup is as per the AEM core form components guidelines. +// * LINK- https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html // ****************************************************************************** import React, { useCallback, useContext, useState, useEffect } from 'react';