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

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

@@ -1,9 +1,9 @@
 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, DataTable, Toaster, Label, DropdownMenu, IconButton, FocusModal, Input, Badge, Drawer, Switch, clx } from "@medusajs/ui";
+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 { useQueryClient, useQuery, useMutation, keepPreviousData } from "@tanstack/react-query";
 import Medusa from "@medusajs/js-sdk";
-import { BuildingStorefront, EllipsisHorizontal, ArrowPath, ArrowUpRightOnBox } from "@medusajs/icons";
+import { BuildingStorefront, ChevronDownMini, EllipsisHorizontal, ArrowPath, ArrowUpRightOnBox } from "@medusajs/icons";
 import { useState, useEffect, useMemo } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 const sdk = new Medusa({
@@ -236,6 +236,8 @@ const FaireSettingsPage = () => {
     pageSize: PAGE_SIZE$1
   });
   const [filtering, setFiltering] = useState({});
+  const [apiKeyOpen, setApiKeyOpen] = useState(false);
+  const [apiKey, setApiKey] = useState("");
   const statusQuery = useQuery({
     queryKey: STATUS_KEY$1,
     queryFn: () => faireApi.status()
@@ -268,6 +270,18 @@ const FaireSettingsPage = () => {
       description: err.message
     })
   });
+  const apiKeyMutation = useMutation({
+    mutationFn: () => faireApi.connectApiKey(apiKey.trim()),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: STATUS_KEY$1 });
+      setApiKeyOpen(false);
+      setApiKey("");
+      toast.success("Connected to Faire with API key");
+    },
+    onError: (err) => toast.error("Failed to connect with API key", {
+      description: err.message
+    })
+  });
   const disconnectMutation = useMutation({
     mutationFn: () => faireApi.disconnect(),
     onSuccess: () => {
@@ -363,15 +377,16 @@ const FaireSettingsPage = () => {
               children: "Disconnect"
             }
           )
-        ] }) : /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            onClick: () => connectMutation.mutate(),
-            isLoading: connectMutation.isPending,
-            children: "Connect Faire"
-          }
-        )
+        ] }) : /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "small", isLoading: connectMutation.isPending, children: [
+            "Connect Faire",
+            /* @__PURE__ */ jsx(ChevronDownMini, {})
+          ] }) }),
+          /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => connectMutation.mutate(), children: "Connect with OAuth" }),
+            /* @__PURE__ */ jsx(DropdownMenu.Item, { onClick: () => setApiKeyOpen(true), children: "Connect with API key (private)" })
+          ] })
+        ] })
       ] }),
       connected && (status == null ? void 0 : status.account) && /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 grid grid-cols-4 gap-4", children: [
         /* @__PURE__ */ jsx(InfoField, { label: "Brand", value: status.account.brand_name }),
@@ -409,6 +424,46 @@ const FaireSettingsPage = () => {
       /* @__PURE__ */ jsx(DataTable.Table, {}),
       /* @__PURE__ */ jsx(DataTable.Pagination, {})
     ] }) }),
+    /* @__PURE__ */ jsx(Drawer, { open: apiKeyOpen, onOpenChange: setApiKeyOpen, children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+      /* @__PURE__ */ jsx(Drawer.Header, { children: /* @__PURE__ */ jsx(Drawer.Title, { children: "Connect with API key" }) }),
+      /* @__PURE__ */ jsxs(Drawer.Body, { className: "flex flex-col gap-y-3", children: [
+        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: "For private / unpublished Faire integrations, paste the API key your Faire brand issued for this app. This connects without OAuth." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { size: "small", children: "Faire API key" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              placeholder: "Paste the Faire API key…",
+              value: apiKey,
+              onChange: (e) => setApiKey(e.target.value),
+              autoComplete: "off"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            onClick: () => setApiKeyOpen(false),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            onClick: () => apiKeyMutation.mutate(),
+            isLoading: apiKeyMutation.isPending,
+            disabled: !apiKey.trim(),
+            children: "Connect"
+          }
+        )
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsx(Toaster, {})
   ] });
 };
@@ -423,124 +478,6 @@ const config = defineRouteConfig({
 const handle$3 = {
   breadcrumb: () => "Faire Sync"
 };
-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);
-    }
-  };
-  if (loading) {
-    return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-12 rounded-md" }) });
-  }
-  if (!record) {
-    return /* @__PURE__ */ jsxs(Container, { className: "p-6 flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Sync record not found" }),
-      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => navigate("/settings/faire"), children: "Back to Faire settings" })
-    ] });
-  }
-  const warnings = record.error_message ? record.error_message.split(" | ") : [];
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-    error && /* @__PURE__ */ jsx(Container, { className: "p-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-tag-red-text", children: error }) }),
-    /* @__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: [
-          /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Sync record" }),
-          /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle font-mono text-xs", children: record.id })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx(StatusBadge, { color: STATUS_COLORS[record.status] || "grey", children: record.status }),
-          /* @__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("div", { className: "px-6 py-4 grid grid-cols-2 gap-4", children: [
-        /* @__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(Container, { className: "divide-y p-0", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Issues" }) }),
-      /* @__PURE__ */ jsx("div", { className: "px-6 py-4 flex flex-col gap-2", children: 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$2 = {
-  breadcrumb: () => "Sync record"
-};
 const Root = ({ prev = "..", children }) => {
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
@@ -837,9 +774,122 @@ const FaireBulkPage = () => {
     /* @__PURE__ */ jsx(Toaster, {})
   ] });
 };
-const handle$1 = {
+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 NONE = "__none__";
@@ -1107,13 +1157,13 @@ const routeModule = {
       handle: handle$3
     },
     {
-      Component: FaireSyncDetailPage,
-      path: "/settings/faire/:id",
+      Component: FaireBulkPage,
+      path: "/settings/faire/bulk",
       handle: handle$2
     },
     {
-      Component: FaireBulkPage,
-      path: "/settings/faire/bulk",
+      Component: FaireSyncDetailPage,
+      path: "/settings/faire/:id",
       handle: handle$1
     },
     {