Skip to content

Add viewer engagement rewards frontend experience - #319

Open
ercmine wants to merge 1 commit into
mainfrom
codex/build-frontend-experience-for-engagement-rewards
Open

Add viewer engagement rewards frontend experience#319
ercmine wants to merge 1 commit into
mainfrom
codex/build-frontend-experience-for-engagement-rewards

Conversation

@ercmine

@ercmine ercmine commented Mar 26, 2026

Copy link
Copy Markdown
Owner

Motivation

  • Expose the backend viewer-engagement rewards system to users in a cohesive, premium UI so viewers clearly understand how to earn Perbug for watching, rating, and commenting.
  • Surface campaign/sponsor funding, eligibility, progress, and anti-abuse outcomes so rewards feel fair, transparent, and not spammy.
  • Provide a centralized viewer earnings area (dashboard + history + notifications) to make engagement rewards discoverable and trackable across the product.

Description

  • Add typed frontend reward domain models and API client so the UI is wired to backend reward endpoints and the backend remains the source of truth (web/src/lib/viewer-rewards/types.ts, web/src/lib/viewer-rewards/api.ts).
  • Implement a client-side React experience that unifies reward-aware feed, player state (watch progress + milestones), rating/comment flows, anti-abuse messaging, sponsored labels, inline toasts, notifications, earnings dashboard, and history (web/src/components/viewer-rewards/ViewerEngagementRewardsExperience.tsx).
  • Add a dedicated route/page to surface the experience at /viewer/engagement-rewards and initialize the component client-side (web/src/pages/viewer/engagement-rewards.astro).
  • Add testing infra and tests: Vitest + Testing Library setup, config and a component test that covers rendering, reward chips, watch-progress messaging, gating of rating, comment reward messaging, denied-history, and watch-state transitions (web/vitest.config.ts, web/src/test/setup.ts, web/src/components/viewer-rewards/ViewerEngagementRewardsExperience.test.tsx).
  • Update package/dev dependencies to include test tools and type packages required by the tests (web/package.json, web/pnpm-lock.yaml).

Testing

  • Ran the component test suite with cd web && pnpm test, which executed the new Vitest tests and all tests passed (4 tests, component behavior and state transitions verified).
  • Installed test/dev deps with cd web && pnpm install as part of wiring the test environment and dependency lockfile was updated successfully.
  • Ran cd web && pnpm check (Astro/TypeScript check) which surfaced preexisting repo-wide TypeScript/Astro issues; these are baseline type diagnostics unrelated to the new reward UI and did not block the test pass.

Codex Task

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e3d6bed998

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".


export const viewerRewardsApi = {
getFeed(userId: string) {
return request<ViewerRewardFeedResponse>('/v1/viewer/rewards/feed', { userId });

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use the backend's video-engagement routes

The new client is wired to /v1/viewer/rewards/*, but the server in this repo registers viewer reward handlers under /v1/video-engagement/* (checked backend/src/server/routes.ts, e.g. the routes around lines 525-568). With the current paths, these calls return 404s, so the feed/summary/history and interaction updates never load in production.

Useful? React with 👍 / 👎.

VideoRewardEligibility
} from './types';

const apiBaseUrl = (import.meta.env.PERBUG_API_BASE_URL as string | undefined) ?? '';

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Read the configured public API base URL

This code reads import.meta.env.PERBUG_API_BASE_URL, but the web app configuration uses PUBLIC_PERBUG_API_BASE_URL (see web/.env.example and web/src/pages/creator/rewards.astro). As written, deployments that set only the documented public variable will ignore the configured API host and fall back to relative /v1/... requests, which breaks separated frontend/backend setups.

Useful? React with 👍 / 👎.

Comment on lines +218 to +220
const updateSelected = async (next: Promise<VideoRewardEligibility>, successMessage: string) => {
const result = await next;
setVideos((current) => current.map((video) => (video.videoId === result.videoId ? result : video)));

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Handle action request failures in updateSelected

updateSelected awaits next without error handling, and callers invoke it as void updateSelected(...); when an interaction request gets a non-2xx response, the promise rejection is unhandled and the user never sees the error banner set by load(). This makes rating/comment/watch actions fail silently for backend validation errors or transient network failures.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant