React

'use client';
import { useMemo, type ReactNode } from 'react';
import { createThrottleAuth } from '@usethrottle/auth';
import { ThrottleAuthProvider, useAuth } from '@usethrottle/auth/react';
import { createCatalogClient } from '@usethrottle/catalog';
import { CatalogProvider, type CartStorage } from '@usethrottle/catalog/react';

// One auth client and one catalog client for the life of the app. Never make
// a new catalog client when the shopper signs in: the token is read from
// this function on every request.
const auth = createThrottleAuth({ publishableKey: 'pk_live_your_throttle_key' });
const catalog = createCatalogClient({
  publishableKey: 'pc_pk_your_browser_key',
  customerToken: () => auth.getAccessToken(),
});

// Keeps the cart across reloads, in one slot per customer. On a sign-in,
// useCart moves a guest cart into the customer's slot, or loads the
// customer's saved cart when the guest had none. Another tab's sign-out is not
// visible here, so a shared slot could hand one shopper's cart to the next.
function localCartStorage(customerId: string | null): CartStorage {
  const key = `catalog-cart:${customerId ?? 'guest'}`;
  return {
    get: () => localStorage.getItem(key),
    set: (id) => localStorage.setItem(key, id),
    remove: () => localStorage.removeItem(key),
  };
}

function Catalog({ children }: { children: ReactNode }) {
  // Changes in the same render as the session, so the cache and the cart
  // never cross from one shopper to another.
  const { customer } = useAuth();
  const customerId = customer?.id ?? null;
  const cartStorage = useMemo(() => localCartStorage(customerId), [customerId]);

  return (
    <CatalogProvider
      client={catalog}
      customerKey={customerId}
      cartStorage={cartStorage}
      cartUrls={{
        returnUrl: 'https://shop.example.com/order-complete',
        cancelUrl: 'https://shop.example.com/cart',
        storefrontUrl: 'https://shop.example.com/shop',
      }}
    >
      {children}
    </CatalogProvider>
  );
}

export function Providers({ children }: { children: ReactNode }) {
  return (
    <ThrottleAuthProvider publishableKey="pk_live_your_throttle_key" auth={auth}>
      <Catalog>{children}</Catalog>
    </ThrottleAuthProvider>
  );
}

'use client';
import { useProduct, useProducts, useRelated } from '@usethrottle/catalog/react';

// Inside a <CatalogProvider>.
export function CategoryGrid({ category }: { category: string }) {
  const { data, error, isLoading, isValidating, refetch } = useProducts({
    category,
    limit: 24,
  });

  if (isLoading) return <p>Loading…</p>;
  if (error && !data) {
    return <button onClick={() => void refetch()}>Try again</button>;
  }
  return (
    // Cached data shows at once; isValidating is true while it is refreshed.
    <ul aria-busy={isValidating}>
      {data?.products.map((product) => (
        <li key={product.handle}>{product.title ?? product.handle}</li>
      ))}
    </ul>
  );
}

export function ProductDetails({ handle }: { handle: string }) {
  const product = useProduct(handle);
  // null makes no request: related products wait for a product that exists.
  const found = product.data !== undefined && !('redirectTo' in product.data);
  const related = useRelated(found ? handle : null, { limit: 8 });

  if (product.error?.code === 'NOT_FOUND') return <p>Product not found.</p>;
  if (product.data === undefined) return null;
  if ('redirectTo' in product.data) {
    // A renamed product: its handle changed.
    return <a href={`/products/${product.data.redirectTo}`}>See the product</a>;
  }

  const { title, variants } = product.data.product;
  return (
    <article>
      <h1>{title}</h1>
      <p>{variants.length} options</p>
      <ul>
        {related.data?.products.map((item) => (
          <li key={item.handle}>{item.title}</li>
        ))}
      </ul>
    </article>
  );
}

'use client';
import {
  useCollections,
  useReviewEligibility,
  useTags,
} from '@usethrottle/catalog/react/extras';

