Commerce journey

import {
  ProductCollectionBlock,
  ProductDetailBlock,
  ShoppingCartBlock,
  CheckoutReviewBlock,
  type CommerceProduct,
  type CommerceCartItem,
} from "@raydenui/ui/blocks";

const [step, setStep] = useState<"collection" | "detail" | "cart" | "review">("collection");
const [selected, setSelected] = useState<CommerceProduct | null>(null);
const [items, setItems] = useState<CommerceCartItem[]>([]);
 
return step === "collection" ? (
  <ProductCollectionBlock
    products={products}
    currency="GBP"
    locale="en-GB"
    onSelectProduct={(product) => {
      setSelected(product);
      setStep("detail");
    }}
  />
) : step === "detail" && selected ? (
  <ProductDetailBlock
    product={selected}
    onAddToCart={({ product, option, quantity }) => {
      setItems((current) => [
        ...current,
        { ...product, id: `${product.id}-${option?.id ?? "default"}`, variant: option?.label, quantity },
      ]);
      setStep("cart");
    }}
  />
) : step === "cart" ? (
  <ShoppingCartBlock
    items={items}
    shipping={500}
    onQuantityChange={(id, quantity) =>
      setItems((current) => current.map((item) => (item.id === id ? { ...item, quantity } : item)))
    }
    onRemoveItem={(id) => setItems((current) => current.filter((item) => item.id !== id))}
    onCheckout={() => setStep("review")}
    onContinueShopping={() => setStep("collection")}
  />
) : (
  <CheckoutReviewBlock
    items={items}
    deliveryAddress={["Alex Morgan", "24 Willow Lane", "London, N1 4AB"]}
    deliveryMethod="Standard delivery · 3–5 working days"
    paymentSummary="Visa ending in 4242"
    shipping={500}
    onEditCart={() => setStep("cart")}
    onConfirm={submitOrder}
  />
);