Overview

import type { Product, ProductVariant, Order } from '@shopperlabs/shopper-types'

// Use in your API calls
async function getProduct(id: number): Promise<Product> {
  const response = await fetch(`/api/products/${id}`)
  return response.json()
}

// Type your component props
interface ProductCardProps {
  product: Product
}

import {
  ProductType,
  OrderStatus,
  PaymentStatus,
  ShippingStatus,
  CollectionType,
  AddressType
} from '@shopperlabs/shopper-types'

if (product.type === ProductType.VARIANT) {
  // Handle variant product
}

if (order.status === OrderStatus.COMPLETED) {
  // Order is complete
}

if (order.payment_status === PaymentStatus.AUTHORIZED) {
  // Payment can be captured
}

interface Entity {
  id: number
  created_at?: DateEntity
  updated_at?: DateEntity
  deleted_at?: DateEntity | null
}

interface DateEntity {
  date: string // e.g., "2026-02-11 14:30:00"
  human: string // e.g., "2 hours ago"
}

interface Price {
  amount: number | null
  compare_amount: number | null
  cost_amount: number | null
  currency_id: number
  currency_code: string
  currency?: Currency
}

interface ShippingFields {
  width_unit: Length
  width_value: number | null
  weight_unit: Weight
  weight_value: number | null
  height_unit: Length
  height_value: number | null
  depth_unit: Length
  depth_value: number | null
  volume_unit: Volume
  volume_value: number | null
}

import type { Product, Category } from '@shopperlabs/shopper-types'
import { ProductType } from '@shopperlabs/shopper-types'

interface ProductListProps {
  products: Product[]
  category?: Category
}

function ProductList({ products, category }: ProductListProps) {
  return (
    <div>
      {category && <h1>{category.name}</h1>}

      {products.map((product) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>

          {product.type === ProductType.VARIANT && (
            <span>{product.variants?.length} variants</span>
          )}

          {product.prices?.[0] && (
            <span>
              {product.prices[0].currency_code} {product.prices[0].amount}
            </span>
          )}
        </div>
      ))}
    </div>
  )
}

import type { Order, OrderItem } from '@shopperlabs/shopper-types'
import { OrderStatus, PaymentStatus, ShippingStatus } from '@shopperlabs/shopper-types'

function OrderDetails({ order }: { order: Order }) {
  const statusColors: Record<OrderStatus, string> = {
    [OrderStatus.NEW]: '#3b82f6',
    [OrderStatus.PROCESSING]: '#2563eb',
    [OrderStatus.COMPLETED]: '#059669',
    [OrderStatus.CANCELLED]: '#ef4444',
    [OrderStatus.ARCHIVED]: '#6b7280',
  }

  return (
    <div>
      <h1>Order #{order.number}</h1>

      <div>
        <span style={{ color: statusColors[order.status] }}>{order.status}</span>
        <span>{order.payment_status}</span>
        <span>{order.shipping_status}</span>
      </div>

      <h2>Items</h2>
      {order.items?.map((item: OrderItem) => (
        <div key={item.id}>
          <span>{item.name}</span>
          <span>x{item.quantity}</span>
          <span>{item.unit_price_amount}</span>
        </div>
      ))}

      {order.shippingAddress && (
        <div>
          <h2>Shipping Address</h2>
          <p>{order.shippingAddress.full_name}</p>
          <p>{order.shippingAddress.street_address}</p>
          <p>{order.shippingAddress.city}, {order.shippingAddress.state}</p>
          <p>{order.shippingAddress.postal_code}</p>
        </div>
      )}
    </div>
  )
}