@jytextiles/medusa-plugin-faire-store-sync 0.2.6 → 0.2.8

package/.medusa/server/src/admin/index.mjs

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { defineWidgetConfig, defineRouteConfig } from "@medusajs/admin-sdk";
-import { Container, Heading, Text, StatusBadge, Alert, Tooltip, Button, createDataTableColumnHelper, toast, createDataTableFilterHelper, useDataTable, Skeleton, DropdownMenu, DataTable, Drawer, Label, Input, Toaster, FocusModal, Badge, IconButton, Switch, clx } from "@medusajs/ui";
+import { toast, Container, Heading, Text, StatusBadge, Alert, Badge, Button, Tooltip, Drawer, Input, clx, createDataTableColumnHelper, createDataTableFilterHelper, useDataTable, Skeleton, DropdownMenu, DataTable, Label, Toaster, FocusModal, Switch, Select, IconButton } from "@medusajs/ui";
 import { useQueryClient, useQuery, useMutation, keepPreviousData } from "@tanstack/react-query";
+import { useState, useMemo, useEffect } from "react";
 import Medusa from "@medusajs/js-sdk";
 import { BuildingStorefront, ChevronDownMini, EllipsisHorizontal, ArrowPath, ArrowUpRightOnBox } from "@medusajs/icons";
