Product Editor

"use client"

import { ProductEditor, type ProductEditorProps } from "@/components/blocks/product-editor/product-editor"
import type { ProductDraft } from "@/components/blocks/product-editor/product-draft"

const productSet = `
  mutation ProductSet($input: ProductSetInput!, $identifier: ProductSetIdentifiers) {
    productSet(input: $input, identifier: $identifier, synchronous: true) {
      product { id updatedAt }
      userErrors { field message code }
    }
  }
`

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

function toProductSetInput(draft: ProductDraft) {
  return {
    title: draft.title,
    descriptionHtml: draft.description,
    handle: draft.handle,
    status: draft.status.toUpperCase(),
    productType: draft.productType,
    vendor: draft.vendor,
    tags: draft.tags,
    seo: { title: draft.seoTitle, description: draft.seoDescription },
    productOptions: draft.options.map((option, position) => ({
      name: option.name,
      position: position + 1,
      values: option.values.map((name) => ({ name })),
    })),
    variants: draft.variants.map((variant) => ({
      id: variant.id.startsWith("gid://") ? variant.id : undefined,
      sku: variant.sku,
      price: variant.price.amount,
      compareAtPrice: variant.compareAtPrice?.amount ?? null,
      optionValues: draft.options.map((option) => ({
        optionName: option.name,
        name: variant.selectedOptions[option.name],
      })),
      inventoryQuantities: Object.entries(variant.quantities).map(([locationId, quantity]) => ({
        locationId,
        name: "available",
        quantity,
      })),
    })),
  }
}

function fieldKey(draft: ProductDraft, error: UserError) {
  const [, , index, field] = error.field ?? []
  const variant = draft.variants[Number(index)]
  if (error.field?.[1] === "variants" && variant) return `variant:${variant.id}:${field === "price" ? "price" : "sku"}`
  return error.field?.[1] ?? "title"
}

const onSave: ProductEditorProps["onSave"] = async (draft, { overwrite }) => {
  const response = await fetch("/api/shopify/admin", {
    method: "POST",
    headers: { "Content-Type": "application/json", "If-Match": overwrite ? "*" : draft.id },
    body: JSON.stringify({ query: productSet, variables: { input: toProductSetInput(draft), identifier: { id: draft.id } } }),
  })
  if (response.status === 409) {
    const latest = (await response.json()) as { author: string; updatedAt: string; product: ProductDraft }
    return { conflict: { author: latest.author, at: latest.updatedAt, value: latest.product } }
  }
  if (!response.ok) throw new Error("Shopify didn’t answer. Try again.")
  const { data } = (await response.json()) as { data: { productSet: { userErrors: UserError[] } } }
  const errors = data.productSet.userErrors
  if (errors.length > 0) {
    return { errors: Object.fromEntries(errors.map((error) => [fieldKey(draft, error), error.message])) }
  }
}

export function ShopifyProductPage({ product }: { product: ProductDraft }) {
  return (
    <ProductEditor
      product={product}
      onSave={onSave}
      locations={[{ id: "gid://shopify/Location/1", name: "Brooklyn studio" }]}
      channels={[{ id: "online-store", name: "Online Store" }]}
      store={{ name: "Halden", domain: "halden.co" }}
    />
  )
}

"use client"

import { useRouter } from "next/navigation"

import { ProductEditor } from "@/components/blocks/product-editor/product-editor"
import type { ProductDraft } from "@/components/blocks/product-editor/product-draft"

async function medusa(path: string, body: unknown) {
  const response = await fetch(`${process.env.NEXT_PUBLIC_MEDUSA_URL}/admin${path}`, {
    method: "POST",
    credentials: "include",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  })
  const json = await response.json()
  if (!response.ok) throw new Error(json.message ?? "Medusa couldn’t save the product.")
  return json
}

export function MedusaProductPage({ product }: { product: ProductDraft }) {
  const router = useRouter()

  return (
    <ProductEditor
      product={product}
      locations={[{ id: "sloc_01", name: "Brooklyn studio" }]}
      channels={[{ id: "sc_01", name: "Webshop" }]}
      store={{ name: "Halden", domain: "halden.co" }}
      onNavigate={(href) => router.push(href)}
      onSave={async (draft) => {
        await medusa(`/products/${draft.id}`, {
          title: draft.title,
          description: draft.description,
          handle: draft.handle,
          status: draft.status === "active" ? "published" : draft.status === "draft" ? "draft" : "rejected",
          tags: draft.tags.map((value) => ({ value })),
          options: draft.options.map((option) => ({ title: option.name, values: option.values })),
        })
        await medusa(`/products/${draft.id}/variants/batch`, {
          update: draft.variants.map((variant) => ({
            id: variant.id,
            sku: variant.sku,
            options: variant.selectedOptions,
            prices: [{ currency_code: variant.price.currencyCode.toLowerCase(), amount: Number(variant.price.amount) }],
          })),
        })
      }}
    />
  )
}

"use client"

import { MediaUploader, type MediaUploadContext } from "@/components/blocks/product-editor/media-uploader"
import type { MediaItem } from "@/components/blocks/product-editor/product-draft"

function put(url: string, file: File, { onProgress, signal }: MediaUploadContext) {
  return new Promise<void>((resolve, reject) => {
    const request = new XMLHttpRequest()
    request.open("PUT", url)
    request.setRequestHeader("Content-Type", file.type)
    request.upload.onprogress = (event) => event.lengthComputable && onProgress(event.loaded / event.total)
    request.onload = () => (request.status < 300 ? resolve() : reject(new Error(`Upload failed with ${request.status}.`)))
    request.onerror = () => reject(new Error("The connection dropped during the upload."))
    signal.addEventListener("abort", () => request.abort())
    request.send(file)
  })
}

async function uploadToS3(file: File, context: MediaUploadContext) {
  const response = await fetch("/api/uploads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: file.name, type: file.type, size: file.size }),
    signal: context.signal,
  })
  if (!response.ok) throw new Error("Couldn’t start the upload.")
  const { uploadUrl, publicUrl, key } = (await response.json()) as {
    uploadUrl: string
    publicUrl: string
    key: string
  }
  await put(uploadUrl, file, context)
  return { id: key, src: publicUrl }
}

export function ProductMedia({
  value,
  onValueChange,
}: {
  value: MediaItem[]
  onValueChange: (value: MediaItem[]) => void
}) {
  return (
    <MediaUploader
      value={value}
      onValueChange={onValueChange}
      onUpload={uploadToS3}
      maxSize={20 * 1024 * 1024}
    />
  )
}