[adit24dhaya]

Description

Original task request

Original task in Google Docs

Complete task captured directly from the original document; the requested wording is unchanged.

Addresses Task 51 (High Priority): Jobs Component — Missing "Terms and Conditions" Checkbox on Job Application Form (Figma Discrepancy).

The approved design includes a mandatory “I agree to terms and conditions” checkbox immediately before Submit on /job-application. The control and policy agreement text were missing, allowing applicants to submit without checking an acknowledgement. This change adds the linked checkbox and blocks frontend submission until it is checked.

Task description · Figma node 91-774

Related PRs

None. Frontend only; no backend, API payload, database, email or CAPTCHA changes.

Main changes

• Add an initially unchecked, required terms checkbox immediately above Submit, linking to the existing organization policy in a separate tab.
• Disable Submit without agreement and independently guard the submit handler, with an inline error and focus returned to the checkbox.
• Reset agreement after success and preserve entered data/agreement after a failed request so applicants can retry.
• Add scoped mobile/dark-mode styles and visible keyboard focus.
• Add eight component tests without changing other form validation or upload behavior.

How to test

1. Check out this branch, use Node 20 and the existing project dependencies, then start the frontend with npm run start:skip-tests.
2. Open /job-application, choose a role and scroll to the bottom. No login is required for the public form.
3. Confirm the terms checkbox is immediately above Submit, initially unchecked, and Submit is disabled.
4. Check and uncheck the box with the mouse and Space. Confirm Submit follows agreement state. Tab should reach the underlined terms link with a visible focus outline.
5. Open the terms link separately; it should point to the organization’s Terms and Conditions page without changing the form or checkbox.
6. Check mobile widths and both themes. The label should wrap without pushing the checkbox or Submit outside the form.
7. Run the committed mocked component tests:

   npx vitest run src/components/Collaboration/__tests__/JobApplicationForm.terms.test.jsx

   These cover rejected unchecked submission, existing required-field validation, successful reset, failed-request preservation/retry readiness and disabled submission while a request is pending. Use an isolated/mocked backend for manual submit tests; do not send test applications to shared development.

Validation

CI follow-up — October 26, 2026

At commit 3e50f3a9ea, updated the branch with development 252a015a6c and made duplicate-submission test fixtures check the required terms box before submitting. This also brings in development's stable-clock fix for the Activity List test. Required consent behavior is preserved.

• Full source suite: 2,653 passed, 14 skipped, zero failures.
• Collaboration and Activity List tests: 142 passed.
• Production build: passed in 1m 4s.
• Repository-wide JavaScript lint: zero errors, 174 warnings. Affected JS: zero errors, three existing console warnings. Changed CSS lint and PR-specific whitespace checks pass.
• Isolated tests used mocked HTTP and a network-write guard; no shared database writes or real applications.

All three GitHub test jobs, Sonar Quality Gate and the Netlify preview passed on this commit. The browser evidence below was recorded during earlier feature validation; no new UI behavior was added in this CI follow-up.

Earlier feature validation

Validation repeated after rebasing the single task commit onto development 850e10973a:

• Full frontend suite: 2,472 passed, 14 skipped, 0 failed across 360 test files, including all eight new task tests.
• Production build: passed in 54.94 seconds (existing large-chunk warning).
• Changed JavaScript/tests: 0 lint errors, three existing console warnings. Changed CSS lint and whitespace checks pass.
• Before the rebase, all 2,007 tracked JavaScript/JSX files plus the new test had 0 errors and 177 warnings; this broader lint result is not represented as a fresh post-rebase run.

Additional isolated Chromium checks cover 34 expanded scenarios (eight widths, both themes, anonymous/Owner users, plus Administrator CSS 200% zoom), nine responsive/retry scenarios and two new-tab controls. Sixty-six scoped axe scans cover the new checkbox, label, hint/error and Submit controls. Requests are mocked and external browser traffic blocked. The public terms URL was independently HEAD-checked (HTTP 200).

Screenshots or videos

Nine code/UI screenshots and a short captioned development walkthrough are prepared locally for the weekly submission. They are not attached to this PR yet; no local file paths are being presented as uploaded media.

Notes and testing limits

• This is frontend acknowledgement gating, not server-side consent enforcement or a stored consent audit trail.
• No real applications, confirmation emails or shared database writes were made during validation.
• Chromium/mocked API validation only; Safari, Firefox, real devices and live-backend E2E are not verified. The embedded task-document design screenshot was inspected; a pixel-perfect comparison with the live Figma file is not claimed.
• Repository-wide CSS lint has existing errors in unchanged stylesheets. The changed stylesheet passes. Broad npm run lint also scans ignored local review fixtures that are not included in this PR; tracked JavaScript was checked separately.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	3e50f3a
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6adf0d3c28ddadf77c2862f3
😎 Deploy Preview	https://deploy-preview-5651--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[AlekyaJogini]

Reviewed by Alekya.

