Terms of Use Popup with Scroll-to-Accept Functionality

[charlesbrandt]

Implement a popup requiring users to accept the Terms of Use before proceeding. The button to accept should only activate after the user has scrolled through the entire terms document.
This process should be triggered for any user of the platform that has not already accepted the terms of use previously

Requirements

Popup Modal

• Display the Terms of Use in a modal popup.
• Modal should appear upon the user's first interaction or visit to the site.

Scroll-to-Accept Functionality

• Include a scrollbar for the Terms of Use content.
• The "Accept" button should remain disabled until the user has scrolled to the bottom of the terms.

Activation Confirmation

• Enable the "Accept" button after the user scrolls through the entire document.
• Optionally include a checkbox for explicit agreement (e.g., "I agree to the Terms of Use").

Other Best Practices
Ensure the modal is fully accessible (keyboard navigation, screen readers, etc.).
Log acceptance details (e.g., timestamp, IP, or session identifier).

Acceptance Criteria

Popup with Terms of Use appears on the first visit or interaction.
Users cannot proceed without accepting the terms.
The "Accept" button activates only after scrolling through the terms.

In the footer of the site, provide a clear and visible link to view the Terms of Use later.

Ideally, this feature should be configurable as a feature flag so it can be disabled for bioloop instances that do not require users to explicitly accept the Terms of Use