Orders Table

import { dateRanges, type OrdersQuery } from "@/components/blocks/orders-table/orders"

const paymentFilter: Record<string, string> = {
  pending: "pending",
  authorized: "authorized",
  partially_paid: "partially_paid",
  paid: "paid",
  partially_refunded: "partially_refunded",
  refunded: "refunded",
  voided: "voided",
  failed: "expired",
}

const fulfillmentFilter: Record<string, string> = {
  unfulfilled: "unshipped",
  partially_fulfilled: "partial",
  fulfilled: "shipped",
  on_hold: "on_hold",
  scheduled: "scheduled",
}

const rangeDays = { today: 0, "7d": 7, "30d": 30, "90d": 90 } satisfies Record<
  keyof typeof dateRanges,
  number
>

function anyOf(field: string, values: string[] | undefined, map?: Record<string, string>) {
  if (!values || values.length === 0) return null
  const terms = values.map((value) => `${field}:${JSON.stringify(map?.[value] ?? value)}`)
  return terms.length === 1 ? terms[0] : `(${terms.join(" OR ")})`
}

export function toShopifySearch(query: OrdersQuery, now = new Date()) {
  const { filters } = query
  const parts = [
    anyOf("status", filters.status?.map((status) => (status === "archived" ? "closed" : status))),
    anyOf("financial_status", filters.payment, paymentFilter),
    anyOf("fulfillment_status", filters.fulfillment, fulfillmentFilter),
    anyOf("source_name", filters.channel),
    anyOf("tag", filters.tag),
    anyOf("risk_level", filters.risk),
    filters.date
      ? `created_at:>=${new Date(now.getTime() - rangeDays[filters.date] * 86_400_000)
          .toISOString()
          .slice(0, 10)}`
      : null,
    query.search.trim() || null,
  ]
  return parts.filter(Boolean).join(" ")
}

export const ORDERS_QUERY = `#graphql
  query Orders($first: Int, $last: Int, $after: String, $before: String, $query: String, $sortKey: OrderSortKeys, $reverse: Boolean) {
    orders(first: $first, last: $last, after: $after, before: $before, query: $query, sortKey: $sortKey, reverse: $reverse) {
      nodes {
        id
        name
        createdAt
        closedAt
        cancelledAt
        displayFinancialStatus
        displayFulfillmentStatus
        currentTotalPriceSet { shopMoney { amount currencyCode } }
        customer { id displayName email }
        sourceName
        tags
        risk { assessments { riskLevel } }
        shippingLine { title }
        lineItems(first: 50) { nodes { id title sku quantity } }
      }
      pageInfo { hasNextPage hasPreviousPage startCursor endCursor }
    }
    ordersCount(query: $query) { count }
  }
`

export const sortKeys = {
  date: "CREATED_AT",
  order: "ORDER_NUMBER",
  customer: "CUSTOMER_NAME",
  total: "TOTAL_PRICE",
  items: "CREATED_AT",
} as const

export function toShopifyVariables(query: OrdersQuery, pageSize = 20) {
  return {
    first: pageSize,
    query: toShopifySearch(query),
    sortKey: sortKeys[query.sort.key],
    reverse: query.sort.direction === "desc",
  }
}

"use client"

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

import {
  defaultViews,
  ordersQueryFromSearchParams,
  ordersQueryToSearchParams,
  type OrdersQuery,
  type OrdersTableOrder,
} from "@/components/blocks/orders-table/orders"
import { OrdersTable } from "@/components/blocks/orders-table/orders-table"

type OrdersPage = {
  orders: OrdersTableOrder[]
  totalCount: number
  viewCounts: Record<string, number>
  endCursor: string | null
}

async function fetchOrders(query: OrdersQuery, after: string | null) {
  const params = ordersQueryToSearchParams(query)
  if (after) params.set("after", after)
  const response = await fetch(`/api/orders?${params}`)
  if (!response.ok) throw new Error(`Orders didn’t load (${response.status}).`)
  return (await response.json()) as OrdersPage
}

export function ServerOrders() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const query = ordersQueryFromSearchParams(new URLSearchParams(searchParams), defaultViews)
  const cursors = React.useRef(new Map<string, (string | null)[]>())
  const [data, setData] = React.useState<OrdersPage | null>(null)
  const [error, setError] = React.useState<string | null>(null)
  const [attempt, setAttempt] = React.useState(0)

  const key = JSON.stringify({ ...query, page: 0 })
  const page = query.page

  React.useEffect(() => {
    let cancelled = false
    const list = cursors.current.get(key) ?? [null]
    cursors.current.set(key, list)
    const after = list[page - 1] ?? null
    setError(null)
    fetchOrders(JSON.parse(key) as OrdersQuery, after).then(
      (next) => {
        if (cancelled) return
        list[page] = next.endCursor
        setData(next)
      },
      (reason: Error) => !cancelled && setError(reason.message)
    )
    return () => {
      cancelled = true
    }
  }, [key, page, attempt])

  return (
    <OrdersTable
      serverSide
      orders={data?.orders ?? []}
      totalCount={data?.totalCount}
      viewCounts={data?.viewCounts}
      loading={!data && !error}
      error={error ?? undefined}
      onRetry={() => setAttempt((count) => count + 1)}
      query={query}
      onQueryChange={(next) =>
        router.replace(`${pathname}?${ordersQueryToSearchParams(next)}`, { scroll: false })
      }
      onOpenOrder={(order) => router.push(`/orders/${order.id}`)}
    />
  )
}

"use client"

import { useRouter } from "next/navigation"

import type { OrdersBulkAction } from "@/components/blocks/orders-table/bulk-actions"
import type { OrdersTableOrder } from "@/components/blocks/orders-table/orders"
import { OrdersTable, type OrdersBulkResult, type OrdersSelection } from "@/components/blocks/orders-table/orders-table"

type JobResult = {
  succeeded: string[]
  failed: { id: string; code: "ON_HOLD" | "CANCELLED" | "NOT_CAPTURABLE" | "UNKNOWN" }[]
}

const messages: Record<JobResult["failed"][number]["code"], string> = {
  ON_HOLD: "is on hold",
  CANCELLED: "was cancelled",
  NOT_CAPTURABLE: "has no payment to capture",
  UNKNOWN: "hit an unexpected error",
}

async function runBulkAction(
  action: OrdersBulkAction,
  selection: OrdersSelection
): Promise<OrdersBulkResult> {
  const response = await fetch("/api/orders/bulk", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      action,
      ids: selection.allMatching ? undefined : selection.ids,
      query: selection.allMatching ? selection.query : undefined,
    }),
  })
  if (!response.ok) throw new Error("The bulk job couldn’t start. Try again in a minute.")
  const result = (await response.json()) as JobResult
  return {
    succeeded: result.succeeded,
    failed: result.failed.map((item) => ({ id: item.id, message: messages[item.code] })),
  }
}

export function OrdersWithBulkActions({ orders }: { orders: OrdersTableOrder[] }) {
  const router = useRouter()
  return (
    <OrdersTable
      orders={orders}
      onOpenOrder={(order) => router.push(`/orders/${order.id}`)}
      onBulkAction={async (action, selection) => {
        const result = await runBulkAction(action, selection)
        router.refresh()
        return result
      }}
    />
  )
}