React hooks

const { products, isLoading, pagination, is_complete, refetch } = useProducts({
  category: "drinks",
  search: "espresso",
  featured: true,
  limit: 24,
});

const { product, isLoading } = useProduct("studio-tee-natural"); // slug
const { product: byId } = useProduct("prod_xyz");                  // id

const { categories } = useCategories();
const { collections } = useCollections();
const { collection } = useCollection("col_summer-25");

const { results, isLoading } = useSearch("oat milk", { limit: 10 });

const { bundles } = useBundles();
const { plans } = useBillingPlans({ productId: "prod_subscription" });

const { items, total, addItem, updateQuantity, removeItem } = useCart();

addItem(product, 1, {
  variantId: "var_studio-tee-natural_size_s",
  addOnOptionIds: ["addopt_gift_wrap"],
  bundleSelections: [{ productId: "prod_socks", quantity: 1 }],
  compositeSelections: [{ groupId: "grp_main", productId: "prod_jollof" }],
  specialInstructions: "Please ship without invoice.",
});

const { isOpen, open, close, toggle } = useCartDrawer();

const { quote, isExpired, refresh, messages } = useQuote(
  {
    productId: "prod_abc",
    variantId: "var_large",
    addOnOptionIds: ["addon_oat", "addon_syrup"],
    quantity: 2,
  },
  { autoRefresh: true, refreshBeforeExpiryMs: 30_000 },
);

const { price } = useProductPrice({ productId: "prod_abc", variantId: "var_large" });
const { result } = useValidateDiscount({ code: "WELCOME10", subtotal: 4200 });

const { process, isLoading } = useCheckout();

const r = await process({
  cart_id: cartId,
  customer: { name: "Akua", email: "akua@example.com", phone: "+233244000000" },
  order_type: "delivery",
  payment_method: "card",
  delivery_address: { line1: "12 Independence Ave", city: "Accra" },
});

if (r.success) router.push(`/orders/${r.order?.id}`);

const { order } = useOrder("ord_abc", { poll: true, pollInterval: 5000 });
const { orders } = useOrders({ status: "completed", limit: 20 });

const { services } = useServices();

const { slots } = useAvailableSlots({
  service_id: "svc_haircut",
  date: "2026-06-01",
  variant_id: "var_haircut_60min",
  participant_count: 1,
});

const { availability } = useServiceAvailability({
  service_id: "svc_haircut",
  start_date: "2026-06-01",
  end_date: "2026-06-07",
  variant_id: "var_haircut_60min",
});

const { upcoming, past, isLoading } = useBookings({ scope: "all" });

const { subscriptions } = useSubscriptions();
const { subscription, pause, resume, cancel } = useSubscription("sub_abc");

const { deals } = useDeals();
const { products: onSale } = useProductsOnSale({ limit: 12 });
const { deals: applies } = useProductDeals({ productId: "prod_abc" });

const { state, dismissMessage } = useActivityState();
const { recommendations } = useRecommendations({ surface: "home" });

const { rate } = useFxRate({ from: "GHS", to: "USD" });
const { fee } = useDeliveryFee({ latitude: 5.55, longitude: -0.196, country: "GH" });

const { business, currency, currentLocation, setCurrentLocation, isReady } = useCimplify();
const client = useCimplifyClient();

const { messages, send, isPolling } = useChat({ pollInterval: 3000 });
const { taxonomies } = useTaxonomies();
const { facets } = usePropertyFacets({ category: "drinks" });