-import { useState, useEffect, useMemo } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, Outlet, useParams, useSearchParams } from "react-router-dom";
 const sdk = new Medusa({
   baseUrl: "/",
   auth: {
@@ -60,6 +60,9 @@ const faireApi = {
   getSync: (id) => sdk.client.fetch(`/admin/faire/syncs/${id}`),
   retrySync: (id) => sdk.client.fetch(`/admin/faire/syncs/${id}`, { method: "POST" }),
   brand: () => sdk.client.fetch("/admin/faire/brand"),
+  taxonomy: () => sdk.client.fetch(
+    "/admin/faire/taxonomy"
+  ),
   products: (opts = {}) => {
     const query = {};
     if (opts.limit !== void 0) query.limit = String(opts.limit);
@@ -68,6 +71,7 @@ const faireApi = {
     return sdk.client.fetch("/admin/faire/products", { query });
   }
 };
+const MAX_RENDERED = 60;
 const badgeColor = (status) => {
   switch (status) {
     case "synced":
@@ -83,7 +87,7 @@ const badgeColor = (status) => {
   }
 };
 const FaireProductWidget = ({ data }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const queryClient = useQueryClient();
   const productKey = ["faire", "product-status", data.id];
   const statusQuery = useQuery({
@@ -126,6 +130,45 @@ const FaireProductWidget = ({ data }) => {
     status: latest.status
   } : null;
   const notReady = connected && readiness && !readiness.ready_to_publish;
+  const metadata = data.metadata || {};
+  const productType = (_d = data.type) == null ? void 0 : _d.value;
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerSearch, setPickerSearch] = useState("");
+  const [pinnedOverride, setPinnedOverride] = useState(
+    void 0
+  );
+  const taxonomyQuery = useQuery({
+    queryKey: ["faire", "taxonomy"],
+    enabled: pickerOpen,
+    queryFn: async () => (await faireApi.taxonomy()).taxonomy ?? []
+  });
+  const taxonomy = taxonomyQuery.data ?? [];
+  const pinnedId = pinnedOverride !== void 0 ? pinnedOverride ?? void 0 : metadata.faire_taxonomy_type_id;
+  const pinnedName = useMemo(() => {
+    var _a2;
+    if (!pinnedId) return void 0;
+    if (!/^tt_/.test(String(pinnedId))) return String(pinnedId);
+    return (_a2 = taxonomy.find((t) => t.id === pinnedId)) == null ? void 0 : _a2.name;
+  }, [pinnedId, taxonomy]);
+  const resolvedSource = pinnedId ? { label: pinnedName || String(pinnedId), from: "pinned" } : metadata.faire_category ? { label: String(metadata.faire_category), from: "metadata" } : productType ? { label: productType, from: "type" } : { label: "Account fallback", from: "fallback" };
+  const filteredTaxonomy = useMemo(() => {
+    const q = pickerSearch.trim().toLowerCase();
+    const list = q ? taxonomy.filter((t) => t.name.toLowerCase().includes(q)) : taxonomy;
+    return list.slice(0, MAX_RENDERED);
+  }, [taxonomy, pickerSearch]);
+  const saveCategory = useMutation({
+    mutationFn: (value) => sdk.admin.product.update(data.id, {
+      metadata: { ...metadata, faire_taxonomy_type_id: value }
+    }),
+    onSuccess: (_res, value) => {
+      setPinnedOverride(value);
+      queryClient.invalidateQueries({ queryKey: ["product", data.id] });
+      setPickerOpen(false);
+      setPickerSearch("");
+      toast.success(value ? "Faire category set" : "Faire category cleared");
+    },
+    onError: (err) => toast.error("Failed to save category", { description: err == null ? void 0 : err.message })
+  });
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -152,6 +195,25 @@ const FaireProductWidget = ({ data }) => {
           }
         )
       ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border px-3 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: "Faire category" }),
+            /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: resolvedSource.from === "fallback" ? "orange" : "grey", children: resolvedSource.from === "pinned" ? "Pinned" : resolvedSource.from === "type" ? "From Type" : resolvedSource.from === "metadata" ? "Metadata" : "Fallback" })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: resolvedSource.label })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            disabled: !connected,
+            onClick: () => setPickerOpen(true),
+            children: pinnedId ? "Change" : "Set category"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(
         Tooltip,
         {
@@ -168,7 +230,68 @@ const FaireProductWidget = ({ data }) => {
           )
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(Drawer, { open: pickerOpen, onOpenChange: setPickerOpen, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+      /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+        /* @__PURE__ */ jsx(Drawer.Title, { children: "Pick a Faire category" }),
+        /* @__PURE__ */ jsx(Drawer.Description, { children: "Search Faire's product taxonomy and pin an exact category to this product." })
+      ] }),
+      /* @__PURE__ */ jsxs(Drawer.Body, { className: "flex flex-col gap-3 overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            autoFocus: true,
+            placeholder: "Search categories…",
+            value: pickerSearch,
+            onChange: (e) => setPickerSearch(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 overflow-y-auto", children: [
+          taxonomyQuery.isLoading ? /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle px-1 py-2", children: "Loading categories…" }) : filteredTaxonomy.length === 0 ? /* @__PURE__ */ jsxs(Text, { size: "small", className: "text-ui-fg-subtle px-1 py-2", children: [
+            "No categories match “",
+            pickerSearch,
+            "”."
+          ] }) : filteredTaxonomy.map((t) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => saveCategory.mutate(t.id),
+              disabled: saveCategory.isPending,
+              className: clx(
+                "flex items-center justify-between rounded-md px-3 py-2 text-left text-sm",
+                "hover:bg-ui-bg-base-hover",
+                t.id === pinnedId && "bg-ui-bg-highlight"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: t.name }),
+                t.id === pinnedId && /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "green", children: "Current" })
+              ]
+            },
+            t.id
+          )),
+          !taxonomyQuery.isLoading && taxonomy.length > filteredTaxonomy.length && /* @__PURE__ */ jsxs(Text, { size: "xsmall", className: "text-ui-fg-muted px-1 py-1", children: [
+            "Showing ",
+            filteredTaxonomy.length,
+            " of ",
+            taxonomy.length,
+            " — refine your search to narrow down."
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
+        pinnedId && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => saveCategory.mutate(null),
+            isLoading: saveCategory.isPending,
+            children: "Clear"
+          }
+        ),
+        /* @__PURE__ */ jsx(Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Cancel" }) })
+      ] })
+    ] }) })
   ] });
 };
 defineWidgetConfig({
@@ -336,7 +459,8 @@ const FaireSettingsPage = () => {
       /* @__PURE__ */ jsxs(Container, { className: "p-0", children: [
         /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }) }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 px-6 pb-6", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) })
-      ] })
+      ] }),
+      /* @__PURE__ */ jsx(Outlet, {})
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
@@ -464,6 +588,7 @@ const FaireSettingsPage = () => {
         )
       ] })
     ] }) }),
+    /* @__PURE__ */ jsx(Outlet, {}),
     /* @__PURE__ */ jsx(Toaster, {})
   ] });
 };
