@quickbutik/kit/react

import { … } from "@quickbutik/kit/react"

new CartStore(client, initialCart?): CartStore;

clearCart: () => Promise<void>;

getSnapshot: () => CartSnapshot;

subscribe: (listener) => () => void;

(): void;

add(item): Promise<Cart | null>;

buyNow(item, input): Promise<BuyNowResult>;

clear(): Promise<void>;

hydrate(cart): void;

load(): Promise<Cart | null>;

onMutation(listener): () => void;

(): void;

refresh(): Promise<Cart | null>;

removeItem(itemId): Promise<Cart | null>;

updateItem(itemId, quantity): Promise<Cart | null>;

type CartStatus = "idle" | "loading" | "ready" | "error";

type ShopkitAnalyticsOptions = Omit<AnalyticsProviderProps, "children">;

const AnalyticsContext: react.Context<Analytics | null>;

const ConsentContext: react.Context<ConsentContextValue | null>;

const ShopkitContext: react.Context<ShopkitContextValue | null>;

function AddToCart(__namedParameters): ReactNode;

function AnalyticsProvider(props): ReactNode;

<ConsentProvider>
  <ShopkitProvider config={config}>
    <AnalyticsProvider>{children}</AnalyticsProvider>
  </ShopkitProvider>
</ConsentProvider>

function Checkout(__namedParameters): Element;

<Checkout successUrl="/thanks" backUrl="/cart" onComplete={celebrate} />

function ConsentBanner(props): ReactNode;

<ConsentBanner>
  {({ visible, labels, draft, setDraft, acceptAll, rejectAll, save, open, openSettings }) => (
    <aside className="my-banner">
      <p>{labels.description}</p>
      {open ? (
        <label>
          <input type="checkbox" checked={draft.analytics}
                 onChange={(e) => setDraft({ analytics: e.target.checked })} />
          {labels.analytics}
        </label>
      ) : null}
      <button onClick={rejectAll}>{labels.rejectAll}</button>
      <button onClick={acceptAll}>{labels.acceptAll}</button>
    </aside>
  )}
</ConsentBanner>

function ConsentGate(__namedParameters): ReactNode;

<ConsentGate category="marketing" fallback={<p>Allow marketing cookies to see reviews.</p>}>
  <TrustpilotWidget />
</ConsentGate>

function ConsentProvider(__namedParameters): ReactNode;

<ConsentProvider revision={2}>
  <ShopkitProvider config={config}>
    <AnalyticsProvider>{children}</AnalyticsProvider>
  </ShopkitProvider>
  <ConsentBanner lang="sv" privacyPolicyUrl="/privacy" />
</ConsentProvider>

const consent = readConsentCookie(request.headers.get("cookie"), { revision: 2 })
<ConsentProvider revision={2} initialState={consent}>…</ConsentProvider>

function ConsentSettingsButton(__namedParameters): ReactNode;

<footer>
  <ConsentSettingsButton className="link" />
  <ConsentSettingsButton>Ändra cookieval</ConsentSettingsButton>
</footer>

function JsonLd(__namedParameters): ReactNode;

const tags = buildSeo({ product, ...defaults })
return <><JsonLd data={tags.jsonLd} />…</>

function ProductConsumer(__namedParameters): ReactNode;

function ProductImage(__namedParameters): ReactNode;

// Inside a <ProductProvider> — the main image, no props needed:
<ProductImage width={800} height={800} />

// In a product card, from a listing:
<ProductImage product={product} width={400} height={400} className="thumb" />

// A gallery:
{product.images.map((image) => (
  <ProductImage key={image.id} image={image} product={product} width={120} />
))}

// By id, anywhere under <ShopkitProvider> (fetches; needs <Suspense>):
<ProductImage productId="prod_27" width={64} height={64} />

function ProductOptionGroup(__namedParameters): ReactNode;

function ProductOptions(__namedParameters): ReactNode;

<ProductOptions>
  {(groups) => groups.map((group) => <MyGroup key={group.id} group={group} />)}
</ProductOptions>

function ProductOptionValues(__namedParameters): ReactNode;

<ProductOptionValues option="Color">
  {(value) => <ColourCard key={value.id} value={value} />}
</ProductOptionValues>

function ProductPrice(__namedParameters): ReactNode;

function ProductProvider(__namedParameters): ReactNode;

// app/products/[slug]/page.tsx
export default async function Page({ params }) {
  const { slug } = await params
  return (
    <Suspense fallback={<Skeleton />}>
      <ProductProvider slug={slug} notFound={<NotFound />}>
        <SEO />
        <VariantPicker />
      </ProductProvider>
    </Suspense>
  )
}

// …or with the product already in hand:
<ProductProvider product={product} currency="SEK">
  <MyColourCards />   // useProductOptions()
  <MyPrice />         // useProductPrice()
  <MyAddButton />     // useProductAddToCart()
</ProductProvider>

function SelectedVariant(__namedParameters): ReactNode;

function SEO(__namedParameters): ReactNode;

<ProductProvider slug={slug}>
  <SEO />
</ProductProvider>

// Or explicitly, outside a product context:
<SEO product={product} url={`/products/${product.slug}`} />
<SEO category={category} url={`/categories/${category.slug}`} />
<SEO title="Sök" noIndex />

function SeoProvider(__namedParameters): ReactNode;

<SeoProvider baseUrl="https://myshop.com" shop={shop} currency="SEK" organization>
  {children}
</SeoProvider>

function ShopkitProvider(__namedParameters): ReactNode;

<ShopkitProvider config={{ publishableKey }} consent={{ lang: "sv", privacyPolicyUrl: "/integritet" }}>
  <App />
</ShopkitProvider>

function useAnalytics(): Analytics;

const analytics = useAnalytics()
analytics.track(viewItemListEvent(items, "Nyheter"))

function useAsync<T>(
   operation, 
   deps, 
options?): AsyncState<T>;

function useCart(): UseCartResult;

const { cart, itemCount, add, pending } = useCart()
<button onClick={() => add({ productId })} disabled={pending > 0}>Add</button>

function useCategories(params?, options?): AsyncState<Page<Category>>;

function useCheckout(): UseCheckoutResult;

const { redirectToCheckout, starting } = useCheckout()
<button
  disabled={starting}
  onClick={() =>
    redirectToCheckout({
      successUrl: `${location.origin}/order`,
      backUrl: `${location.origin}/`,
    })
  }
>
  Till kassan
</button>

function useClientCurrency(client): string | null;

function useConsent(): UseConsentResult;

const { allows, openSettings } = useConsent()
{allows("marketing") ? <TrustpilotWidget /> : null}
<button type="button" onClick={openSettings}>Cookie settings</button>