code/yieldomega

Watch

Fork 0

Referrals page: footer pill for browser-locked pending referral code #205

New issue

Closed

opened 2026-05-13 16:01:24 +00:00 by PlasticDigits · 3 comments

PlasticDigits commented

2026-05-13 16:01:24 +00:00

(Migrated from gitlab.com)

Summary

On /referrals, show in the footer a small pill that displays which referral code is locked in for this browser session when one exists; hide or show neutral copy when none.

Context

Pending referral capture (query ?ref=, path-based slugs, etc.) is persisted for UX and buy flows via yieldomega.ref.v1 in localStorage / sessionStorage, surfaced through getPendingReferralCode() in frontend/src/lib/referralStorage.ts.
The global app footer lives in frontend/src/layout/RootLayout.tsx (app-footer); today it is hidden only on exact /timecurve.

Acceptance criteria

When the user is on /referrals and getPendingReferralCode() returns a normalized code, the footer (or a referrals-scoped footer row consistent with existing layout) shows a compact pill (e.g. label + code) so participants can confirm what will apply on the next qualifying buy.
When there is no pending code, the pill is omitted or shows a minimal muted state (product choice); no layout jump that breaks WCAG/contrast patterns used elsewhere.
Pill updates if pending storage changes on the same tab (e.g. navigation with a new ?ref= after ReferralPathSync / capture runs) — consider storage event or subscribing to the same path the rest of the app uses for pending ref refresh.

Out of scope / notes

This is not the post-register yieldomega.myrefcode.v1.* cache; it is the pending referee capture only.
Keep copy aligned with existing referrals disclosures (GitLab #64, GitLab #85).

Suggested implementation sketch

Either conditional content in RootLayout when location.pathname === "/referrals", or a thin ReferralsFooterPendingPill mounted from ReferralsPage into a layout slot if the design system prefers page-owned chrome — match existing footer styling (footer-link-pill / design tokens in index.css).

Testing

Extend frontend/e2e/referrals-surface.spec.ts (or add a focused spec) to set yieldomega.ref.v1 before goto("/referrals") and assert the pill text; mirror R7 storage expectations from the existing checklist.

/cc @PlasticDigits/yieldomega

## Summary On `/referrals`, show in the **footer** a small **pill** that displays which referral code is **locked in** for this browser session when one exists; hide or show neutral copy when none. ## Context - Pending referral capture (query `?ref=`, path-based slugs, etc.) is persisted for UX and buy flows via `yieldomega.ref.v1` in `localStorage` / `sessionStorage`, surfaced through `getPendingReferralCode()` in `frontend/src/lib/referralStorage.ts`. - The global app footer lives in `frontend/src/layout/RootLayout.tsx` (`app-footer`); today it is hidden only on exact `/timecurve`. ## Acceptance criteria - When the user is on **`/referrals`** and `getPendingReferralCode()` returns a normalized code, the footer (or a referrals-scoped footer row consistent with existing layout) shows a **compact pill** (e.g. label + code) so participants can confirm what will apply on the next qualifying buy. - When there is **no** pending code, the pill is omitted or shows a minimal muted state (product choice); no layout jump that breaks WCAG/contrast patterns used elsewhere. - Pill updates if pending storage changes on the same tab (e.g. navigation with a new `?ref=` after `ReferralPathSync` / capture runs) — consider `storage` event or subscribing to the same path the rest of the app uses for pending ref refresh. ## Out of scope / notes - This is **not** the post-register `yieldomega.myrefcode.v1.*` cache; it is the **pending referee** capture only. - Keep copy aligned with existing referrals disclosures ([GitLab #64](https://gitlab.com/PlasticDigits/yieldomega/-/issues/64), [GitLab #85](https://gitlab.com/PlasticDigits/yieldomega/-/issues/85)). ## Suggested implementation sketch - Either conditional content in `RootLayout` when `location.pathname === "/referrals"`, or a thin `ReferralsFooterPendingPill` mounted from `ReferralsPage` into a layout slot if the design system prefers page-owned chrome — match existing footer styling (`footer-link-pill` / design tokens in `index.css`). ## Testing - Extend `frontend/e2e/referrals-surface.spec.ts` (or add a focused spec) to set `yieldomega.ref.v1` before `goto("/referrals")` and assert the pill text; mirror R7 storage expectations from the existing checklist. /cc @PlasticDigits/yieldomega

Brouie commented

2026-05-14 07:59:51 +00:00

(Migrated from gitlab.com)

mentioned in commit 741d7c5feb

mentioned in commit 741d7c5febbdd659636095d47a5fadc6a924ae80

Brouie commented

2026-05-14 08:00:24 +00:00

(Migrated from gitlab.com)

mentioned in merge request !388

PlasticDigits commented

2026-05-14 13:40:50 +00:00

(Migrated from gitlab.com)

mentioned in commit 316930c44b

mentioned in commit 316930c44b35abd3239ec6bbdb6782e3d6efa661

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-14 13:40:51 +00:00

No milestone

No project

No assignees

1 participant

Notifications

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

code/yieldomega#205

No description provided.

Rows
Columns