// Inside a <CatalogProvider> from '@usethrottle/catalog/react'.
export function Filters() {
  const tags = useTags({ q: 'fr', limit: 5 });
  const collections = useCollections({ limit: 6 });

  return (
    <nav>
      {tags.data?.tags.map((tag) => (
        <span key={tag.tag}>{tag.tag}</span>
      ))}
      {collections.data?.collections.map((collection) => (
        <a key={collection.handle} href={`/collections/${collection.handle}`}>
          {collection.title}
        </a>
      ))}
    </nav>
  );
}

export function ReviewButton({ handle }: { handle: string }) {
  // No request while signed out or while handle is null. Asked again on every
  // mount, and kept per customer.
  const { data } = useReviewEligibility(handle);
  return data?.canReview ? <a href="#review">Write a review</a> : null;
}

'use client';
import { useState } from 'react';
import type { ProductsQuery } from '@usethrottle/catalog';
import { useProducts } from '@usethrottle/catalog/react';

// Inside a <CatalogProvider>. A new filter or sort keeps the last grid on
// screen while the next one loads, instead of flashing empty.
export function FilteredGrid({ category }: { category: string }) {
  const [sort, setSort] = useState<'relevance' | 'price_asc'>('relevance');
  const { data, dataFor, error, isPreviousData, isStale, refetch } = useProducts(
    { category, sort, limit: 24 },
    { keepPreviousData: true },
  );

  return (
    <section aria-busy={isPreviousData}>
      <select
        value={sort}
        onChange={(event) => setSort(event.target.value as typeof sort)}
      >
        <option value="relevance">Relevance</option>
        <option value="price_asc">Price, low to high</option>
      </select>
      {/* dataFor (typed unknown) is the query the shown data answers, not the
          one just asked. */}
      <p>Sorted by {(dataFor as ProductsQuery).sort ?? 'relevance'}</p>
      {error && (isPreviousData || isStale) ? (
        <button onClick={() => void refetch()}>
          Prices may be out of date. Retry
        </button>
      ) : null}
      <ul>
        {data?.products.map((product) => (
          <li key={product.handle}>{product.title ?? product.handle}</li>
        ))}
      </ul>
    </section>
  );
}

'use client';
import type { StorefrontListAnswer } from '@usethrottle/catalog';
import { useProducts } from '@usethrottle/catalog/react';

// Inside a <CatalogProvider>. Signed in, initialData is the anonymous server
// answer. If revalidating it fails, its list prices stay on screen and
// isStale says they may be out of date.
export function Prices({ initialData }: { initialData: StorefrontListAnswer }) {
  const { data, error, isStale, refetch } = useProducts(
    { limit: 24 },
    { initialData },
  );

  return (
    <>
      {isStale && error ? (
        <button onClick={() => void refetch()}>
          Prices may be out of date. Retry
        </button>
      ) : null}
      <ul>
        {data?.products.map((product) => (
          <li key={product.handle}>{product.title ?? product.handle}</li>
        ))}
      </ul>
    </>
  );
}

'use client';
import type { StorefrontListAnswer } from '@usethrottle/catalog';
import { useProducts } from '@usethrottle/catalog/react';

// The server rendered the first page with a server key and passed its answer
// down. The hook shows it at once, as fetched now, and fetches only when it
// is older than staleTimeMs. initialData belongs to the query the hook
// mounted with: page 2 is fetched, never seeded from page 1.
export function CategoryPage({
  category,
  page,
  initial,
}: {
  category: string;
  page: number;
  initial: StorefrontListAnswer;
}) {
  const { data } = useProducts(
    { category, page, limit: 24 },
    { initialData: initial, staleTimeMs: 30_000 },
  );
  return (
    <ul>
      {data?.products.map((product) => (
        <li key={product.handle}>{product.title}</li>
      ))}
    </ul>
  );
}

'use client';
import { useCart } from '@usethrottle/catalog/react';

// Inside a <CatalogProvider> with cartUrls. Every useCart under one provider
// shares one cart, and its changes run one at a time, in order.
export function AddToCart({ sku }: { sku: string }) {
  const { add, pending } = useCart();
  // The first add creates the cart; later adds go to Throttle's cart session.
  return (
    <button disabled={pending} onClick={() => void add(sku, 1).catch(() => {})}>
      Add to cart
    </button>
  );
}

