Commerce Dashboard

"use client"

import * as React from "react"

import type { SalesOverviewLoaders } from "../sales-overview/sales-overview"
import type { CommerceData } from "@/components/blocks/commerce-dashboard/commerce"
import { CommerceDashboard, type CommerceShop } from "@/components/blocks/commerce-dashboard/commerce-dashboard"
import { createCommerceStore, type CommerceApi } from "@/components/blocks/commerce-dashboard/store"

async function request<Result>(url: string, init?: RequestInit): Promise<Result> {
  const response = await fetch(url, {
    ...init,
    headers: { "Content-Type": "application/json", ...init?.headers },
  })
  if (!response.ok) {
    const body = (await response.json().catch(() => null)) as { message?: string } | null
    throw new Error(body?.message ?? `The server answered ${response.status}. Try again.`)
  }
  return (await response.json()) as Result
}

const send = (method: string, body: unknown): RequestInit => ({ method, body: JSON.stringify(body) })

const api: Partial<CommerceApi> = {
  fulfillOrder: (order, draft) => request(`/api/orders/${order.id}/fulfillments`, send("POST", draft)),
  refundOrder: (order, refund) => request(`/api/orders/${order.id}/refunds`, send("POST", refund)),
  capturePayment: (order) => request(`/api/orders/${order.id}/capture`, send("POST", {})),
  cancelOrder: (order, options) => request(`/api/orders/${order.id}/cancel`, send("POST", options)),
  updateOrder: (order, patch) => request(`/api/orders/${order.id}`, send("PATCH", patch)),
  bulkOrders: (action, selection) => request("/api/orders/bulk", send("POST", { action, ids: selection.ids })),
  saveProduct: (product) => request(`/api/products/${product.id}`, send("PUT", product)),
  saveInventory: (locationId, adjustments) =>
    request(`/api/locations/${locationId}/adjustments`, send("POST", { adjustments })),
  saveDiscount: (discount) => request(`/api/discounts/${discount.id ?? "new"}`, send("PUT", discount)),
  checkDiscountCode: (code, { signal }) => request(`/api/discounts/check?code=${encodeURIComponent(code)}`, { signal }),
}

const salesLoaders: SalesOverviewLoaders = {
  series: (query, signal) =>
    request(`/api/analytics/sales?${new URLSearchParams({ start: query.range.start, end: query.range.end })}`, { signal }),
}

export function Admin({ shop }: { shop: CommerceShop }) {
  const [store, setStore] = React.useState<ReturnType<typeof createCommerceStore> | null>(null)
  const [error, setError] = React.useState<string | null>(null)

  React.useEffect(() => {
    let active = true
    request<CommerceData>("/api/admin/bootstrap")
      .then((data) => active && setStore(createCommerceStore(data)))
      .catch((reason: Error) => active && setError(reason.message))
    return () => {
      active = false
    }
  }, [])

  if (error) return <p role="alert">{error}</p>
  if (!store) return null

  return (
    <CommerceDashboard
      className="h-svh"
      store={store}
      shop={shop}
      user={{ name: "Maya Chen", role: "Store owner" }}
      salesLoaders={salesLoaders}
      now={new Date().toISOString()}
      api={api}
    />
  )
}

"use client"

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

import type { SalesOverviewLoaders } from "../sales-overview/sales-overview"
import { CommerceDashboard, type CommerceShop } from "@/components/blocks/commerce-dashboard/commerce-dashboard"
import { routeFromPath, routeToPath, type CommerceRouter } from "@/components/blocks/commerce-dashboard/routes"
import type { CommerceStore } from "@/components/blocks/commerce-dashboard/store"

const base = "/admin"

function useAdminRouter(): CommerceRouter {
  const router = useRouter()
  const pathname = usePathname()
  const route = React.useMemo(() => routeFromPath(pathname.slice(base.length)), [pathname])

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

export function AdminShell({
  store,
  shop,
  salesLoaders,
}: {
  store: CommerceStore
  shop: CommerceShop
  salesLoaders: SalesOverviewLoaders
}) {
  const router = useAdminRouter()
  return (
    <CommerceDashboard
      className="h-svh"
      store={store}
      shop={shop}
      user={{ name: "Maya Chen" }}
      salesLoaders={salesLoaders}
      now={new Date().toISOString()}
      router={router}
    />
  )
}

"use client"

import type { InventoryReason } from "../inventory/inventory"
import type { CommerceApi } from "@/components/blocks/commerce-dashboard/store"

type UserError = { field: string[] | null; message: string }

async function shopify<Data>(query: string, variables: Record<string, unknown>) {
  const response = await fetch("/api/shopify/graphql", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ query, variables }),
  })
  if (!response.ok) throw new Error("Shopify didn’t answer. Try again in a moment.")
  const { data, errors } = (await response.json()) as { data: Data; errors?: { message: string }[] }
  if (errors?.length) throw new Error(errors[0].message)
  return data
}