How I tested
Checked out the PR branch on Node 20.19.4 with the backend running on development. Ran the new test file: npx vitest run src/components/Collaboration/tests/JobApplicationForm.terms.test.jsx. Tested /job-application logged out in dark mode and logged in as Admin in light mode, at desktop width and at 320px and 375px in Chrome device mode. Kept the Network tab open and did not submit a real application.

Verified working

• All 8 tests in JobApplicationForm.terms.test.jsx pass.
• The "I agree to terms and conditions" checkbox sits right above Submit and starts unchecked. While it is unchecked Submit is greyed out and clicking it does nothing.

• With the box checked and fields empty Submit is enabled and the existing "Please fill out this field." validation still shows.

• Space toggles the checkbox and Submit follows the state.
• Tab reaches the terms link and shows a visible focus outline.

• The link opens onecommunityglobal.org/terms-and-conditions/ in a new tab and the form keeps its state.

• At 320px the label and hint wrap and the checkbox and Submit stay inside the form card. At 375px everything fits on one line.

• Readable in dark mode and light mode.

Issues found
None

[snehitakandula]

Reviewed on this PR's branch (pr-5651) at commit d811245, frontend only, with backend on development. Tested /job-application as Admin and as Volunteer, in light and dark mode. I didn't submit a real application.

1. Tests: 8/8 passing
   npx vitest run src/components/Collaboration/__tests__/JobApplicationForm.terms.test.jsx passes all 8 tests, including keeping the agreement after an API failure and keeping Submit disabled while a submission is in flight.

2. Checkbox behavior

   • The "I agree to terms and conditions" checkbox appears above Submit, unchecked, with the hint "Required before submitting your application." Submit is greyed out.
   • Checking the box enables Submit, and unchecking it disables Submit again.

3. Volunteer role: logged in as a Volunteer, the checkbox shows and works the same way.

4. Dark mode: the label, terms link, and hint are readable, and Submit is visibly disabled until the box is checked.

These add the uncheck and Volunteer cases to @AlekyaJogini's checks.

Screenshots:

Tests passing (8/8):

Light mode, unchecked (Submit disabled):

Dark mode, unchecked (Submit disabled):

Approving.

[rahulrubugunday]

Tested locally on pr-5651 at d811245 as Admin on /job-application, in light and dark mode. Branch merges cleanly with development.

“I agree to terms and conditions *” appears directly above Submit, unchecked by default, with the hint “Required before submitting your application.”
Submit your application is disabled while the box is unchecked, becomes enabled when checked, and is disabled again when unchecked.
The “terms and conditions” link points to https://onecommunityglobal.org/terms-and-conditions/ and opens in a new tab.
The checkbox, label, link and disabled/enabled button are readable in both light and dark mode.

[AaditTrivedi]

Reviewed by Aadit Trivedi.

Checked out the PR (no conflicts with development) and ran JobApplicationForm.terms.test.jsx: 8/8 passing.

Verified

• The job application form now requires agreeing to the terms and conditions: submitting without the checkbox shows "Please agree to the terms and conditions before submitting." and moves focus to the checkbox.
• The checkbox is accessible: it has a matching label, aria-invalid reflects the error, and aria-describedby points to the hint or error text. The form also has aria-label="Job application".
• The checkbox and error reset when the form resets.

Pointer, not blocking

• #5653 also changes JobApplicationForm.jsx and currently has conflicts, so whichever merges second will need to resolve them.

Approving.

[iAbhi001]

Tested locally on pr-5651 at d811245 frontend-only with backend on development on /job-application in both light and dark mode. All 8 tests in the terms test suite pass, the mandatory terms checkbox renders properly right above Submit, and the submit button stays disabled until the box is checked. Keyboard focus, external link routing to the policy page in a new tab, and mobile responsive behavior all look solid. However, requesting changes because GitHub is reporting a merge conflict with development in JobApplicationForm.module.css. Please rebase onto the latest development branch and resolve the conflict so this can be merged.

[shubhamjakhete]

Checked out the PR at d4f4112 and ran the tests (frontend only, no UI testing).

• Branch merges cleanly with the latest development, so the earlier merge conflict is resolved.
• JobApplicationForm.terms.test.jsx: 10/10 passing (the dark/light mode cases run twice, so Vitest counts 10 instead of 8).
• All tests in src/components/Collaboration still pass (110/110).

Approving.

[muthapriyanka]

I reviewed the changes for PR #5651. The required terms checkbox is placed before Submit, prevents submission when unchecked, and resets after a successful submission while preserving the applicant’s entries after a failed request. The focused tests cover these behaviors. I found no blocking issues and approve the PR.

[adit24dhaya]

Fixed the CI failures in 3e50f3a9ea. I updated the branch from development, which includes the stable Activity List test clock, and made the duplicate-submission tests check the required terms box before submitting.

All 2,653 source tests pass (14 skipped), including both previously failing submission tests. Build and repository-wide lint pass with zero lint errors. The consent requirement is unchanged. All three GitHub test jobs, Sonar Quality Gate and the preview build now pass.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud