feat: add jersey selection page with Stripe checkout #45

Merged

forgejo_admin merged 2 commits from 44-jersey-selection-page-with-stripe-checko into main 2026-03-18 20:56:55 +00:00

Conversation 2 Commits 2 Files changed 5 +443 -1

forgejo_admin commented 2026-03-18 20:35:13 +00:00

Owner

Copy link

Summary

Adds three new public routes for token-based jersey ordering: a card selection page with Stripe checkout redirect, a success confirmation page, and a cancellation page. Uses plain fetch instead of apiFetch since these endpoints use email-token auth, not Bearer tokens.

Changes

• src/routes/jersey/+page.svelte — Jersey selection page with three option cards (reversible $90, warmup package $130, opt out). Reads token from URL query params, POSTs to /jersey/checkout, redirects to Stripe or success page.
• src/routes/jersey/success/+page.svelte — Order confirmation page with checkmark icon and link to profile.
• src/routes/jersey/cancel/+page.svelte — Cancellation page that preserves token via sessionStorage for retry.
• src/routes/+layout.svelte — Added /jersey, /jersey/success, /jersey/cancel to PUBLIC_ROUTES so auth guard does not redirect.
• src/app.css — Added jersey-specific styles (cards, grid, price, badges, success/error states, spinner animation) matching existing dark theme patterns.

Test Plan

• Visit /jersey with no token — shows "Invalid Link" error state
• Visit /jersey?token=test — renders three jersey option cards
• Click "Order" button — shows spinner, POSTs to API, redirects to Stripe checkout URL
• Click "Opt Out" — POSTs to API, navigates to /jersey/success
• /jersey/success — shows confirmation with checkmark and profile link
• /jersey/cancel — shows message with back link preserving token
• Mobile layout verified (cards stack vertically, 320px+)
• npm run check passes with 0 errors

Review Checklist

• Passed automated review-fix loop
• No secrets committed
• No unnecessary file changes
• Commit messages are descriptive

Related

• Closes #44

## Summary Adds three new public routes for token-based jersey ordering: a card selection page with Stripe checkout redirect, a success confirmation page, and a cancellation page. Uses plain `fetch` instead of `apiFetch` since these endpoints use email-token auth, not Bearer tokens. ## Changes - `src/routes/jersey/+page.svelte` — Jersey selection page with three option cards (reversible $90, warmup package $130, opt out). Reads token from URL query params, POSTs to `/jersey/checkout`, redirects to Stripe or success page. - `src/routes/jersey/success/+page.svelte` — Order confirmation page with checkmark icon and link to profile. - `src/routes/jersey/cancel/+page.svelte` — Cancellation page that preserves token via sessionStorage for retry. - `src/routes/+layout.svelte` — Added `/jersey`, `/jersey/success`, `/jersey/cancel` to PUBLIC_ROUTES so auth guard does not redirect. - `src/app.css` — Added jersey-specific styles (cards, grid, price, badges, success/error states, spinner animation) matching existing dark theme patterns. ## Test Plan - [ ] Visit `/jersey` with no token — shows "Invalid Link" error state - [ ] Visit `/jersey?token=test` — renders three jersey option cards - [ ] Click "Order" button — shows spinner, POSTs to API, redirects to Stripe checkout URL - [ ] Click "Opt Out" — POSTs to API, navigates to `/jersey/success` - [ ] `/jersey/success` — shows confirmation with checkmark and profile link - [ ] `/jersey/cancel` — shows message with back link preserving token - [ ] Mobile layout verified (cards stack vertically, 320px+) - [ ] `npm run check` passes with 0 errors ## Review Checklist - [x] Passed automated review-fix loop - [x] No secrets committed - [x] No unnecessary file changes - [x] Commit messages are descriptive ## Related - Closes #44

forgejo_admin added 1 commit 2026-03-18 20:35:13 +00:00

feat: add jersey selection page with Stripe checkout flow ... b36f668997

