@tanstack/create 0.65.0 → 0.67.0

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.addresses.tsx.ejs

@@ -0,0 +1,67 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { createFileRoute } from '@tanstack/react-router'
+
+import { getAddresses } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account/addresses')({
+  loader: () => getAddresses(),
+  component: AddressesRoute,
+})
+
+function AddressesRoute() {
+  const { addresses, defaultAddressId } = Route.useLoaderData()
+
+  if (addresses.length === 0) {
+    return (
+      <div className="space-y-4">
+        <h2 className="text-2xl font-medium tracking-tight">Addresses</h2>
+        <div className="rounded-2xl border border-dashed border-[var(--storefront-line)] px-6 py-16 text-center text-[var(--storefront-fg-muted)]">
+          No saved addresses yet. Addresses you use at checkout will appear here.
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-medium tracking-tight">Addresses</h2>
+      <ul className="grid gap-4 sm:grid-cols-2">
+        {addresses.map((address) => (
+          <li
+            key={address.id}
+            className="space-y-1 rounded-2xl border border-[var(--storefront-line)] p-4 text-sm"
+          >
+            <p className="font-medium">
+              {[address.firstName, address.lastName].filter(Boolean).join(' ')}
+              {address.id === defaultAddressId && (
+                <span className="ml-2 rounded-full bg-[var(--storefront-line)]/60 px-2 py-0.5 text-xs">
+                  Default
+                </span>
+              )}
+            </p>
+            <p className="text-[var(--storefront-fg-muted)]">
+              {address.address1}
+              {address.address2 && (
+                <>
+                  <br />
+                  {address.address2}
+                </>
+              )}
+              <br />
+              {[address.city, address.zoneCode, address.zip]
+                .filter(Boolean)
+                .join(', ')}
+              <br />
+              {address.territoryCode}
+            </p>
+            {address.phoneNumber && (
+              <p className="text-[var(--storefront-fg-muted)]">
+                {address.phoneNumber}
+              </p>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.callback.tsx.ejs

@@ -0,0 +1,45 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import * as v from 'valibot'
+
+import { completeLogin } from '#/server/shopify/customer.functions'
+
+const CallbackSearch = v.object({
+  code: v.optional(v.string()),
+  state: v.optional(v.string()),
+  error: v.optional(v.string()),
+  error_description: v.optional(v.string()),
+})
+
+export const Route = createFileRoute('/shop/account/callback')({
+  validateSearch: (search) => v.parse(CallbackSearch, search),
+  beforeLoad: async ({ search }) => {
+    if (search.error || !search.code || !search.state) {
+      return { error: search.error_description ?? search.error ?? 'Missing OAuth code/state.' }
+    }
+    try {
+      const { redirectAfter } = await completeLogin({
+        data: { code: search.code, state: search.state },
+      })
+      throw redirect({ to: redirectAfter || '/shop/account' })
+    } catch (err) {
+      if (err && typeof err === 'object' && 'isRedirect' in err) throw err
+      return { error: err instanceof Error ? err.message : String(err) }
+    }
+  },
+  loader: ({ context }) => ({ error: context.error }),
+  component: CallbackRoute,
+})
+
+function CallbackRoute() {
+  const { error } = Route.useLoaderData()
+  if (error) {
+    return (
+      <div className="mx-auto max-w-xl space-y-3 rounded-2xl border border-red-500/40 p-8 text-center">
+        <h2 className="text-xl font-medium">Sign-in failed</h2>
+        <p className="text-sm text-[var(--storefront-fg-muted)]">{error}</p>
+      </div>
+    )
+  }
+  return null
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.index.tsx.ejs

@@ -0,0 +1,70 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+import { Money } from '#/components/shop/money'
+import { getOrders } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account/')({
+  loader: () => getOrders({ data: { first: 5 } }),
+  component: AccountOverview,
+})
+
+function AccountOverview() {
+  const orders = Route.useLoaderData()
+  const { customer } = Route.useRouteContext()
+
+  return (
+    <div className="space-y-10">
+      <header className="space-y-1">
+        <p className="text-sm uppercase tracking-wider text-[var(--storefront-fg-muted)]">
+          Welcome back
+        </p>
+        <h2 className="text-3xl font-medium tracking-tight">
+          {customer.firstName ?? customer.emailAddress?.emailAddress ?? 'Customer'}
+        </h2>
+      </header>
+
+      <section className="space-y-4">
+        <div className="flex items-baseline justify-between">
+          <h3 className="text-lg font-medium">Recent orders</h3>
+          <Link
+            to="/shop/account/orders"
+            className="text-sm underline underline-offset-4"
+          >
+            View all
+          </Link>
+        </div>
+        {orders.nodes.length === 0 ? (
+          <p className="text-[var(--storefront-fg-muted)]">No orders yet.</p>
+        ) : (
+          <ul className="divide-y divide-[var(--storefront-line)] rounded-2xl border border-[var(--storefront-line)]">
+            {orders.nodes.map((order) => (
+              <li
+                key={order.id}
+                className="flex items-center justify-between gap-4 px-4 py-3"
+              >
+                <div>
+                  <Link
+                    to="/shop/account/orders/$id"
+                    params={{ id: encodeURIComponent(order.id) }}
+                    className="font-medium underline-offset-4 hover:underline"
+                  >
+                    {order.name}
+                  </Link>
+                  <p className="text-xs text-[var(--storefront-fg-muted)]">
+                    {new Date(order.processedAt).toLocaleDateString()} ·{' '}
+                    {order.fulfillmentStatus ?? 'pending'}
+                  </p>
+                </div>
+                <Money
+                  amount={order.totalPrice.amount}
+                  currencyCode={order.totalPrice.currencyCode}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.login.tsx.ejs

@@ -0,0 +1,59 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { useEffect, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import * as v from 'valibot'
+
+import { isCustomerAccountConfigured } from '#/server/shopify/env'
+import { startLogin } from '#/server/shopify/customer.functions'
+
+const LoginSearch = v.object({ redirect: v.optional(v.string(), '/shop/account') })
+
+export const Route = createFileRoute('/shop/account/login')({
+  validateSearch: (search) => v.parse(LoginSearch, search),
+  loader: () => ({ configured: isCustomerAccountConfigured() }),
+  component: LoginRoute,
+})
+
+function LoginRoute() {
+  const { redirect } = Route.useSearch()
+  const { configured } = Route.useLoaderData()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!configured) return
+    startLogin({ data: { redirectAfter: redirect } })
+      .then(({ authorizationUrl }) => {
+        window.location.assign(authorizationUrl)
+      })
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+  }, [configured, redirect])
+
+  if (!configured) {
+    return (
+      <div className="mx-auto max-w-xl space-y-3 rounded-2xl border border-[var(--storefront-line)] p-8 text-center">
+        <h2 className="text-xl font-medium">Customer accounts not configured</h2>
+        <p className="text-sm text-[var(--storefront-fg-muted)]">
+          Set <code>SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID</code>,{' '}
+          <code>SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID</code>, and{' '}
+          <code>SHOPIFY_SESSION_SECRET</code> in <code>.env.local</code>, then
+          register the redirect URI in your Shopify admin.
+        </p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-xl space-y-3 rounded-2xl border border-red-500/40 p-8 text-center">
+        <h2 className="text-xl font-medium">Couldn't start sign-in</h2>
+        <p className="text-sm text-[var(--storefront-fg-muted)]">{error}</p>
+      </div>
+    )
+  }
+
+  return (
+    <p className="py-16 text-center text-[var(--storefront-fg-muted)]">
+      Redirecting to Shopify…
+    </p>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.logout.tsx.ejs

@@ -0,0 +1,16 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+import { logout } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account/logout')({
+  beforeLoad: async () => {
+    const { endSessionUrl } = await logout()
+    if (endSessionUrl) {
+      // Bounce through Shopify's end-session endpoint to clear their session too.
+      throw redirect({ href: endSessionUrl })
+    }
+    throw redirect({ to: '/shop' })
+  },
+  component: () => null,
+})

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.orders.$id.tsx.ejs

@@ -0,0 +1,126 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+import { Money } from '#/components/shop/money'
+import { ShopImage } from '#/components/shop/shop-image'
+import { getOrder } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account/orders/$id')({
+  loader: async ({ params }) => {
+    const order = await getOrder({ data: { id: decodeURIComponent(params.id) } })
+    if (!order) throw notFound()
+    return { order }
+  },
+  component: OrderDetailRoute,
+})
+
+function OrderDetailRoute() {
+  const { order } = Route.useLoaderData()
+
+  return (
+    <article className="space-y-8">
+      <header className="space-y-1">
+        <h2 className="text-2xl font-medium tracking-tight">{order.name}</h2>
+        <p className="text-sm text-[var(--storefront-fg-muted)]">
+          Placed {new Date(order.processedAt).toLocaleDateString()} ·{' '}
+          {order.fulfillmentStatus ?? 'pending'}
+        </p>
+      </header>
+
+      <ul className="divide-y divide-[var(--storefront-line)] rounded-2xl border border-[var(--storefront-line)]">
+        {order.lineItems.nodes.map((line) => (
+          <li key={line.id} className="flex items-center gap-4 px-4 py-3">
+            <ShopImage
+              src={line.image?.url}
+              alt={line.image?.altText ?? line.title}
+              width={64}
+              height={80}
+              className="h-20 w-16 rounded-md object-cover"
+            />
+            <div className="flex-1">
+              <p className="font-medium">{line.title}</p>
+              {line.variantTitle && (
+                <p className="text-xs text-[var(--storefront-fg-muted)]">
+                  {line.variantTitle}
+                </p>
+              )}
+              <p className="text-xs text-[var(--storefront-fg-muted)]">
+                Qty {line.quantity}
+              </p>
+            </div>
+            <Money
+              amount={line.price.amount}
+              currencyCode={line.price.currencyCode}
+            />
+          </li>
+        ))}
+      </ul>
+
+      <div className="grid gap-2 rounded-2xl border border-[var(--storefront-line)] p-4 text-sm">
+        {order.subtotal && (
+          <div className="flex justify-between">
+            <span className="text-[var(--storefront-fg-muted)]">Subtotal</span>
+            <Money
+              amount={order.subtotal.amount}
+              currencyCode={order.subtotal.currencyCode}
+            />
+          </div>
+        )}
+        {order.totalShipping && (
+          <div className="flex justify-between">
+            <span className="text-[var(--storefront-fg-muted)]">Shipping</span>
+            <Money
+              amount={order.totalShipping.amount}
+              currencyCode={order.totalShipping.currencyCode}
+            />
+          </div>
+        )}
+        {order.totalTax && (
+          <div className="flex justify-between">
+            <span className="text-[var(--storefront-fg-muted)]">Tax</span>
+            <Money
+              amount={order.totalTax.amount}
+              currencyCode={order.totalTax.currencyCode}
+            />
+          </div>
+        )}
+        <div className="flex justify-between border-t border-[var(--storefront-line)] pt-2 font-medium">
+          <span>Total</span>
+          <Money
+            amount={order.totalPrice.amount}
+            currencyCode={order.totalPrice.currencyCode}
+          />
+        </div>
+      </div>
+
+      {order.shippingAddress && (
+        <div className="space-y-1 text-sm">
+          <h3 className="font-medium">Shipping address</h3>
+          <p className="text-[var(--storefront-fg-muted)]">
+            {[order.shippingAddress.firstName, order.shippingAddress.lastName]
+              .filter(Boolean)
+              .join(' ')}
+            <br />
+            {order.shippingAddress.address1}
+            {order.shippingAddress.address2 && (
+              <>
+                <br />
+                {order.shippingAddress.address2}
+              </>
+            )}
+            <br />
+            {[
+              order.shippingAddress.city,
+              order.shippingAddress.zoneCode,
+              order.shippingAddress.zip,
+            ]
+              .filter(Boolean)
+              .join(', ')}
+            <br />
+            {order.shippingAddress.territoryCode}
+          </p>
+        </div>
+      )}
+    </article>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/routes/shop.account.orders.tsx.ejs

@@ -0,0 +1,50 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { Link, createFileRoute } from '@tanstack/react-router'
+
+import { Money } from '#/components/shop/money'
+import { getOrders } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account/orders/')({
+  loader: () => getOrders({ data: { first: 50 } }),
+  component: OrdersRoute,
+})
+
+function OrdersRoute() {
+  const orders = Route.useLoaderData()
+  if (orders.nodes.length === 0) {
+    return (
+      <div className="rounded-2xl border border-dashed border-[var(--storefront-line)] px-6 py-16 text-center">
+        <p className="text-[var(--storefront-fg-muted)]">No orders yet.</p>
+      </div>
+    )
+  }
+  return (
+    <div className="space-y-4">
+      <h2 className="text-2xl font-medium tracking-tight">Orders</h2>
+      <ul className="divide-y divide-[var(--storefront-line)] rounded-2xl border border-[var(--storefront-line)]">
+        {orders.nodes.map((order) => (
+          <li key={order.id} className="flex items-center justify-between gap-4 px-4 py-4">
+            <div>
+              <Link
+                to="/shop/account/orders/$id"
+                params={{ id: encodeURIComponent(order.id) }}
+                className="font-medium underline-offset-4 hover:underline"
+              >
+                {order.name}
+              </Link>
+              <p className="text-xs text-[var(--storefront-fg-muted)]">
+                {new Date(order.processedAt).toLocaleDateString()} ·{' '}
+                {order.fulfillmentStatus ?? 'pending'} ·{' '}
+                {order.financialStatus ?? '—'}
+              </p>
+            </div>
+            <Money
+              amount={order.totalPrice.amount}
+              currencyCode={order.totalPrice.currencyCode}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

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

@@ -0,0 +1,34 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
+
+import { AccountNav } from '#/components/shop/account-nav'
+import { getCustomer } from '#/server/shopify/customer.functions'
+
+export const Route = createFileRoute('/shop/account')({
+  beforeLoad: async ({ location }) => {
+    const customer = await getCustomer()
+    if (!customer) {
+      throw redirect({
+        to: '/shop/account/login',
+        search: { redirect: location.href },
+      })
+    }
+    return { customer }
+  },
+  loader: ({ context }) => ({ customer: context.customer }),
+  component: AccountLayout,
+})
+
+function AccountLayout() {
+  return (
+    <div className="grid gap-10 lg:grid-cols-[200px_1fr]">
+      <aside>
+        <h1 className="mb-4 text-xl font-medium">Account</h1>
+        <AccountNav />
+      </aside>
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  )
+}

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

@@ -0,0 +1,45 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { CartLineItem } from '#/components/shop/cart-line-item'
+import { CartSummary } from '#/components/shop/cart-summary'
+import { EmptyState } from '#/components/shop/empty-state'
+import { CART_QUERY_KEY, useCart } from '#/hooks/use-cart'
+import { getCart } from '#/server/shopify/cart.functions'
+
+export const Route = createFileRoute('/shop/cart')({
+  // QueryClient is always in context — the shopify add-on dependsOn tanstack-query.
+  loader: ({ context }) =>
+    context.queryClient.ensureQueryData({
+      queryKey: CART_QUERY_KEY,
+      queryFn: () => getCart(),
+    }),
+  component: CartRoute,
+})
+
+function CartRoute() {
+  const { cart } = useCart()
+
+  if (!cart || cart.lines.nodes.length === 0) {
+    return (
+      <EmptyState
+        title="Your cart is empty"
+        description="Looks like you haven't added anything yet. Browse the shop to find something."
+        cta={{ label: 'Browse the shop', to: '/shop' }}
+      />
+    )
+  }
+
+  return (
+    <div className="grid gap-10 lg:grid-cols-[1.6fr_1fr]">
+      <section>
+        <h1 className="mb-6 text-3xl font-medium tracking-tight">Cart</h1>
+        <ul className="border-t border-[var(--storefront-line)]">
+          {cart.lines.nodes.map((line) => (
+            <CartLineItem key={line.id} line={line} />
+          ))}
+        </ul>
+      </section>
+      <CartSummary cart={cart} />
+    </div>
+  )
+}

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

@@ -0,0 +1,66 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+
+import { ProductGrid } from '#/components/shop/product-grid'
+import { ShopImage } from '#/components/shop/shop-image'
+import { getCollection } from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/shop/collections/$handle')({
+  loader: async ({ params }) => {
+    const collection = await getCollection({
+      data: { handle: params.handle, first: 24 },
+    })
+    if (!collection) throw notFound()
+    return { collection }
+  },
+  head: ({ loaderData }) => ({
+    meta: loaderData
+      ? [
+          {
+            title: loaderData.collection.seo.title ?? loaderData.collection.title,
+          },
+          {
+            name: 'description',
+            content:
+              loaderData.collection.seo.description ??
+              loaderData.collection.description ??
+              '',
+          },
+        ]
+      : [],
+  }),
+  component: CollectionRoute,
+})
+
+function CollectionRoute() {
+  const { collection } = Route.useLoaderData()
+
+  return (
+    <div className="space-y-10">
+      <header className="space-y-4">
+        {collection.image && (
+          <ShopImage
+            src={collection.image.url}
+            alt={collection.image.altText ?? collection.title}
+            width={1400}
+            height={500}
+            loading="eager"
+            sizes="100vw"
+            className="aspect-[14/5] w-full rounded-lg object-cover"
+          />
+        )}
+        <div className="space-y-2">
+          <h1 className="text-3xl font-medium tracking-tight">
+            {collection.title}
+          </h1>
+          {collection.description && (
+            <p className="max-w-2xl text-[var(--storefront-fg-muted)]">
+              {collection.description}
+            </p>
+          )}
+        </div>
+      </header>
+
+      <ProductGrid products={collection.products.nodes} />
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { ProductGrid } from '#/components/shop/product-grid'
+import {
+  getProducts,
+  getShop,
+} from '#/server/shopify/catalog.functions'
+
+export const Route = createFileRoute('/shop/')({
+  loader: async () => {
+    const [shop, page] = await Promise.all([
+      getShop(),
+      getProducts({ data: { first: 24, sortKey: 'BEST_SELLING' } }),
+    ])
+    return { shop, products: page.nodes }
+  },
+  component: ShopIndex,
+})
+
+function ShopIndex() {
+  const { shop, products } = Route.useLoaderData()
+
+  return (
+    <div className="space-y-12">
+      <header className="space-y-3">
+        <h1 className="text-4xl font-medium tracking-tight">{shop.name}</h1>
+        {shop.description && (
+          <p className="max-w-2xl text-lg text-[var(--storefront-fg-muted)]">
+            {shop.description}
+          </p>
+        )}
+      </header>
+      <ProductGrid products={products} />
+    </div>
+  )
+}

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

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