@@ -686,10 +811,7 @@ const FaireBulkPage = () => {
     search: { state: search, onSearchChange: setSearch }
   });
   return /* @__PURE__ */ jsxs(RouteFocusModal, { prev: "/settings/faire", children: [
-    /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Heading, { children: "Bulk sync products to Faire" }),
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: "Select products (or all matching) and push them to Faire as a background sync via the command bar." })
-    ] }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Bulk sync" }) }) }),
     /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden p-0", children: /* @__PURE__ */ jsxs(DataTable, { instance: table, children: [
       /* @__PURE__ */ jsxs(DataTable.Toolbar, { className: "flex flex-col gap-y-3 border-b px-6 py-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2 md:flex-row md:items-center md:justify-between", children: [
@@ -729,6 +851,22 @@ const FaireBulkPage = () => {
                 },
                 children: selectAllMatching ? `All ${count} selected` : `Select all ${count}`
               }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                onClick: () => {
+                  if (!connected) {
+                    toast.error("Faire is not connected");
+                    return;
+                  }
+                  pushMutation.mutate();
+                },
+                disabled: !connected || targetCount === 0,
+                isLoading: pushMutation.isPending,
+                children: "Push to Faire"
+              }
             )
           ] })
         ] }),
@@ -777,127 +915,14 @@ const FaireBulkPage = () => {
 const handle$2 = {
   breadcrumb: () => "Bulk sync"
 };
-const PARENT$1 = "/settings/faire";
-const STATUS_COLORS = {
-  success: "green",
-  failed: "red",
-  draft: "orange",
-  pending: "grey",
-  syncing: "grey"
-};
-const FaireSyncDetailPage = () => {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const [record, setRecord] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [retrying, setRetrying] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!id) return;
-    setLoading(true);
-    faireApi.getSync(id).then((res) => {
-      setRecord(res.sync || res);
-    }).catch((err) => setError(err.message || "Failed to load sync record")).finally(() => setLoading(false));
-  }, [id]);
-  const handleRetry = async () => {
-    if (!record) return;
-    setRetrying(true);
-    setError(null);
-    try {
-      await faireApi.retrySync(record.id);
-      const updated = await faireApi.getSync(record.id).catch(() => null);
-      if (updated) setRecord(updated.sync || updated);
-    } catch (err) {
-      setError(err.message || "Retry failed");
-    } finally {
-      setRetrying(false);
-    }
-  };
-  const warnings = (record == null ? void 0 : record.error_message) ? record.error_message.split(" | ") : [];
-  return /* @__PURE__ */ jsxs(RouteFocusModal, { prev: PARENT$1, children: [
-    /* @__PURE__ */ jsxs(RouteFocusModal.Header, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Sync record" }),
-        record && /* @__PURE__ */ jsx(StatusBadge, { color: STATUS_COLORS[record.status] || "grey", children: record.status })
-      ] }),
-      record && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", disabled: retrying, children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
-        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-          /* @__PURE__ */ jsxs(
-            DropdownMenu.Item,
-            {
-              className: "gap-x-2",
-              onClick: handleRetry,
-              disabled: retrying,
-              children: [
-                /* @__PURE__ */ jsx(ArrowPath, { className: "text-ui-fg-subtle" }),
-                retrying ? "Re-syncing…" : "Re-sync product"
-              ]
-            }
-          ),
-          record.product_url && /* @__PURE__ */ jsxs(
-            DropdownMenu.Item,
-            {
-              className: "gap-x-2",
-              onClick: () => window.open(record.product_url, "_blank"),
-              children: [
-                /* @__PURE__ */ jsx(ArrowUpRightOnBox, { className: "text-ui-fg-subtle" }),
-                "Open on Faire"
-              ]
-            }
-          )
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-col gap-4 overflow-y-auto p-6", children: [
-      error && /* @__PURE__ */ jsx(Text, { className: "text-ui-tag-red-text", children: error }),
-      loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) }) : !record ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
-        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Sync record not found" }),
-        /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => navigate(PARENT$1), children: "Back to Faire settings" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "border-ui-border-base grid grid-cols-2 gap-4 rounded-lg border p-4", children: [
-          /* @__PURE__ */ jsx(Detail, { label: "Record id", value: record.id, mono: true }),
-          /* @__PURE__ */ jsx(Detail, { label: "Product", value: record.product_id, mono: true }),
-          /* @__PURE__ */ jsx(Detail, { label: "Action", value: record.action }),
-          /* @__PURE__ */ jsx(Detail, { label: "Faire product token", value: record.product_token || "—", mono: true }),
-          /* @__PURE__ */ jsx(Detail, { label: "State", value: record.product_state || "—" }),
-          /* @__PURE__ */ jsx(Detail, { label: "Published", value: record.published ? "Yes" : "No" }),
-          /* @__PURE__ */ jsx(
-            Detail,
-            {
-              label: "Synced at",
-              value: record.synced_at ? new Date(record.synced_at).toLocaleString() : "—"
-            }
-          )
-        ] }),
-        warnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-ui-border-base flex flex-col gap-2 rounded-lg border p-4", children: [
-          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Issues" }),
-          warnings.map((w, i) => /* @__PURE__ */ jsx(Text, { className: "text-ui-tag-red-text text-sm", children: w }, i))
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Toaster, {})
-  ] });
-};
-const Detail = ({
-  label,
-  value,
-  mono
-}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-  /* @__PURE__ */ jsx(Label, { children: label }),
-  /* @__PURE__ */ jsx(Text, { className: mono ? "font-mono text-xs" : "", children: value })
-] });
-const handle$1 = {
-  breadcrumb: () => "Sync record"
-};
 const STATUS_KEY = ["faire", "status"];