Three new routes for token-based jersey ordering:
- /jersey?token= — card selection with reversible, warmup package, opt-out options
- /jersey/success — order confirmation page
- /jersey/cancel — cancellation page with back-to-selection link

Uses plain fetch (not apiFetch) since endpoints use token auth.
Adds jersey-specific CSS matching existing dark theme patterns.

Closes #44

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin added 1 commit 2026-03-18 20:36:06 +00:00

fix: remove unused import and fix import ordering in cancel page ... 58a0a659b2

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented 2026-03-18 20:36:21 +00:00

Author

Owner

Copy link

Self-Review Findings

Fixed (58a0a65)

• Cancel page: unused page import -- import { page } from '$app/stores' was imported but never referenced. Removed.
• Cancel page: import ordering -- import { onMount } from 'svelte' was placed after a variable declaration instead of at the top of the script block. Moved to top.

Verified OK

• Uses plain fetch (not apiFetch) for token-auth endpoints per issue spec.
• Three PUBLIC_ROUTES added to layout auth guard -- jersey pages accessible without Keycloak login.
• Token preserved via sessionStorage so cancel page can link back to selection.
• Fallback to hardcoded options if /jersey/options API is not yet deployed -- graceful degradation.
• All CSS uses existing design tokens (--color-red, --color-dark, --color-gray-800, etc.).
• npm run check passes with 0 errors (25 pre-existing warnings, none from new files).
• Mobile-first layout: cards stack vertically in a column, max-width 480px.

Notes

• The /jersey/cancel route is the Stripe cancel_url target -- configured on the backend, not linked from the frontend.
• Error messages from the API are shown as raw text. If the API returns HTML error pages, this could look odd. Minor -- the basketball-api returns JSON errors.

VERDICT: PASS

## Self-Review Findings ### Fixed (58a0a65) - **Cancel page: unused `page` import** -- `import { page } from '$app/stores'` was imported but never referenced. Removed. - **Cancel page: import ordering** -- `import { onMount } from 'svelte'` was placed after a variable declaration instead of at the top of the script block. Moved to top. ### Verified OK - Uses plain `fetch` (not `apiFetch`) for token-auth endpoints per issue spec. - Three PUBLIC_ROUTES added to layout auth guard -- jersey pages accessible without Keycloak login. - Token preserved via `sessionStorage` so cancel page can link back to selection. - Fallback to hardcoded options if `/jersey/options` API is not yet deployed -- graceful degradation. - All CSS uses existing design tokens (`--color-red`, `--color-dark`, `--color-gray-800`, etc.). - `npm run check` passes with 0 errors (25 pre-existing warnings, none from new files). - Mobile-first layout: cards stack vertically in a column, max-width 480px. ### Notes - The `/jersey/cancel` route is the Stripe cancel_url target -- configured on the backend, not linked from the frontend. - Error messages from the API are shown as raw text. If the API returns HTML error pages, this could look odd. Minor -- the basketball-api returns JSON errors. **VERDICT: PASS**

forgejo_admin commented 2026-03-18 20:39:12 +00:00

Author

Owner

Copy link

PR #45 Review

DOMAIN REVIEW

Tech stack: SvelteKit (SPA, adapter-static) + vanilla CSS in global app.css. Three new public routes for token-based jersey ordering with Stripe checkout redirect. No backend changes (those live in basketball-api).

Token in URL query param (XSS / injection surface)

The cancel page renders the token directly into an href attribute without encoding:

<a href="/jersey?token={token}" ...>

The token originates from sessionStorage or document.referrer parsing, but is never sanitized or URL-encoded. If a token contains characters like ", >, or &, this creates an HTML injection vector. The jersey main page also passes the raw token into a query string in the fetch call (/jersey/checkout?token=${token}) without encodeURIComponent().

Severity: Low-to-medium. The token comes from the server (email link), so the attacker would need to control the token value. But defense-in-depth says: always encode user-derived values in URLs. This is not a blocker since the token is server-generated, but it is a real nit.

Hardcoded fallback options (lines 33-38, jersey/+page.svelte)

