Skip to content

[WEB-4302] - Prompt to scroll in Data Donation dialog if consent not fully read #1850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
henry-tp wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

[WEB-4302] - Prompt to scroll in Data Donation dialog if consent not fully read #1850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2953ab5
WEB-4302 new info box to prompt user to read consent
henry-tp Jan 22, 2026
4a11cf8
WEB-4302 fix typo
henry-tp Jan 22, 2026
c34ac2e
WEB-4302 add tests
henry-tp Jan 22, 2026
3a71e74
WEB-4302 remove unused CSS from code review
henry-tp Jan 22, 2026
b55aa83
Merge branch 'develop' into WEB-4302-consent-infobox
henry-tp Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions __tests__/unit/app/pages/patient/DataDonationConsentDialog.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,11 @@ describe('DataDonationConsentDialog', () => {
// Check consent checkboxes
const readCheckbox = screen.getByLabelText(/I have read the consent statement/);
const consentCheckbox = screen.getByLabelText(/As their parent or guardian, I have read this form/);
const consentPrompt = screen.getByText('Please scroll to the bottom of the consent form to enable the agreement checkbox.');

expect(readCheckbox).not.toBeChecked(); // Should be unchecked until document is scrolled
expect(consentCheckbox).toBeDisabled(); // Should be disabled until read checkbox is checked
expect(consentPrompt).toBeInTheDocument(); // Should be visible until user scrolls to bottom

// Find the consent document container and simulate scroll
const consentText = screen.getByTestId('consentDocumentText');
Expand All @@ -123,6 +125,7 @@ describe('DataDonationConsentDialog', () => {

expect(readCheckbox).toBeChecked(); // Should be checked after scrolling
expect(consentCheckbox).toBeEnabled(); // Should be enabled after scrolling
expect(consentPrompt).not.toBeInTheDocument(); // Should be hidden since user has read entire consent
await user.click(consentCheckbox);

// Click Next to advance to second step
Expand Down
17 changes: 16 additions & 1 deletion app/pages/patient/DataDonationConsentDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,8 @@ export const DataDonationConsentDialog = (props) => {
setCaregiverName(e.target.value);
};

const isConsentReadForCurrentStep = formikContext.values[`${formSteps[currentConsentStep]}ConsentRead`];

return (
<Dialog
id="dataDonationConsentDialog"
Expand Down Expand Up @@ -305,12 +307,25 @@ export const DataDonationConsentDialog = (props) => {
themeProps={{ sx: { bg: 'transparent', textAlign: 'left' } }}
data-testid="consent-checkbox"
label={consentInputLabel}
disabled={!formikContext.values[`${formSteps[currentConsentStep]}ConsentRead`]}
disabled={!isConsentReadForCurrentStep}
sx={{
boxShadow: `0 0 0 2px ${colors.lightestGrey} inset`,
}}
/>
</Box>

<Box id="consentReviewRequiredMessageContainer" sx={{ minHeight: '32px' }}>
{!isConsentReadForCurrentStep && (
<Pill
id="consentReviewRequiredMessage"
sx={{ fontSize: 1 }}
text={t('Please scroll to the bottom of the consent form to enable the agreement checkbox.')}
icon={InfoRoundedIcon}
label={t('Consent review required message')}
colorPalette="info"
/>
)}
</Box>
</Box>
</DialogContent>
<DialogActions>
Expand Down