Order Detail

"use client"

import * as React from "react"

import type { Fulfillment, FulfillmentStatus, Order, PaymentStatus } from "../order-status/order"
import { OrderDetail, OrderDetailSkeleton } from "@/components/blocks/order-detail/order-detail"
import type { FulfillmentDraft } from "@/components/blocks/order-detail/order-detail-utils"

type ShopifyMoney = { amount: string; currencyCode: string }

type ShopifyOrder = {
  id: string
  name: string
  createdAt: string
  email: string | null
  note: string | null
  tags: string[]
  cancelledAt: string | null
  displayFinancialStatus: string
  displayFulfillmentStatus: string
  sourceName: string | null
  currentSubtotalPriceSet: { presentmentMoney: ShopifyMoney }
  totalShippingPriceSet: { presentmentMoney: ShopifyMoney }
  totalTaxSet: { presentmentMoney: ShopifyMoney }
  totalPriceSet: { presentmentMoney: ShopifyMoney }
  lineItems: {
    nodes: {
      id: string
      title: string
      variantTitle: string | null
      sku: string | null
      quantity: number
      refundableQuantity: number
      unfulfilledQuantity: number
      image: { url: string; altText: string | null } | null
      originalUnitPriceSet: { presentmentMoney: ShopifyMoney }
      product: { id: string } | null
    }[]
  }
  fulfillmentOrders: { nodes: { id: string; status: string }[] }
}

const ORDER_QUERY = `#graphql
  query OrderDetail($id: ID!) {
    order(id: $id) {
      id name createdAt email note tags cancelledAt sourceName
      displayFinancialStatus displayFulfillmentStatus
      currentSubtotalPriceSet { presentmentMoney { amount currencyCode } }
      totalShippingPriceSet { presentmentMoney { amount currencyCode } }
      totalTaxSet { presentmentMoney { amount currencyCode } }
      totalPriceSet { presentmentMoney { amount currencyCode } }
      lineItems(first: 50) {
        nodes {
          id title variantTitle sku quantity refundableQuantity unfulfilledQuantity
          image { url altText }
          originalUnitPriceSet { presentmentMoney { amount currencyCode } }
          product { id }
        }
      }
      fulfillmentOrders(first: 10) { nodes { id status } }
    }
  }
`

const FULFILL_MUTATION = `#graphql
  mutation Fulfill($fulfillment: FulfillmentInput!) {
    fulfillmentCreate(fulfillment: $fulfillment) {
      fulfillment { id status createdAt trackingInfo { company number url } }
      userErrors { field message }
    }
  }
`

const payment: Record<string, PaymentStatus> = {
  PENDING: "pending",
  AUTHORIZED: "authorized",
  PAID: "paid",
  PARTIALLY_PAID: "partially_paid",
  PARTIALLY_REFUNDED: "partially_refunded",
  REFUNDED: "refunded",
  VOIDED: "voided",
}

const fulfillment: Record<string, FulfillmentStatus> = {
  UNFULFILLED: "unfulfilled",
  PARTIALLY_FULFILLED: "partially_fulfilled",
  FULFILLED: "fulfilled",
  ON_HOLD: "on_hold",
  SCHEDULED: "scheduled",
}

