@tanstack/create 0.65.0 → 0.67.0

package/src/frameworks/react/add-ons/shopify/assets/src/routes/shop.policies.$handle.tsx

@@ -0,0 +1,30 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+import { getShopPolicy } from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/shop/policies/$handle')({
+  loader: async ({ params }) => {
+    const policy = await getShopPolicy({ data: { handle: params.handle } })
+    if (!policy) throw notFound()
+    return { policy }
+  },
+  head: ({ loaderData }) => ({
+    meta: loaderData
+      ? [{ title: loaderData.policy.title }]
+      : [],
+  }),
+  component: PolicyRoute,
+})
+
+function PolicyRoute() {
+  const { policy } = Route.useLoaderData()
+  return (
+    <article className="space-y-6">
+      <h1 className="text-3xl font-medium tracking-tight">{policy.title}</h1>
+      <div
+        className="shop-prose"
+        dangerouslySetInnerHTML={{ __html: policy.body }}
+      />
+    </article>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/routes/shop.products.$handle.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+import { AddToCartButton } from '#/components/shop/add-to-cart-button'
+import { Money } from '#/components/shop/money'
+import { ShopImage } from '#/components/shop/shop-image'
+import {
+  VariantSelector,
+  defaultSelectedOptions,
+  findVariant,
+} from '#/components/shop/variant-selector'
+import { getProduct } from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/shop/products/$handle')({
+  loader: async ({ params }) => {
+    const product = await getProduct({ data: { handle: params.handle } })
+    if (!product) throw notFound()
+    return { product }
+  },
+  head: ({ loaderData }) => ({
+    meta: loaderData
+      ? [
+          { title: loaderData.product.seo.title ?? loaderData.product.title },
+          loaderData.product.seo.description
+            ? {
+                name: 'description',
+                content: loaderData.product.seo.description,
+              }
+            : { name: 'description', content: '' },
+        ]
+      : [],
+  }),
+  component: ProductDetailRoute,
+})
+
+function ProductDetailRoute() {
+  const { product } = Route.useLoaderData()
+  const [selected, setSelected] = useState(() =>
+    defaultSelectedOptions(product),
+  )
+  const variant = findVariant(product.variants.nodes, selected)
+  const heroImage = variant?.image ?? product.images.nodes[0] ?? null
+
+  return (
+    <article className="grid gap-10 lg:grid-cols-[1.2fr_1fr]">
+      <div className="flex flex-col gap-3">
+        {heroImage && (
+          <ShopImage
+            src={heroImage.url}
+            alt={heroImage.altText ?? product.title}
+            width={1000}
+            height={1250}
+            loading="eager"
+            sizes="(min-width: 1024px) 50vw, 100vw"
+            className="w-full rounded-lg object-cover"
+          />
+        )}
+        {product.images.nodes.length > 1 && (
+          <div className="grid grid-cols-4 gap-2">
+            {product.images.nodes.slice(0, 8).map((img) => (
+              <ShopImage
+                key={img.url}
+                src={img.url}
+                alt={img.altText ?? product.title}
+                width={250}
+                height={300}
+                className="w-full rounded-md object-cover"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-6 lg:sticky lg:top-8 lg:self-start">
+        <div className="space-y-2">
+          <h1 className="text-3xl font-medium tracking-tight">
+            {product.title}
+          </h1>
+          {variant && (
+            <p className="text-2xl">
+              <Money
+                amount={variant.price.amount}
+                currencyCode={variant.price.currencyCode}
+              />
+            </p>
+          )}
+        </div>
+
+        <VariantSelector
+          product={product}
+          selectedOptions={selected}
+          onChange={setSelected}
+        />
+
+        <AddToCartButton product={product} variant={variant} />
+
+        {product.descriptionHtml && (
+          <div
+            className="shop-prose mt-2 text-sm"
+            dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
+          />
+        )}
+      </div>
+    </article>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/routes/shop.search.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import * as v from 'valibot'
+
+import { ProductGrid } from '#/components/shop/product-grid'
+import { searchProducts } from '#/server/shopify/catalog.functions'
+
+const SearchSchema = v.object({
+  q: v.optional(v.string(), ''),
+})
+
+export const Route = createFileRoute('/shop/search')({
+  validateSearch: (search) => v.parse(SearchSchema, search),
+  loaderDeps: ({ search }) => ({ q: search.q }),
+  loader: async ({ deps }) => {
+    if (!deps.q.trim()) {
+      return {
+        q: '',
+        products: [] as Awaited<
+          ReturnType<typeof searchProducts>
+        >['products'],
+        totalCount: 0,
+      }
+    }
+    const result = await searchProducts({
+      data: { query: deps.q.trim(), first: 24 },
+    })
+    return { q: deps.q, products: result.products, totalCount: result.totalCount }
+  },
+  component: SearchRoute,
+})
+
+function SearchRoute() {
+  const { q, products, totalCount } = Route.useLoaderData()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const [draft, setDraft] = useState(q)
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-3xl font-medium tracking-tight">Search</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          navigate({ search: { q: draft } })
+        }}
+        className="flex gap-2"
+      >
+        <input
+          type="search"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          placeholder="Search products"
+          autoFocus
+          className="flex-1 rounded-full border border-[var(--storefront-line)] bg-transparent px-5 py-3 text-base focus:border-[var(--storefront-accent)] focus:outline-none"
+        />
+        <button
+          type="submit"
+          className="rounded-full bg-[var(--storefront-accent)] px-6 py-3 text-sm font-medium text-[var(--storefront-accent-fg)]"
+        >
+          Search
+        </button>
+      </form>
+
+      {q && (
+        <p className="text-sm text-[var(--storefront-fg-muted)]">
+          {totalCount} result{totalCount === 1 ? '' : 's'} for{' '}
+          <span className="font-medium text-[var(--storefront-fg)]">"{q}"</span>
+        </p>
+      )}
+
+      {q && <ProductGrid products={products} />}
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/routes/shop.tsx

@@ -0,0 +1,78 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+import '#/components/shop/shop.css'
+import { getCollections } from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/shop')({
+  loader: () => getCollections(),
+  component: ShopLayout,
+})
+
+function ShopLayout() {
+  const collections = Route.useLoaderData()
+
+  return (
+    <div className="shop-root min-h-screen">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="mb-8 flex flex-wrap items-center gap-4 border-b border-[var(--storefront-line)] pb-6">
+          <Link
+            to="/shop"
+            className="text-2xl font-medium tracking-tight no-underline text-[var(--storefront-fg)]"
+          >
+            Shop
+          </Link>
+          <div className="ml-auto flex items-center gap-4 text-sm">
+            <Link
+              to="/shop/search"
+              search={{ q: '' }}
+              className="hover:underline underline-offset-4"
+            >
+              Search
+            </Link>
+            <Link to="/shop/cart" className="hover:underline underline-offset-4">
+              Cart
+            </Link>
+          </div>
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-[200px_1fr]">
+          <aside className="hidden lg:block">
+            <nav className="sticky top-8 flex flex-col gap-1 text-sm">
+              <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-[var(--storefront-fg-muted)]">
+                Collections
+              </p>
+              <Link
+                to="/shop"
+                className="rounded-md px-2 py-1.5 text-[var(--storefront-fg-muted)] hover:bg-[var(--storefront-line)]/40 hover:text-[var(--storefront-fg)]"
+                activeOptions={{ exact: true }}
+                activeProps={{
+                  className:
+                    'rounded-md px-2 py-1.5 bg-[var(--storefront-line)]/60 text-[var(--storefront-fg)] font-medium',
+                }}
+              >
+                All products
+              </Link>
+              {collections.map((collection) => (
+                <Link
+                  key={collection.id}
+                  to="/shop/collections/$handle"
+                  params={{ handle: collection.handle }}
+                  className="rounded-md px-2 py-1.5 text-[var(--storefront-fg-muted)] hover:bg-[var(--storefront-line)]/40 hover:text-[var(--storefront-fg)]"
+                  activeProps={{
+                    className:
+                      'rounded-md px-2 py-1.5 bg-[var(--storefront-line)]/60 text-[var(--storefront-fg)] font-medium',
+                  }}
+                >
+                  {collection.title}
+                </Link>
+              ))}
+            </nav>
+          </aside>
+          <main>
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/frameworks/react/add-ons/shopify/assets/src/server/shopify/cart.functions.ts

@@ -0,0 +1,207 @@
+import { createServerFn } from '@tanstack/react-start'
+import { setResponseHeaders } from '@tanstack/react-start/server'
+import * as v from 'valibot'
+
+import { clearCartId, getCartId, setCartId } from '#/server/shopify/cookies'
+import { shopifyServerFetch } from '#/server/shopify/storefront-client'
+import {
+  CART_CREATE_MUTATION,
+  CART_DISCOUNT_CODES_UPDATE_MUTATION,
+  CART_LINES_ADD_MUTATION,
+  CART_LINES_REMOVE_MUTATION,
+  CART_LINES_UPDATE_MUTATION,
+  CART_QUERY,
+  type CartCreateResult,
+  type CartDetail,
+  type CartDiscountCodesUpdateResult,
+  type CartLinesAddResult,
+  type CartLinesRemoveResult,
+  type CartLinesUpdateResult,
+  type CartQueryResult,
+  type CartUserError,
+} from '#/lib/shopify/queries'
+
+export class CartUserErrorsError extends Error {
+  constructor(public readonly userErrors: Array<CartUserError>) {
+    super(userErrors.map((e) => e.message).join('\n'))
+    this.name = 'CartUserErrorsError'
+  }
+}
+
+function throwIfUserErrors(errs: Array<CartUserError>) {
+  if (errs.length > 0) throw new CartUserErrorsError(errs)
+}
+
+function setCartResponseHeaders() {
+  // Cart is per-user; do not edge-cache.
+  setResponseHeaders(
+    new Headers({ 'Cache-Control': 'private, no-store, must-revalidate' }),
+  )
+}
+
+async function fetchCartById(cartId: string): Promise<CartDetail | null> {
+  const result = await shopifyServerFetch<CartQueryResult, { cartId: string }>({
+    query: CART_QUERY,
+    variables: { cartId },
+  })
+  return result.cart
+}
+
+export const getCart = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<CartDetail | null> => {
+    setCartResponseHeaders()
+    const cartId = getCartId()
+    if (!cartId) return null
+
+    const cart = await fetchCartById(cartId)
+    // If Shopify pruned the cart (expired/abandoned), clear the stale cookie.
+    if (!cart) clearCartId()
+    return cart
+  },
+)
+
+export const addToCart = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      variantId: v.string(),
+      quantity: v.optional(v.pipe(v.number(), v.integer(), v.minValue(1)), 1),
+    }),
+  )
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const existingCartId = getCartId()
+
+    if (!existingCartId) {
+      const result = await shopifyServerFetch<CartCreateResult>({
+        query: CART_CREATE_MUTATION,
+        variables: {
+          input: {
+            lines: [
+              { merchandiseId: data.variantId, quantity: data.quantity },
+            ],
+          },
+        },
+      })
+      throwIfUserErrors(result.cartCreate.userErrors)
+      const cart = result.cartCreate.cart
+      if (!cart) throw new Error('Shopify returned no cart after create.')
+      setCartId(cart.id)
+      return cart
+    }
+
+    const result = await shopifyServerFetch<CartLinesAddResult>({
+      query: CART_LINES_ADD_MUTATION,
+      variables: {
+        cartId: existingCartId,
+        lines: [{ merchandiseId: data.variantId, quantity: data.quantity }],
+      },
+    })
+    throwIfUserErrors(result.cartLinesAdd.userErrors)
+    const cart = result.cartLinesAdd.cart
+    // Existing cart was pruned between requests — recover by creating fresh.
+    if (!cart) {
+      clearCartId()
+      const createResult = await shopifyServerFetch<CartCreateResult>({
+        query: CART_CREATE_MUTATION,
+        variables: {
+          input: {
+            lines: [{ merchandiseId: data.variantId, quantity: data.quantity }],
+          },
+        },
+      })
+      throwIfUserErrors(createResult.cartCreate.userErrors)
+      const newCart = createResult.cartCreate.cart
+      if (!newCart)
+        throw new Error('Shopify returned no cart after recovery create.')
+      setCartId(newCart.id)
+      return newCart
+    }
+    return cart
+  })
+
+export const updateCartLine = createServerFn({ method: 'POST' })
+  .inputValidator(
+    v.object({
+      lineId: v.string(),
+      quantity: v.pipe(v.number(), v.integer(), v.minValue(0)),
+    }),
+  )
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCartId()
+    if (!cartId) throw new Error('No cart exists to update.')
+
+    const result = await shopifyServerFetch<CartLinesUpdateResult>({
+      query: CART_LINES_UPDATE_MUTATION,
+      variables: {
+        cartId,
+        lines: [{ id: data.lineId, quantity: data.quantity }],
+      },
+    })
+    throwIfUserErrors(result.cartLinesUpdate.userErrors)
+    const cart = result.cartLinesUpdate.cart
+    if (!cart) throw new Error('Shopify returned no cart after update.')
+    return cart
+  })
+
+export const removeCartLine = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ lineId: v.string() }))
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCartId()
+    if (!cartId) throw new Error('No cart exists to remove from.')
+
+    const result = await shopifyServerFetch<CartLinesRemoveResult>({
+      query: CART_LINES_REMOVE_MUTATION,
+      variables: { cartId, lineIds: [data.lineId] },
+    })
+    throwIfUserErrors(result.cartLinesRemove.userErrors)
+    const cart = result.cartLinesRemove.cart
+    if (!cart) throw new Error('Shopify returned no cart after remove.')
+    return cart
+  })
+
+export const applyDiscountCode = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ code: v.pipe(v.string(), v.minLength(1)) }))
+  .handler(async ({ data }): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCartId()
+    if (!cartId) throw new Error('No cart exists to apply a discount to.')
+    const result = await shopifyServerFetch<CartDiscountCodesUpdateResult>({
+      query: CART_DISCOUNT_CODES_UPDATE_MUTATION,
+      variables: { cartId, discountCodes: [data.code] },
+    })
+    throwIfUserErrors(result.cartDiscountCodesUpdate.userErrors)
+    const cart = result.cartDiscountCodesUpdate.cart
+    if (!cart)
+      throw new Error('Shopify returned no cart after discount update.')
+    // Shopify silently drops invalid codes — surface that to the UI.
+    const applied = cart.discountCodes.find(
+      (c) => c.code.toLowerCase() === data.code.toLowerCase(),
+    )
+    if (!applied || !applied.applicable) {
+      throw new CartUserErrorsError([
+        {
+          field: null,
+          message: `Discount code "${data.code}" is not valid or not applicable to this cart.`,
+        },
+      ])
+    }
+    return cart
+  })
+
+export const removeDiscountCode = createServerFn({ method: 'POST' }).handler(
+  async (): Promise<CartDetail> => {
+    setCartResponseHeaders()
+    const cartId = getCartId()
+    if (!cartId) throw new Error('No cart exists.')
+    const result = await shopifyServerFetch<CartDiscountCodesUpdateResult>({
+      query: CART_DISCOUNT_CODES_UPDATE_MUTATION,
+      variables: { cartId, discountCodes: [] },
+    })
+    throwIfUserErrors(result.cartDiscountCodesUpdate.userErrors)
+    const cart = result.cartDiscountCodesUpdate.cart
+    if (!cart) throw new Error('Shopify returned no cart after discount clear.')
+    return cart
+  },
+)