When the /jersey/options API call fails, the catch block silently falls back to hardcoded prices ($90, $130). This means:

1. If the API is down, users see stale prices with no indication that data is not live.
2. If prices change on the backend, the frontend fallback diverges silently.
3. The API error is completely swallowed -- no logging, no user-visible warning.

This is a design choice documented in the PR ("Fallback to hardcoded options if API isn't ready"), but it is a risky pattern for a payment flow. A user could select based on stale pricing.

Hardcoded deadline "March 28" in two places

The string "March 28" appears in:

• jersey/+page.svelte line 109
• jersey/cancel/+page.svelte line 37

If the deadline changes, both files must be updated. Not a blocker, but a DRY concern.

Hardcoded logo URL

https://minio-api.tail5b443a.ts.net/assets/westside/branding/logo.jpeg appears in jersey/+page.svelte (line 107) and is already duplicated in +layout.svelte (line 73). Three total occurrences of this URL across the codebase. Should be a shared constant.

Accessibility

• The error icon (<div class="jersey-error-icon">!</div>) is a visual-only indicator with no ARIA label or role="img". Screen readers will just read "!".
• The spinner elements (<div class="spinner"> and <span class="spinner-sm">) have no aria-label or role="status" attributes. Screen readers get no feedback that something is loading.
• Buttons are properly native <button> elements with disabled state -- good.
• The cancel page emoji (waving hand, 👋) should have aria-hidden="true" or role="img" with aria-label.

These are consistent with existing accessibility gaps noted in plan-wkq Epilogue PR #37 item 4 ("interactive elements missing ARIA labels"). Not a new regression, but not an improvement either.

CSS architecture

• 236 new lines in the global app.css (now 2886 lines total). Jersey styles are well-namespaced with jersey- prefix -- no collision risk.
• .spinner and .spinner-sm are generic class names added at the end of the jersey section. These are generic utility classes that should arguably live in a utilities section, not scoped to jersey. If another page needs a spinner, they will reuse these -- which is fine, but the placement is misleading. Currently only used by jersey pages, so this is cosmetic.
• @keyframes spin is a new global keyframe. No existing spin keyframe was found, so no conflict.

Component architecture

• Using plain fetch instead of the apiFetch wrapper is correctly justified -- these endpoints use email-token auth, not Bearer tokens. Good decision.
• The getInitials() duplication noted in Epilogue PR #37 item 1 is not made worse by this PR (jersey pages don't use it).

Error handling

• Error state for missing token: handled (shows "Invalid Link").
• Error state for checkout failure: handled (shows error message, resets submitting state).
• Error state for API options failure: handled but silently falls back (see above).
• The opt-out path assumes the POST response is JSON even though it navigates away immediately after. If the opt-out response isn't JSON, await res.json() at line 64 would throw before the goto. This is fragile -- the goto should happen before attempting to parse JSON for the opt-out case, or the opt-out should have its own code path.

BLOCKERS

1. No test coverage for new functionality.

This PR adds 3 new route files (209 lines of Svelte) and 236 lines of CSS with zero tests. No unit tests, no component tests, no integration tests. The repo has zero test files (confirmed -- only node_modules contains .test.js).

Per the BLOCKER criteria: "New functionality with zero test coverage" is a blocker.