function assertNoErrors(result: { userErrors: UserError[] }) {
  if (result.userErrors.length > 0) throw new Error(result.userErrors[0].message)
}

const reasons: Record<InventoryReason, string> = {
  correction: "correction",
  received: "received",
  damaged: "damaged",
  theft_or_loss: "theft_or_loss",
  returned: "restock",
  cycle_count: "cycle_count_available",
}

export const shopifyApi: Partial<CommerceApi> = {
  async fulfillOrder(order, draft) {
    const data = await shopify<{ fulfillmentCreate: { userErrors: UserError[] } }>(
      `mutation ($fulfillment: FulfillmentInput!) {
        fulfillmentCreate(fulfillment: $fulfillment) { fulfillment { id } userErrors { field message } }
      }`,
      {
        fulfillment: {
          notifyCustomer: draft.notifyCustomer,
          trackingInfo: draft.trackingNumber ? { number: draft.trackingNumber, company: draft.carrier || undefined } : undefined,
          lineItemsByFulfillmentOrder: [
            {
              fulfillmentOrderId: order.id,
              fulfillmentOrderLineItems: draft.lines.map((line) => ({ id: line.lineId, quantity: line.quantity })),
            },
          ],
        },
      }
    )
    assertNoErrors(data.fulfillmentCreate)
  },
  async refundOrder(order, refund) {
    const data = await shopify<{ refundCreate: { userErrors: UserError[] } }>(
      `mutation ($input: RefundInput!) {
        refundCreate(input: $input) { refund { id } userErrors { field message } }
      }`,
      {
        input: {
          orderId: order.id,
          note: refund.note || undefined,
          notify: refund.notify,
          shipping: { amount: refund.shipping.amount },
          refundLineItems: refund.lines.map((line) => ({
            lineItemId: line.lineId,
            quantity: line.quantity,
            restockType: line.restock ? "RETURN" : "NO_RESTOCK",
            locationId: line.restock ? refund.restockLocationId : undefined,
          })),
          transactions: refund.transactions.map((transaction) => ({
            parentId: transaction.paymentId,
            amount: transaction.amount.amount,
            gateway: "shopify_payments",
            kind: "REFUND",
            orderId: order.id,
          })),
        },
      }
    )
    assertNoErrors(data.refundCreate)
  },
  async capturePayment(order) {
    const data = await shopify<{ orderCapture: { userErrors: UserError[] } }>(
      `mutation ($input: OrderCaptureInput!) {
        orderCapture(input: $input) { transaction { id } userErrors { field message } }
      }`,
      { input: { id: order.id, amount: order.total.amount, currency: order.currencyCode } }
    )
    assertNoErrors(data.orderCapture)
  },
  async updateOrder(order, patch) {
    if (patch.note === undefined && patch.tags === undefined) return
    const data = await shopify<{ orderUpdate: { userErrors: UserError[] } }>(
      `mutation ($input: OrderInput!) {
        orderUpdate(input: $input) { order { id } userErrors { field message } }
      }`,
      { input: { id: order.id, note: patch.note, tags: patch.tags } }
    )
    assertNoErrors(data.orderUpdate)
  },
  async saveInventory(locationId, adjustments) {
    const data = await shopify<{ inventoryAdjustQuantities: { userErrors: UserError[] } }>(
      `mutation ($input: InventoryAdjustQuantitiesInput!) {
        inventoryAdjustQuantities(input: $input) { userErrors { field message } }
      }`,
      {
        input: {
          name: "available",
          reason: reasons[adjustments[0]?.reason ?? "correction"],
          changes: adjustments.map((adjustment) => ({
            inventoryItemId: adjustment.itemId,
            locationId,
            delta: adjustment.delta,
          })),
        },
      }
    )
    assertNoErrors(data.inventoryAdjustQuantities)
  },
  async saveProduct(product) {
    const data = await shopify<{ productUpdate: { userErrors: UserError[] } }>(
      `mutation ($product: ProductUpdateInput!) {
        productUpdate(product: $product) { product { id } userErrors { field message } }
      }`,
      {
        product: {
          id: product.id,
          title: product.title,
          descriptionHtml: product.description,
          status: product.status.toUpperCase(),
          productType: product.productType,
          tags: product.tags,
          seo: { title: product.seoTitle, description: product.seoDescription },
        },
      }
    )
    assertNoErrors(data.productUpdate)
  },
}