CROP
ProjectsCROP Frontend

Experimental Product Components

Location: Updated: 2025-11-07

Experimental Product Components

Location: components/_experimental/product/* Updated: 2025-11-07

Purpose

These components target the upcoming Universal Product Schema v3 rollout. They ship with the repo but are not wired into production yet. Keep them in the _experimental namespace until the catalog, detail pages, and APIs migrate to the v3 contract.

Available components

FileDescriptionNotes
product-badges.tsxRenders merchandising badges (Top seller, OEM, New, On sale).Pure presentational component; accepts product metadata and badge overrides.
product-media-indicators.tsxShows which media assets (hero, gallery, 360°) exist for a product.Hooks into the v3 ProductMediaIndicatorsProps type exported from types/product.ts.
product-availability.tsxStock status + ship window widget.Designed for InventoryAvailabilityV3—requires normalized availability summaries.
__test-components.tsxShowcase page used during visual QA.Safe to import into Storybook or /app/(design) if you need screenshots.

Usage pattern

import { ProductBadges } from "@/components/_experimental/product/product-badges";

<ProductBadges
  product={{
    sku: "991HS-KIT",
    badges: ["oem", "new"],
    availability: "ships_in_24h",
  }}
/>

Migration checklist

  1. Finish ingesting schema v3 into lib/db/parts-types.ts and the search service adapter layer.
  2. Replace legacy badge/availability UI in app/parts/[id] with these components.
  3. Move the files to components/product/ and drop the _experimental prefix.
  4. Delete this document once everything ships in production.

Questions? Ping the Frontend Platform crew in Slack (#crop-frontend).

On this page