Price Display Component

Free — GPL coresize Splanned, not built

Generated from docs/plan/core/price-display-component/PLAN.md in the AstroBaaS repository. Nothing described below is implemented — it is the written plan for it.

A core free component library that renders prices with sales/promotions visibly: list price struck through, sale price in bold. Storefront SDKs (Next.js, SvelteKit, etc.) can import and customize the component, handling multi-currency display, tax display, and responsive sizing. Component respects theme colors and is accessible (WCAG AA).

The problem

Merchants want to show ‘was €50, now €35’ or ‘strike-through original price’ so customers see the discount, but HTML rendering is inconsistent. Without a component library, every storefront rebuilds this, leading to branding inconsistency and accessibility bugs.

What it does

• Render list_price crossed-out, sale_price in bold or highlight color
• Display currency symbol (€, £, $) and format per locale (€50.00 vs 50,00€)
• Show discount amount or percentage (e.g., ‘Save €15 (30%)’)
• Optional badge: ‘Limited time’, ‘Flash sale’, ‘Clearance’
• Responsive: scale text on mobile (<= 767px), reduce font size but keep legible
• Theme-aware: colors adjust to light/dark mode, merchant brand colors
• Accessible: semantic HTML <s> for struck price, aria-label for discount % (screen readers understand the deal)
• Props: pricePerUnit (integer), listPrice (integer), currency, locale, discount_badge (optional), hide_savings (boolean)

What it deliberately does NOT do

Each boundary carries its reason. A boundary without a reason gets crossed by the next person who reads this.

• 3D price visualization or animation (storefront owns visual effects)
• Price animation when discount changes (storefront owns interaction)
• Comparison to competitor prices (we do not track external prices)

Data model

None; this is a UI component library, not data.

API

• GET /sdk/components/price-display — returns component code (React, Vue, Svelte variants) with docs
• Storefront SDK exports: import { PriceDisplay } from ‘@astrobaas/sdk/components’ — used like <PriceDisplay pricePerUnit={3500} listPrice={5000} currency=“EUR” />

Every route added here must also appear in src/pages/openapi.json.ts — a test fails the build if it does not.

Admin

Component docs published in storefront SDK docs (not an admin feature). Merchants review component props in their storefront code, customize inline (e.g., hide_savings={true}).

The seam — why this is core

Core owns the price display component. It is infrastructure for storefronts, not a per-country obligation or credential requirement. Every merchant’s storefront needs this.

Core owns the interface + honest price renderer; storefront components are infrastructure, not a per-country obligation or credential.

Dependencies

• Storefront SDK (to ship component library)
• Multi-currency-pricing-engine (component must render prices in any currency)

Acceptance checks

Each of these must be able to fail. Before claiming this is done, break the code deliberately and watch each one go red.

• Component renders €50 as strike-through, €35 as sale price, ‘€15 off (30%)’ below
• On mobile (375px viewport), font size reduces but text remains readable
• In dark mode, strike-through color has sufficient contrast (WCAG AA >= 4.5:1)
• Screen reader announces ‘Price was fifty euros, now thirty-five euros, save fifteen euros’
• Component accepts hide_savings={true} and doesn’t render discount % or amount

Risks

If font sizes are not tested on mobile, component is illegible (always test at 375px). If contrast is not checked, dark mode fails accessibility (use WebAIM contrast checker). If strike-through uses ::before pseudo-element instead of <s> tag, screen readers miss the semantic meaning.

Commercial context

The anchor is what the nearest equivalent charges on Shopify or Magento today. It is context for a pricing decision, not the decision.

---

Generated from the commerce plan. See docs/COMMERCE-PLAN.md for the full catalogue and ../../AI-GUIDE.md for how to work on this repository.