# Commerce — `@sonordev/site-kit/commerce`

Products, services, classes, events, and checkout flows — all managed from the Sonor dashboard.

## Components

| Component                       | Purpose                                         |
| ------------------------------- | ----------------------------------------------- |
| `OfferingCard`                  | Card display for any offering type              |
| `OfferingList`                  | Grid/list of offerings with filtering           |
| `ProductPage` / `ProductDetail` | Full product page with gallery, sizes, variants |
| `ProductGrid` / `ProductEmbed`  | Product showcase widgets                        |
| `SizeChart`                     | Clothing size chart display                     |
| `EventTile` / `UpcomingEvents`  | Event display widgets                           |
| `EventCalendar` / `EventModal`  | Calendar view + detail modal                    |
| `EventEmbed` / `EventsWidget`   | Embeddable event components                     |
| `CheckoutForm`                  | Payment checkout flow                           |
| `RegistrationForm`              | Event/class registration                        |
| `CalendarView`                  | Date-based calendar component                   |

## Usage

```tsx
import { OfferingList, ProductPage } from '@sonordev/site-kit/commerce'

// List all offerings
export default function ShopPage() {
  return <OfferingList type="product" />
}

// Single product page
export default function Product({ params }) {
  return <ProductPage slug={params.slug} />
}
```

## API Functions

```ts
import {
  fetchOfferings, fetchOffering,
  fetchProducts, fetchProductBySlug,
  fetchUpcomingEvents, fetchNextEvent,
  fetchCategories, fetchServices,
  createCheckoutSession, createPaymentIntent,
  validateDiscountCode, registerForEvent,
  fetchShippingRates, validateAddress,
} from '@sonordev/site-kit/commerce'
```

## Offering Types

```ts
type OfferingType = 'product' | 'service' | 'class' | 'event' | 'subscription'

interface CommerceOffering {
  name: string; slug: string; type: OfferingType;
  description?: string; featured_image_url?: string;
  price_type: 'fixed' | 'variable' | 'quote' | 'free';
  price?: number; compare_at_price?: number; currency: string;
  track_inventory?: boolean; inventory_count?: number;
  is_clothing?: boolean; size_chart?: SizeChart;
  duration_minutes?: number; capacity?: number;
  location?: string; is_virtual?: boolean;
  schedules?: CommerceSchedule[]; variants?: CommerceVariant[];
}
```

## Per-category styling (`data-category` / `data-offering-type`)

Event and offering surfaces expose the offering's category slug and type as
data attributes, so sites can theme categories with plain CSS — no custom
components needed. `data-category` is only present when the offering has a
category; `data-offering-type` is always present.

Elements carrying the attributes:

- `CalendarView` / `EventCalendar` — `.site-kit-calendar-event` chips (both
  `title` and `image` display modes) and the image-mode wrapper
- `EventTile` (both variants — also covers `UpcomingEvents` and `EventEmbed`)
- `EventsWidget` — `.site-kit-event-card` in list and grid views
- `OfferingCard` (all variants — also covers `OfferingList` / `ProductGrid`)

```css
/* e.g. two color schemes on one calendar: PTO vs school district */
.site-kit-calendar-event[data-category="pto"] {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.site-kit-calendar-event[data-category="school-district"] {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}
```

## Size Charts (clothing products)

```ts
interface SizeChart {
  unit: 'inches' | 'cm'
  fit_note?: string                // e.g., "Runs small. Order one size up."
  measurements: string[]           // ['Chest', 'Length', 'Sleeve']
  rows: Array<{
    size: string                   // 'S', 'M', 'L', 'XL'
    values: number[]               // Primary unit values
    values_alt?: number[]          // Auto-converted alternate unit
  }>
}
```