-const PARENT = "/settings/faire";
+const TAXONOMY_KEY = ["faire", "taxonomy"];
+const PARENT$1 = "/settings/faire";
 const NONE = "__none__";
 const cleanSettings = (form) => {
   const out = { ...form };
   for (const key of [
     "default_brand_id",
-    "default_shipping_policy_id",
     "default_category"
   ]) {
     if (!out[key] || out[key] === NONE) out[key] = null;
@@ -917,7 +942,7 @@ const FaireSyncSettingsDrawer = () => {
   const [form, setForm] = useState({});
   const close = () => {
     setOpen(false);
-    navigate(PARENT);
+    navigate(PARENT$1);
   };
   const statusQuery = useQuery({
     queryKey: STATUS_KEY,
@@ -925,6 +950,11 @@ const FaireSyncSettingsDrawer = () => {
   });
   const status = statusQuery.data;
   const connected = !!(status == null ? void 0 : status.connected);
+  const taxonomyQuery = useQuery({
+    queryKey: TAXONOMY_KEY,
+    queryFn: async () => (await faireApi.taxonomy().catch(() => ({ taxonomy: [] }))).taxonomy || []
+  });
+  const taxonomy = taxonomyQuery.data ?? [];
   useEffect(() => {
     if (status == null ? void 0 : status.settings) setForm(status.settings);
   }, [status == null ? void 0 : status.settings]);
@@ -953,7 +983,7 @@ const FaireSyncSettingsDrawer = () => {
             /* @__PURE__ */ jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.connected, label: "Faire connected" }),
             /* @__PURE__ */ jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.brand, label: "Brand configured" }),
             /* @__PURE__ */ jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.wholesale_pricing, label: "Wholesale pricing" }),