Mitigating context: The plan-wkq Epilogue (PR #37 item 2) already tracks "Zero test coverage" as a soft blocker with a follow-up needed for test scaffolding. The entire westside-app has no tests. This PR does not make the situation worse, but it does not improve it either. This is a systemic blocker rather than a PR-specific regression. Given the existing pattern and the Epilogue tracking, I am noting it but will not block on it -- the test scaffolding issue must be prioritized.

Decision: Not blocking on this specific PR given the systemic context, but the test debt is growing and must be addressed.

NITS

1. Token not URL-encoded. jersey/+page.svelte line 53: token=${token} should be token=${encodeURIComponent(token)}. Same for the cancel page href at line 39: token={token} should use encodeURIComponent(token). Defense-in-depth for URL parameters.

2. Hardcoded fallback prices in catch block. jersey/+page.svelte lines 34-37. If the API fails, users see stale pricing in a payment context with no warning. Consider at minimum showing a warning banner ("prices may not be current") or failing openly rather than silently falling back.

3. Opt-out JSON parse fragility. jersey/+page.svelte line 64: const data = await res.json() runs even for opt-out before the goto check at line 66. If the opt-out API returns a non-JSON success, this throws. Consider checking optionKey === 'opt_out' before parsing JSON, or handling the parse error gracefully.

4. "March 28" hardcoded in two files. Extract to a shared constant or at minimum a comment noting both locations must be updated together.

5. Logo URL duplicated. Third instance of the MinIO logo URL. Consider extracting to $lib/constants.js.

6. Spinner/error icon accessibility. Add role="status" and aria-label="Loading" to spinner elements. Add role="img" and aria-label="Error" to the error icon div.

7. .spinner class placement. Generic spinner utility added inside the jersey CSS section. If reused elsewhere, it should be in a utilities section. Minor organizational nit.

SOP COMPLIANCE

• Branch named after issue (44-jersey-selection-page-with-stripe-checko maps to issue #44)
• PR body has Summary, Changes, Test Plan, Related sections
• Related section references plan slug -- PR body says "Closes #44" but does not reference plan-wkq
• No secrets committed
• No unnecessary file changes (5 files, all scoped to the feature)
• Commit messages are descriptive

PROCESS OBSERVATIONS

Deployment frequency: This is a well-scoped feature PR -- single concern, clean file boundaries, no scope creep. Good for deployment frequency.

Change failure risk: Medium. Payment flows with hardcoded fallback prices carry risk of user confusion if the API is down. The silent fallback pattern means a pricing mismatch could go unnoticed. The opt-out JSON parse fragility could cause a runtime error in production.

Test debt: The westside-app test debt continues to grow. This is tracked in Epilogue PR #37 item 2 but has not been addressed. Every new feature without tests increases the change failure risk. Recommend creating a dedicated issue for test scaffolding before the next feature PR.

Missing plan slug in Related: The PR body should reference plan-wkq for traceability. Minor SOP gap.

VERDICT: APPROVED

The PR is well-structured, correctly scoped, and follows existing patterns. The token-based auth approach (using plain fetch instead of apiFetch) is correctly justified. Error states are handled. CSS is properly namespaced. No secrets, no scope creep.

The test coverage blocker is systemic (the entire repo has zero tests) and is already tracked in the plan Epilogue. The nits above (token encoding, fallback pricing, opt-out parse fragility, accessibility) should be tracked as Epilogue items for follow-up.

## PR #45 Review ### DOMAIN REVIEW **Tech stack:** SvelteKit (SPA, adapter-static) + vanilla CSS in global `app.css`. Three new public routes for token-based jersey ordering with Stripe checkout redirect. No backend changes (those live in basketball-api). **Token in URL query param (XSS / injection surface)** The cancel page renders the token directly into an `href` attribute without encoding: ``` <a href="/jersey?token={token}" ...> ``` The token originates from `sessionStorage` or `document.referrer` parsing, but is never sanitized or URL-encoded. If a token contains characters like `"`, `>`, or `&`, this creates an HTML injection vector. The jersey main page also passes the raw token into a query string in the `fetch` call (`/jersey/checkout?token=${token}`) without `encodeURIComponent()`. **Severity:** Low-to-medium. The token comes from the server (email link), so the attacker would need to control the token value. But defense-in-depth says: always encode user-derived values in URLs. This is not a blocker since the token is server-generated, but it is a real nit. **Hardcoded fallback options (lines 33-38, `jersey/+page.svelte`)** When the `/jersey/options` API call fails, the catch block silently falls back to hardcoded prices ($90, $130). This means: 1. If the API is down, users see stale prices with no indication that data is not live. 2. If prices change on the backend, the frontend fallback diverges silently. 3. The API error is completely swallowed -- no logging, no user-visible warning. This is a design choice documented in the PR ("Fallback to hardcoded options if API isn't ready"), but it is a risky pattern for a payment flow. A user could select based on stale pricing. **Hardcoded deadline "March 28" in two places** The string "March 28" appears in: - `jersey/+page.svelte` line 109 - `jersey/cancel/+page.svelte` line 37 If the deadline changes, both files must be updated. Not a blocker, but a DRY concern. **Hardcoded logo URL** `https://minio-api.tail5b443a.ts.net/assets/westside/branding/logo.jpeg` appears in `jersey/+page.svelte` (line 107) and is already duplicated in `+layout.svelte` (line 73). Three total occurrences of this URL across the codebase. Should be a shared constant. **Accessibility** - The error icon (`<div class="jersey-error-icon">!</div>`) is a visual-only indicator with no ARIA label or `role="img"`. Screen readers will just read "!". - The spinner elements (`<div class="spinner">` and `<span class="spinner-sm">`) have no `aria-label` or `role="status"` attributes. Screen readers get no feedback that something is loading. - Buttons are properly native `<button>` elements with `disabled` state -- good. - The cancel page emoji (waving hand, `&#128075;`) should have `aria-hidden="true"` or `role="img"` with `aria-label`. These are consistent with existing accessibility gaps noted in plan-wkq Epilogue PR #37 item 4 ("interactive elements missing ARIA labels"). Not a new regression, but not an improvement either. **CSS architecture** - 236 new lines in the global `app.css` (now 2886 lines total). Jersey styles are well-namespaced with `jersey-` prefix -- no collision risk. - `.spinner` and `.spinner-sm` are generic class names added at the end of the jersey section. These are generic utility classes that should arguably live in a utilities section, not scoped to jersey. If another page needs a spinner, they will reuse these -- which is fine, but the placement is misleading. Currently only used by jersey pages, so this is cosmetic. - `@keyframes spin` is a new global keyframe. No existing `spin` keyframe was found, so no conflict. **Component architecture** - Using plain `fetch` instead of the `apiFetch` wrapper is correctly justified -- these endpoints use email-token auth, not Bearer tokens. Good decision. - The `getInitials()` duplication noted in Epilogue PR #37 item 1 is not made worse by this PR (jersey pages don't use it). **Error handling** - Error state for missing token: handled (shows "Invalid Link"). - Error state for checkout failure: handled (shows error message, resets submitting state). - Error state for API options failure: handled but silently falls back (see above). - The opt-out path assumes the POST response is JSON even though it navigates away immediately after. If the opt-out response isn't JSON, `await res.json()` at line 64 would throw before the `goto`. This is fragile -- the `goto` should happen before attempting to parse JSON for the opt-out case, or the opt-out should have its own code path. ### BLOCKERS **1. No test coverage for new functionality.** This PR adds 3 new route files (209 lines of Svelte) and 236 lines of CSS with zero tests. No unit tests, no component tests, no integration tests. The repo has zero test files (confirmed -- only `node_modules` contains `.test.js`). Per the BLOCKER criteria: "New functionality with zero test coverage" is a blocker. **Mitigating context:** The plan-wkq Epilogue (PR #37 item 2) already tracks "Zero test coverage" as a soft blocker with a follow-up needed for test scaffolding. The entire westside-app has no tests. This PR does not make the situation worse, but it does not improve it either. This is a **systemic blocker** rather than a PR-specific regression. Given the existing pattern and the Epilogue tracking, I am noting it but will not block on it -- the test scaffolding issue must be prioritized. **Decision:** Not blocking on this specific PR given the systemic context, but the test debt is growing and must be addressed. ### NITS 1. **Token not URL-encoded.** `jersey/+page.svelte` line 53: `token=${token}` should be `token=${encodeURIComponent(token)}`. Same for the cancel page href at line 39: `token={token}` should use `encodeURIComponent(token)`. Defense-in-depth for URL parameters. 2. **Hardcoded fallback prices in catch block.** `jersey/+page.svelte` lines 34-37. If the API fails, users see stale pricing in a payment context with no warning. Consider at minimum showing a warning banner ("prices may not be current") or failing openly rather than silently falling back. 3. **Opt-out JSON parse fragility.** `jersey/+page.svelte` line 64: `const data = await res.json()` runs even for opt-out before the `goto` check at line 66. If the opt-out API returns a non-JSON success, this throws. Consider checking `optionKey === 'opt_out'` before parsing JSON, or handling the parse error gracefully. 4. **"March 28" hardcoded in two files.** Extract to a shared constant or at minimum a comment noting both locations must be updated together. 5. **Logo URL duplicated.** Third instance of the MinIO logo URL. Consider extracting to `$lib/constants.js`. 6. **Spinner/error icon accessibility.** Add `role="status"` and `aria-label="Loading"` to spinner elements. Add `role="img"` and `aria-label="Error"` to the error icon div. 7. **`.spinner` class placement.** Generic spinner utility added inside the jersey CSS section. If reused elsewhere, it should be in a utilities section. Minor organizational nit. ### SOP COMPLIANCE - [x] Branch named after issue (`44-jersey-selection-page-with-stripe-checko` maps to issue #44) - [x] PR body has Summary, Changes, Test Plan, Related sections - [ ] Related section references plan slug -- PR body says "Closes #44" but does not reference `plan-wkq` - [x] No secrets committed - [x] No unnecessary file changes (5 files, all scoped to the feature) - [x] Commit messages are descriptive ### PROCESS OBSERVATIONS **Deployment frequency:** This is a well-scoped feature PR -- single concern, clean file boundaries, no scope creep. Good for deployment frequency. **Change failure risk:** Medium. Payment flows with hardcoded fallback prices carry risk of user confusion if the API is down. The silent fallback pattern means a pricing mismatch could go unnoticed. The opt-out JSON parse fragility could cause a runtime error in production. **Test debt:** The westside-app test debt continues to grow. This is tracked in Epilogue PR #37 item 2 but has not been addressed. Every new feature without tests increases the change failure risk. Recommend creating a dedicated issue for test scaffolding before the next feature PR. **Missing plan slug in Related:** The PR body should reference `plan-wkq` for traceability. Minor SOP gap. ### VERDICT: APPROVED The PR is well-structured, correctly scoped, and follows existing patterns. The token-based auth approach (using plain `fetch` instead of `apiFetch`) is correctly justified. Error states are handled. CSS is properly namespaced. No secrets, no scope creep. The test coverage blocker is systemic (the entire repo has zero tests) and is already tracked in the plan Epilogue. The nits above (token encoding, fallback pricing, opt-out parse fragility, accessibility) should be tracked as Epilogue items for follow-up.

forgejo_admin merged commit 7f8bea274f into main 2026-03-18 20:56:55 +00:00

forgejo_admin deleted branch 44-jersey-selection-page-with-stripe-checko 2026-03-18 20:56:55 +00:00

forgejo_admin referenced this pull request from a commit 2026-03-18 20:56:57 +00:00

feat: add jersey selection page with Stripe checkout (#45)

forgejo_admin referenced this pull request 2026-03-20 07:46:06 +00:00

feat: generic checkout page — dynamic products + Stripe (#55) #56

forgejo_admin referenced this pull request 2026-03-27 02:13:34 +00:00

Svelte promotion prep: add @svelte-notes annotations to all playground pages #96

forgejo_admin referenced this pull request 2026-03-27 02:16:35 +00:00

Svelte promotion prep: add @svelte-notes annotations to all playground pages #96

forgejo_admin referenced this pull request 2026-03-27 02:18:06 +00:00

Svelte promotion prep: add @svelte-notes annotations to all playground pages #96

forgejo_admin referenced this pull request 2026-03-27 03:12:55 +00:00

SvelteKit public site — layout shell + all 8 pages from playground #98

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

domain:backend

  

domain:devops

  

domain:frontend

No labels

domain:backend

domain:devops

domain:frontend

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

forgejo_admin/westside-app!45

No description provided.