Storefront

"use client"

import * as React from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import type { ShopCatalog } from "@/components/blocks/storefront/catalog"
import { routeFromPath, routeToPath, type StorefrontRouter } from "@/components/blocks/storefront/routes"
import { Storefront } from "@/components/blocks/storefront/storefront"
import { createStorefrontStore } from "@/components/blocks/storefront/store"

const base = "/shop"

function useShopRouter(): StorefrontRouter {
  const router = useRouter()
  const pathname = usePathname()
  const params = useSearchParams()
  const search = params.toString()
  const route = React.useMemo(
    () => routeFromPath(`${pathname.slice(base.length)}${search ? `?${search}` : ""}`),
    [pathname, search]
  )

  return React.useMemo(
    () => ({
      route,
      href: (next) => `${base}${routeToPath(next)}`.replace(/\/(\?|$)/, "$1"),
      navigate: (next, options) => {
        const href = `${base}${routeToPath(next)}`.replace(/\/(\?|$)/, "$1")
        if (options?.replace) router.replace(href, { scroll: false })
        else router.push(href, { scroll: false })
      },
    }),
    [route, router]
  )
}

export function Shop({ catalog }: { catalog: ShopCatalog }) {
  const router = useShopRouter()
  const [store] = React.useState(() => createStorefrontStore())
  return <Storefront className="h-svh" store={store} catalog={catalog} router={router} />
}

"use client"

import * as React from "react"

import type { Cart, CartLine } from "../cart/cart"
import type { ShopCatalog } from "@/components/blocks/storefront/catalog"
import { Storefront } from "@/components/blocks/storefront/storefront"
import { createStorefrontStore, type StorefrontApi } from "@/components/blocks/storefront/store"

async function post<T>(path: string, body: unknown): Promise<T> {
  const response = await fetch(path, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })
  const json = (await response.json()) as T & { error?: string }
  if (!response.ok) throw new Error(json.error ?? "Something went wrong. Try again.")
  return json
}

const api: Partial<StorefrontApi> = {
  addToCart: (line: CartLine) => post<Cart>("/api/cart/lines", { variantId: line.merchandise.id, quantity: line.quantity }),
  updateLine: (lineId, quantity) => post<Cart>("/api/cart/update", { lineId, quantity }),
  removeLine: (lineId) => post<Cart>("/api/cart/remove", { lineId }),
  restoreLine: (line) => post<Cart>("/api/cart/lines", { variantId: line.merchandise.id, quantity: line.quantity }),
  setWishlisted: async (product, saved) => {
    await post("/api/wishlist", { productId: product.id, saved })
  },
  notifyMe: async (_product, variant, email) => {
    await post("/api/back-in-stock", { variantId: variant.id, email })
  },
  subscribe: async (email) => {
    await post("/api/newsletter", { email })
  },
}

export function Shop({ catalog, cart }: { catalog: ShopCatalog; cart: Cart }) {
  const [store] = React.useState(() => createStorefrontStore({ cart }))
  return <Storefront className="h-svh" store={store} catalog={catalog} api={api} />
}

"use client"

import * as React from "react"

import type { Cart } from "../cart/cart"
import { money } from "../price/money"
import type { ShopCatalog } from "@/components/blocks/storefront/catalog"
import { Storefront } from "@/components/blocks/storefront/storefront"
import { createStorefrontStore, type StorefrontApi } from "@/components/blocks/storefront/store"

type ShopifyCartLine = {
  id: string
  quantity: number
  cost: { amountPerQuantity: { amount: string; currencyCode: string } }
  merchandise: {
    id: string
    title: string
    product: { id: string; title: string; handle: string }
    image: { url: string; altText: string | null } | null
  }
}

type ShopifyCart = {
  id: string
  checkoutUrl: string
  lines: { nodes: ShopifyCartLine[] }
  cost: { subtotalAmount: { currencyCode: string } }
}

const cartFields = `id checkoutUrl cost { subtotalAmount { currencyCode } }
  lines(first: 100) { nodes { id quantity cost { amountPerQuantity { amount currencyCode } }
  merchandise { ... on ProductVariant { id title product { id title handle } image { url altText } } } } }`

async function storefront<T>(query: string, variables: Record<string, unknown>): Promise<T> {
  const response = await fetch("/api/shopify", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query, variables }),
  })
  const { data, errors } = (await response.json()) as { data: T; errors?: { message: string }[] }
  if (errors?.length) throw new Error(errors[0].message)
  return data
}

function toCart(cart: ShopifyCart): Cart {
  return {
    id: cart.id,
    currencyCode: cart.cost.subtotalAmount.currencyCode,
    lines: cart.lines.nodes.map((line) => ({
      id: line.id,
      quantity: line.quantity,
      price: money(line.cost.amountPerQuantity.amount, line.cost.amountPerQuantity.currencyCode),
      merchandise: {
        id: line.merchandise.id,
        productId: line.merchandise.product.id,
        productTitle: line.merchandise.product.title,
        variantTitle: line.merchandise.title === "Default Title" ? undefined : line.merchandise.title,
        image: line.merchandise.image
          ? { id: line.merchandise.image.url, src: line.merchandise.image.url, alt: line.merchandise.image.altText ?? "" }
          : undefined,
      },
    })),
  }
}

type Result = { cart: ShopifyCart; userErrors: { message: string }[] }

async function mutate(name: string, query: string, variables: Record<string, unknown>) {
  const data = await storefront<Record<string, Result>>(query, variables)
  const result = data[name]
  if (result.userErrors.length) throw new Error(result.userErrors[0].message)
  return toCart(result.cart)
}

const api: Partial<StorefrontApi> = {
  addToCart: (line, cart) =>
    mutate(
      "cartLinesAdd",
      `mutation($cartId: ID!, $lines: [CartLineInput!]!) { cartLinesAdd(cartId: $cartId, lines: $lines) { cart { ${cartFields} } userErrors { message } } }`,
      { cartId: cart.id, lines: [{ merchandiseId: line.merchandise.id, quantity: line.quantity }] }
    ),
  updateLine: (lineId, quantity, cart) =>
    mutate(
      "cartLinesUpdate",
      `mutation($cartId: ID!, $lines: [CartLineUpdateInput!]!) { cartLinesUpdate(cartId: $cartId, lines: $lines) { cart { ${cartFields} } userErrors { message } } }`,
      { cartId: cart.id, lines: [{ id: lineId, quantity }] }
    ),
  removeLine: (lineId, cart) =>
    mutate(
      "cartLinesRemove",
      `mutation($cartId: ID!, $lineIds: [ID!]!) { cartLinesRemove(cartId: $cartId, lineIds: $lineIds) { cart { ${cartFields} } userErrors { message } } }`,
      { cartId: cart.id, lineIds: [lineId] }
    ),
}

export function ShopifyStorefront({ catalog, cart }: { catalog: ShopCatalog; cart: ShopifyCart }) {
  const [store] = React.useState(() => createStorefrontStore({ cart: toCart(cart) }))
  return <Storefront className="h-svh" store={store} catalog={catalog} api={api} />
}