-            /* @__PURE__ */ jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.shipping_policy, label: "Shipping policy" })
+            /* @__PURE__ */ jsx(ChecklistItem, { ok: status == null ? void 0 : status.readiness.taxonomy, label: "Default category" })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -963,9 +993,8 @@ const FaireSyncSettingsDrawer = () => {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4", children: [
             /* @__PURE__ */ jsx(Field, { label: "Brand ID", children: /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
-                className: "border-ui-border-base rounded-lg border px-3 py-2 text-sm",
                 value: String(form.default_brand_id ?? ""),
                 onChange: (e) => setForm({ ...form, default_brand_id: e.target.value || null }),
                 disabled: !connected,
@@ -973,10 +1002,9 @@ const FaireSyncSettingsDrawer = () => {
               }
             ) }),
             /* @__PURE__ */ jsx(Field, { label: "Wholesale markup % (off retail)", children: /* @__PURE__ */ jsx(Tooltip, { content: "Wholesale price = retail × (100 − markup%) / 100. E.g. 50 → half of retail.", children: /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
                 type: "number",
-                className: "border-ui-border-base rounded-lg border px-3 py-2 text-sm",
                 value: String(form.default_wholesale_markup_percent ?? ""),
                 onChange: (e) => setForm({
                   ...form,
@@ -987,10 +1015,9 @@ const FaireSyncSettingsDrawer = () => {
               }
             ) }) }),
             /* @__PURE__ */ jsx(Field, { label: "Default min order quantity", children: /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
                 type: "number",
-                className: "border-ui-border-base rounded-lg border px-3 py-2 text-sm",
                 value: String(form.default_min_order_quantity ?? 1),
                 onChange: (e) => setForm({
                   ...form,
@@ -1000,10 +1027,9 @@ const FaireSyncSettingsDrawer = () => {
               }
             ) }),
             /* @__PURE__ */ jsx(Field, { label: "Default lead time (days)", children: /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
                 type: "number",
-                className: "border-ui-border-base rounded-lg border px-3 py-2 text-sm",
                 value: String(form.default_lead_time_days ?? ""),
                 onChange: (e) => setForm({
                   ...form,
@@ -1013,16 +1039,15 @@ const FaireSyncSettingsDrawer = () => {
                 placeholder: "e.g. 14"
               }
             ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Default category", children: /* @__PURE__ */ jsx(
-              "input",
+            /* @__PURE__ */ jsx(Field, { label: "Fallback category (taxonomy)", children: /* @__PURE__ */ jsx(Tooltip, { content: "Faire requires a category per product. Resolution order: product metadata → the product's Type (matched by name) → this fallback. Set the product Type or pick a category on the product page for accuracy.", children: /* @__PURE__ */ jsx(
+              SelectField,
               {
-                className: "border-ui-border-base rounded-lg border px-3 py-2 text-sm",
                 value: String(form.default_category ?? ""),
-                onChange: (e) => setForm({ ...form, default_category: e.target.value || null }),
+                onValueChange: (v) => setForm({ ...form, default_category: v || null }),
                 disabled: !connected,
-                placeholder: "e.g. Home Decor"
+                options: taxonomy.map((t) => ({ value: t.id, label: t.name }))
               }
-            ) }),
+            ) }) }),
             /* @__PURE__ */ jsx(Field, { label: "Follow product status", children: /* @__PURE__ */ jsx(Tooltip, { content: "If on, published Medusa products are published on Faire; draft products sync as drafts.", children: /* @__PURE__ */ jsx(
               Switch,
               {
@@ -1060,6 +1085,27 @@ const Field = ({ label, children }) => /* @__PURE__ */ jsxs("div", { className:
   /* @__PURE__ */ jsx(Label, { children: label }),
   children
 ] });
+const SelectField = ({
+  value,
+  onValueChange,
+  options,
+  disabled
+}) => /* @__PURE__ */ jsxs(
+  Select,
+  {
+    value: value ? value : NONE,
+    onValueChange: (v) => onValueChange(v === NONE ? "" : v),
+    disabled,
+    size: "small",
+    children: [
+      /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Not set" }) }),
+      /* @__PURE__ */ jsxs(Select.Content, { children: [
+        /* @__PURE__ */ jsx(Select.Item, { value: NONE, children: "Not set" }),
+        options.map((o) => /* @__PURE__ */ jsx(Select.Item, { value: o.value, children: o.label }, o.value))
+      ] })
+    ]
+  }
+);
 const ChecklistItem = ({ ok, label }) => /* @__PURE__ */ jsxs(
   "div",
   {
@@ -1073,9 +1119,122 @@ const ChecklistItem = ({ ok, label }) => /* @__PURE__ */ jsxs(
     ]
   }
 );
-const handle = {
+const handle$1 = {
   breadcrumb: () => "Sync settings"
 };
+const PARENT = "/settings/faire";
+const STATUS_COLORS = {
+  success: "green",
+  failed: "red",
+  draft: "orange",
+  pending: "grey",
+  syncing: "grey"
+};
+const FaireSyncDetailPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [record, setRecord] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [retrying, setRetrying] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!id) return;
+    setLoading(true);
+    faireApi.getSync(id).then((res) => {
+      setRecord(res.sync || res);
+    }).catch((err) => setError(err.message || "Failed to load sync record")).finally(() => setLoading(false));
+  }, [id]);
+  const handleRetry = async () => {
+    if (!record) return;
+    setRetrying(true);
+    setError(null);
+    try {
+      await faireApi.retrySync(record.id);
+      const updated = await faireApi.getSync(record.id).catch(() => null);
+      if (updated) setRecord(updated.sync || updated);
+    } catch (err) {
+      setError(err.message || "Retry failed");
+    } finally {
+      setRetrying(false);
+    }
+  };
+  const warnings = (record == null ? void 0 : record.error_message) ? record.error_message.split(" | ") : [];
+  return /* @__PURE__ */ jsxs(RouteFocusModal, { prev: PARENT, children: [
+    /* @__PURE__ */ jsxs(RouteFocusModal.Header, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Sync record" }),
+        record && /* @__PURE__ */ jsx(StatusBadge, { color: STATUS_COLORS[record.status] || "grey", children: record.status })
+      ] }),
+      record && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", variant: "transparent", disabled: retrying, children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+          /* @__PURE__ */ jsxs(
+            DropdownMenu.Item,
+            {
+              className: "gap-x-2",
+              onClick: handleRetry,
+              disabled: retrying,
+              children: [
+                /* @__PURE__ */ jsx(ArrowPath, { className: "text-ui-fg-subtle" }),
+                retrying ? "Re-syncing…" : "Re-sync product"
+              ]
+            }
+          ),
+          record.product_url && /* @__PURE__ */ jsxs(
+            DropdownMenu.Item,
+            {
+              className: "gap-x-2",
+              onClick: () => window.open(record.product_url, "_blank"),
+              children: [
+                /* @__PURE__ */ jsx(ArrowUpRightOnBox, { className: "text-ui-fg-subtle" }),
+                "Open on Faire"
+              ]
+            }
+          )
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(RouteFocusModal.Body, { className: "flex flex-col gap-4 overflow-y-auto p-6", children: [
+      error && /* @__PURE__ */ jsx(Text, { className: "text-ui-tag-red-text", children: error }),
+      loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) }) : !record ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Sync record not found" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => navigate(PARENT), children: "Back to Faire settings" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-ui-border-base grid grid-cols-2 gap-4 rounded-lg border p-4", children: [
+          /* @__PURE__ */ jsx(Detail, { label: "Record id", value: record.id, mono: true }),
+          /* @__PURE__ */ jsx(Detail, { label: "Product", value: record.product_id, mono: true }),
+          /* @__PURE__ */ jsx(Detail, { label: "Action", value: record.action }),
+          /* @__PURE__ */ jsx(Detail, { label: "Faire product token", value: record.product_token || "—", mono: true }),
+          /* @__PURE__ */ jsx(Detail, { label: "State", value: record.product_state || "—" }),
+          /* @__PURE__ */ jsx(Detail, { label: "Published", value: record.published ? "Yes" : "No" }),
+          /* @__PURE__ */ jsx(
+            Detail,
+            {
+              label: "Synced at",
+              value: record.synced_at ? new Date(record.synced_at).toLocaleString() : "—"
+            }
+          )
+        ] }),
+        warnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-ui-border-base flex flex-col gap-2 rounded-lg border p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Issues" }),
+          warnings.map((w, i) => /* @__PURE__ */ jsx(Text, { className: "text-ui-tag-red-text text-sm", children: w }, i))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Toaster, {})
+  ] });
+};
+const Detail = ({
+  label,
+  value,
+  mono
+}) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx(Label, { children: label }),
+  /* @__PURE__ */ jsx(Text, { className: mono ? "font-mono text-xs" : "", children: value })
+] });
+const handle = {
+  breadcrumb: () => "Sync record"
+};
 const EXCHANGED_PREFIX = "faire:oauth:exchanged:";
 const FaireOauthCallback = () => {
   const [params] = useSearchParams();
@@ -1154,21 +1313,23 @@ const routeModule = {
     {
       Component: FaireSettingsPage,
       path: "/settings/faire",
-      handle: handle$3
-    },
-    {
-      Component: FaireBulkPage,
-      path: "/settings/faire/bulk",
-      handle: handle$2
+      handle: handle$3,
+      children: [
+        {
+          Component: FaireBulkPage,
+          path: "/settings/faire/bulk",
+          handle: handle$2
+        },
+        {
+          Component: FaireSyncSettingsDrawer,
+          path: "/settings/faire/settings",
+          handle: handle$1
+        }
+      ]
     },
     {
       Component: FaireSyncDetailPage,
       path: "/settings/faire/:id",
-      handle: handle$1
-    },
-    {
-      Component: FaireSyncSettingsDrawer,
-      path: "/settings/faire/settings",
       handle
     },
     {