export function CartPage() {
  const { cart, cartUrl, status, error, pending, update, remove, checkout, switchCurrency } =
    useCart({ currency: 'USD' });

  if (status === 'loading') return <p>Loading your cart…</p>;
  if (cart === null) return <p>Your cart is empty.</p>;

  const goToCheckout = async () => {
    // Uses the provider's cartUrls. It answers the URL and never navigates.
    const { checkoutUrl } = await checkout();
    location.assign(checkoutUrl);
  };

  return (
    <section aria-busy={pending}>
      {error?.code === 'cart_prices_changed' ? (
        <p>Some prices changed. Check your cart, then check out again.</p>
      ) : null}
      <ul>
        {cart.lineItems?.map((line) => (
          <li key={line.id}>
            {line.name} × {line.quantity}
            <button onClick={() => void update(line.id, line.quantity + 1).catch(() => {})}>
              +
            </button>
            <button onClick={() => void remove(line.id).catch(() => {})}>Remove</button>
          </li>
        ))}
      </ul>
      <p>
        {cart.unitCount} items, {cart.subtotal} {cart.currency} (minor units)
      </p>
      {/* A new cart with the same lines, priced in EUR (BC4). */}
      <button onClick={() => void switchCurrency('EUR').catch(() => {})}>Pay in EUR</button>
      <button disabled={pending} onClick={() => void goToCheckout().catch(() => {})}>
        Checkout
      </button>
      {/* Or Throttle's hosted cart page, which has its own checkout button. */}
      {cartUrl ? <a href={cartUrl}>Open the hosted cart</a> : null}
    </section>
  );
}

'use client';
import { useMemo, type ReactNode } from 'react';
import { useAuth } from '@usethrottle/auth/react';
import { createCatalogClient } from '@usethrottle/catalog';
import { CatalogProvider } from '@usethrottle/catalog/react';

// A currency must be known for the lookup: set it on the client (or pass it
// to useCart). Without one, useCart makes no lookup and the first add
// creates a cart, as before.
const client = createCatalogClient({
  publishableKey: 'pc_pk_your_browser_key',
  keyInQuery: true,
  currency: 'USD',
});

// Needs @usethrottle/auth 0.12.0 or later.
export function CustomerCartProvider({ children }: { children: ReactNode }) {
  const { auth, account, customer } = useAuth();
  // Memoised: a new object on every render would re-render every consumer.
  const customerCart = useMemo(
    () => ({
      // The customer's most recently updated open cart in `currency`, or null.
      getOpenCart: ({ currency }: { currency: string }) =>
        account.getOpenCart?.({ currency }) ?? Promise.resolve(null),
      // Resolves once the sign-in's guest-cart claim is done.
      whenClaimSettled: () => auth.whenClaimSettled?.() ?? Promise.resolve(),
    }),
    [auth, account],
  );

  return (
    <CatalogProvider
      client={client}
      customerKey={customer?.id ?? null}
      customerCart={customerCart}
    >
      {children}
    </CatalogProvider>
  );
}

'use client';
import { useState } from 'react';
import { useSubmitReview } from '@usethrottle/catalog/react';

// Inside a <CatalogProvider> whose client sends the customer token.
export function ReviewForm({ handle }: { handle: string }) {
  const [rating, setRating] = useState(5);
  const [body, setBody] = useState('');
  const { submit, status, error, result, reset } = useSubmitReview(handle);

  if (status === 'done') {
    return (
      <p>
        {result?.review.status === 'pending'
          ? 'Thanks! Your review appears once the store approves it.'
          : 'Thanks for your review!'}{' '}
        <button onClick={reset}>Close</button>
      </p>
    );
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        // A retry after a failure reuses the submission's idempotency key,
        // so a lost answer never makes a second review.
        void submit({ rating, body, displayName: 'Sam' }).catch(() => {});
      }}
    >
      <select value={rating} onChange={(event) => setRating(Number(event.target.value))}>
        {[5, 4, 3, 2, 1].map((stars) => (
          <option key={stars} value={stars}>
            {stars} stars
          </option>
        ))}
      </select>
      <textarea value={body} onChange={(event) => setBody(event.target.value)} />
      {error ? <p role="alert">{error.code}</p> : null}
      <button disabled={status === 'submitting'}>Submit review</button>
    </form>
  );
}