Skip to content

feat(web): add Product Detail Page + authenticity verification#14

Merged
oreoluwa648 merged 1 commit into
oreoluwa648:mainfrom
rachealkenny:feature/Product-Detail-Page-and-Authenticity-UI
Apr 12, 2026
Merged

feat(web): add Product Detail Page + authenticity verification#14
oreoluwa648 merged 1 commit into
oreoluwa648:mainfrom
rachealkenny:feature/Product-Detail-Page-and-Authenticity-UI

Conversation

@rachealkenny
Copy link
Copy Markdown
Contributor

Pull Request: Product Detail Page + Authenticity UI

Branch: feature/Product-Detail-Page-and-Authenticity-UI
Related Issue: #7

Description

Implements the product detail page (PDP) for oreel-web with image gallery, variant selector, quantity picker, stock status, and add-to-cart functionality. Adds blockchain-based authenticity verification UI that calls a backend Stellar service endpoint (mocked for MVP) and displays verification status.

Changes Made

  • Product detail pageapp/(shop)/products/[slug]/page.tsx with dynamic route, generateStaticParams for SSG, image gallery, product info, description.
  • Client componentsAuthenticityVerifier, VariantSelector, QuantityPicker, AddToCartButton for modular PDP interactions.
  • Mock verification APIapp/api/products/[id]/verify/route.ts returns { verified, message, txHash } with simulated delay and product‑based mock logic.
  • Data extensionmock-products.ts now includes variants, images, stock, and authenticity metadata.

Verification

  • PDP shows image gallery, variants, price, stock status, quantity picker, add‑to‑cart.
  • Variant selection updates price and stock dynamically.
  • Authenticity button triggers verification; displays loading, success badge (with tx hash), or error.
  • Add‑to‑cart integrates with cart store (works regardless of verification status).
  • Edge cases handled: out‑of‑stock disables add‑to‑cart; missing authenticity data shows "Not Verified".

Closes #7

Add PDP at app/(shop)/products/[slug]/page.tsx (gallery, variants, quantity, add-to-cart).

Add client components: AuthenticityVerifier, VariantSelector, QuantityPicker, AddToCartButton.

Extend data/mock-products.ts with variants, images and stock.

Add mocked verification API at app/api/products/[id]/verify/route.ts.

Move PDP into (shop) route and remove duplicate top-level page.

Respect client/server boundaries and SSG via generateStaticParams.

Closes oreoluwa648#7
@oreoluwa648 oreoluwa648 merged commit df4fdc7 into oreoluwa648:main Apr 12, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Product Detail Page + Authenticity UI

2 participants