async function admin<T>(query: string, variables: Record<string, unknown>): Promise<T> {
  const response = await fetch("/api/shopify/admin", {
    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 fromShopify(order: ShopifyOrder): Order {
  return {
    id: order.id,
    name: order.name,
    createdAt: order.createdAt,
    email: order.email ?? undefined,
    note: order.note ?? undefined,
    tags: order.tags,
    cancelledAt: order.cancelledAt ?? undefined,
    channel: order.sourceName ?? undefined,
    currencyCode: order.totalPriceSet.presentmentMoney.currencyCode,
    subtotal: order.currentSubtotalPriceSet.presentmentMoney,
    shipping: order.totalShippingPriceSet.presentmentMoney,
    tax: order.totalTaxSet.presentmentMoney,
    total: order.totalPriceSet.presentmentMoney,
    discounts: [],
    paymentStatus: payment[order.displayFinancialStatus] ?? "pending",
    fulfillmentStatus: fulfillment[order.displayFulfillmentStatus] ?? "unfulfilled",
    lines: order.lineItems.nodes.map((line) => ({
      id: line.id,
      productId: line.product?.id,
      title: line.title,
      variantTitle: line.variantTitle ?? undefined,
      sku: line.sku ?? undefined,
      image: line.image
        ? { id: line.image.url, src: line.image.url, alt: line.image.altText ?? line.title }
        : undefined,
      quantity: line.quantity,
      price: line.originalUnitPriceSet.presentmentMoney,
      refundedQuantity: line.quantity - line.refundableQuantity,
      fulfilledQuantity: line.refundableQuantity - line.unfulfilledQuantity,
    })),
    fulfillments: [],
    refunds: [],
    events: [],
  }
}

export function ShopifyOrderPage({ orderId }: { orderId: string }) {
  const [order, setOrder] = React.useState<Order | null>(null)
  const [fulfillmentOrderId, setFulfillmentOrderId] = React.useState<string>()

  const load = React.useCallback(async () => {
    const data = await admin<{ order: ShopifyOrder }>(ORDER_QUERY, { id: orderId })
    setOrder(fromShopify(data.order))
    setFulfillmentOrderId(data.order.fulfillmentOrders.nodes.find((item) => item.status === "OPEN")?.id)
  }, [orderId])

  React.useEffect(() => {
    void load()
  }, [load])

  const fulfill = async (_: Order, draft: FulfillmentDraft): Promise<Fulfillment | void> => {
    if (!fulfillmentOrderId) throw new Error("This order has no open fulfillment order.")
    const data = await admin<{
      fulfillmentCreate: { userErrors: { message: string }[] }
    }>(FULFILL_MUTATION, {
      fulfillment: {
        notifyCustomer: draft.notifyCustomer,
        trackingInfo: draft.trackingNumber
          ? { number: draft.trackingNumber, company: draft.carrier || undefined }
          : undefined,
        lineItemsByFulfillmentOrder: [{ fulfillmentOrderId }],
      },
    })
    const error = data.fulfillmentCreate.userErrors[0]
    if (error) throw new Error(error.message)
    await load()
  }

  if (!order) return <OrderDetailSkeleton />

  return (
    <OrderDetail
      order={order}
      timeZone="America/New_York"
      backHref="/orders"
      onFulfill={fulfill}
    />
  )
}

"use client"

import type { Order, OrderEvent } from "../order-status/order"
import { OrderDetail } from "@/components/blocks/order-detail/order-detail"

type Staff = { id: string; name: string; avatar?: string }

async function send<T>(url: string, method: string, body?: unknown): Promise<T> {
  const response = await fetch(url, {
    method,
    headers: { "content-type": "application/json" },
    body: body === undefined ? undefined : JSON.stringify(body),
  })
  if (!response.ok) {
    const problem = (await response.json().catch(() => null)) as { detail?: string } | null
    throw new Error(problem?.detail ?? "Couldn’t reach the server. Try again.")
  }
  return (await response.json()) as T
}

export function OrderWithComments({ order, staff }: { order: Order; staff: Staff }) {
  const base = `/api/orders/${encodeURIComponent(order.id)}/comments`

  return (
    <OrderDetail
      order={order}
      currentUser={{ name: staff.name, avatar: staff.avatar }}
      onComment={async ({ message, attachments }) => {
        const form = new FormData()
        form.set("message", message)
        for (const file of attachments) form.append("files", file)
        const response = await fetch(base, { method: "POST", body: form })
        if (!response.ok) throw new Error("Your comment wasn’t saved. Try again.")
        return (await response.json()) as OrderEvent
      }}
      onEditComment={(event, message) =>
        send<OrderEvent>(`${base}/${event.id}`, "PATCH", { message })
      }
      onDeleteComment={(event) => send(`${base}/${event.id}`, "DELETE")}
      onResendEmail={(event) =>
        send(`/api/orders/${encodeURIComponent(order.id)}/emails/resend`, "POST", { eventId: event.id })
      }
    />
  )
}

import { fromMinorUnits, toMinorUnits } from "../price/money"
import type { Order, PaymentStatus } from "../order-status/order"

type StripeCharge = {
  id: string
  amount: number
  amount_captured: number
  amount_refunded: number
  currency: string
  captured: boolean
  status: "succeeded" | "pending" | "failed"
  failure_message: string | null
  created: number
  payment_method_details: { card?: { brand: string; last4: string } } | null
  balance_transaction: { amount: number; currency: string; exchange_rate: number | null } | null
}

function paymentStatus(charge: StripeCharge): PaymentStatus {
  if (charge.status === "failed") return "failed"
  if (charge.status === "pending") return "pending"
  if (!charge.captured) return "authorized"
  if (charge.amount_refunded >= charge.amount_captured) return "refunded"
  if (charge.amount_refunded > 0) return "partially_refunded"
  return "paid"
}

export function withStripeCharge(order: Order, charge: StripeCharge) {
  const currency = charge.currency.toUpperCase()
  const card = charge.payment_method_details?.card
  const next: Order = {
    ...order,
    paymentStatus: paymentStatus(charge),
    paymentMethod: card
      ? {
          brand: card.brand,
          last4: card.last4,
          label: `${card.brand[0].toUpperCase()}${card.brand.slice(1)} ending in ${card.last4}`,
        }
      : order.paymentMethod,
    events: charge.failure_message
      ? [
          ...order.events,
          {
            id: `${charge.id}-failed`,
            type: "payment_failed",
            at: new Date(charge.created * 1000).toISOString(),
            message: `${card ? `Card ending in ${card.last4}` : "The payment"} was declined: ${charge.failure_message}.`,
          },
        ]
      : order.events,
  }
  const settlement = charge.balance_transaction
  return {
    order: next,
    amountPaid: fromMinorUnits(charge.amount_captured, currency),
    shopCurrency:
      settlement && settlement.currency.toUpperCase() !== currency && settlement.exchange_rate
        ? { currencyCode: settlement.currency.toUpperCase(), rate: settlement.exchange_rate }
        : undefined,
    capturable: charge.captured ? null : fromMinorUnits(charge.amount, currency),
    matchesOrder: toMinorUnits(order.total) === charge.amount,
  }
}