@jytextiles/medusa-plugin-faire-store-sync 0.2.0 → 0.2.2

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

@@ -177,14 +177,14 @@ const FaireProductWidget = ({ data }) => {
 adminSdk.defineWidgetConfig({
   zone: "product.details.side.before"
 });
-const columnHelper = ui.createDataTableColumnHelper();
+const columnHelper$1 = ui.createDataTableColumnHelper();
 const useFaireSyncColumns = () => {
   return [
-    columnHelper.accessor("product_id", {
+    columnHelper$1.accessor("product_id", {
       header: "Product",
       cell: (info) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-ui-fg-subtle text-xs", children: info.getValue() })
     }),
-    columnHelper.accessor("status", {
+    columnHelper$1.accessor("status", {
       header: "Status",
       cell: (info) => {
         const status = info.getValue();
@@ -192,11 +192,11 @@ const useFaireSyncColumns = () => {
         return /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color, children: status });
       }
     }),
-    columnHelper.accessor("product_state", {
+    columnHelper$1.accessor("product_state", {
       header: "State",
       cell: (info) => info.getValue() || "—"
     }),
-    columnHelper.display({
+    columnHelper$1.display({
       id: "product",
       header: "Faire product",
       cell: ({ row }) => {
@@ -215,7 +215,7 @@ const useFaireSyncColumns = () => {
         );
       }
     }),
-    columnHelper.accessor("synced_at", {
+    columnHelper$1.accessor("synced_at", {
       header: "Synced",
       cell: (info) => {
         const v = info.getValue();
@@ -228,15 +228,15 @@ const useFaireSyncColumns = () => {
     })
   ];
 };
-const PAGE_SIZE = 10;
+const PAGE_SIZE$1 = 10;
 const STATUS_KEY$1 = ["faire", "status"];
 const FaireSettingsPage = () => {
   var _a, _b, _c;
-  const navigate = reactRouterDom.useNavigate();
+  const navigate2 = reactRouterDom.useNavigate();
   const queryClient = reactQuery.useQueryClient();
   const [pagination, setPagination] = react.useState({
     pageIndex: 0,
-    pageSize: PAGE_SIZE
+    pageSize: PAGE_SIZE$1
   });
   const [filtering, setFiltering] = react.useState({});
   const statusQuery = reactQuery.useQuery({
@@ -300,7 +300,7 @@ const FaireSettingsPage = () => {
     rowCount: ((_b = syncsQuery.data) == null ? void 0 : _b.count) ?? 0,
     getRowId: (row) => row.id,
     onRowClick: (_, row) => {
-      navigate(`/settings/faire/${row.id}`);
+      navigate2(`/settings/faire/${row.id}`);
     },
     isLoading: syncsQuery.isLoading,
     filters,
@@ -343,7 +343,7 @@ const FaireSettingsPage = () => {
             {
               size: "small",
               variant: "secondary",
-              onClick: () => navigate("/settings/faire/settings"),
+              onClick: () => navigate2("/settings/faire/settings"),
               children: "Sync settings"
             }
           ),
@@ -485,7 +485,17 @@ const BulkOperations = ({ connected }) => {
             disabled: !connected || pushMutation.isPending
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              size: "small",
+              variant: "secondary",
+              disabled: !connected,
+              onClick: () => navigate("/settings/faire/bulk"),
+              children: "Select products"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.Button,
             {
@@ -557,9 +567,256 @@ const config = adminSdk.defineRouteConfig({
   label: "Faire",
   icon: icons.BuildingStorefront
 });
-const handle$2 = {
+const handle$3 = {
   breadcrumb: () => "Faire Sync"
 };
+const Root = ({ prev = "..", children }) => {
+  const navigate2 = reactRouterDom.useNavigate();
+  const [open, setOpen] = react.useState(false);
+  react.useEffect(() => {
+    setOpen(true);
+    return () => setOpen(false);
+  }, []);
+  const handleOpenChange = (next) => {
+    if (!next) {
+      document.body.style.pointerEvents = "auto";
+      navigate2(prev, { replace: true });
+      return;
+    }
+    setOpen(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Content, { className: "flex flex-col", children }) });
+};
+const RouteFocusModal = Object.assign(Root, {
+  Header: ui.FocusModal.Header,
+  Title: ui.FocusModal.Title,
+  Description: ui.FocusModal.Description,
+  Body: ui.FocusModal.Body,
+  Footer: ui.FocusModal.Footer,
+  Close: ui.FocusModal.Close
+});
+const columnHelper = ui.createDataTableColumnHelper();
+const useBulkProductColumns = () => {
+  return [
+    columnHelper.accessor("title", {
+      header: "Product",
+      cell: ({ row, getValue }) => {
+        const p = row.original;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          p.thumbnail ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: p.thumbnail,
+              alt: "",
+              className: "h-8 w-8 rounded border border-ui-border-base object-cover"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded border border-ui-border-base bg-ui-bg-subtle" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: getValue() }),
+            p.handle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-subtle text-xs font-mono", children: p.handle })
+          ] })
+        ] });
+      }
+    }),
+    columnHelper.accessor("status", {
+      header: "Status",
+      cell: (info) => {
+        const s = info.getValue();
+        const color = s === "published" ? "green" : s === "draft" ? "orange" : "grey";
+        return /* @__PURE__ */ jsxRuntime.jsx(ui.StatusBadge, { color, children: s });
+      }
+    }),
+    columnHelper.accessor("updated_at", {
+      header: "Updated",
+      cell: (info) => {
+        const v = info.getValue();
+        return v ? new Date(v).toLocaleString() : "—";
+      }
+    })
+  ];
+};
+const PAGE_SIZE = 20;
+const PRODUCT_FIELDS = "id,title,status,thumbnail,handle,created_at,updated_at";
+const SELECT_ALL_CAP = 2e3;
+const listProducts = (query) => sdk.admin.product.list({
+  fields: PRODUCT_FIELDS,
+  ...query
+});
+const FaireBulkPage = () => {
+  var _a, _b, _c, _d;
+  const queryClient = reactQuery.useQueryClient();
+  const [pagination, setPagination] = react.useState({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE
+  });
+  const [filtering, setFiltering] = react.useState({});
+  const [search, setSearch] = react.useState("");
+  const [rowSelection, setRowSelection] = react.useState({});
+  const [selectAllMatching, setSelectAllMatching] = react.useState(false);
+  const statusFilter = (_a = filtering.status) == null ? void 0 : _a[0];
+  const statusQuery = reactQuery.useQuery({
+    queryKey: ["faire", "status"],
+    queryFn: () => faireApi.status()
+  });
+  const connected = !!((_b = statusQuery.data) == null ? void 0 : _b.connected);
+  const productsQuery = reactQuery.useQuery({
+    queryKey: ["faire", "bulk-products", pagination, statusFilter, search],
+    placeholderData: reactQuery.keepPreviousData,
+    queryFn: () => listProducts({
+      limit: pagination.pageSize,
+      offset: pagination.pageIndex * pagination.pageSize,
+      q: search || void 0,
+      status: statusFilter,
+      order: "-created_at"
+    })
+  });
+  const products = ((_c = productsQuery.data) == null ? void 0 : _c.products) ?? [];
+  const count = ((_d = productsQuery.data) == null ? void 0 : _d.count) ?? 0;
+  const selectedIds = react.useMemo(
+    () => Object.keys(rowSelection).filter((id) => rowSelection[id]),
+    [rowSelection]
+  );
+  const targetCount = selectAllMatching ? count : selectedIds.length;
+  const resolveTargetIds = async () => {
+    if (!selectAllMatching) return selectedIds;
+    const ids = [];
+    let offset = 0;
+    while (ids.length < count && ids.length < SELECT_ALL_CAP) {
+      const res = await listProducts({
+        limit: 200,
+        offset,
+        q: search || void 0,
+        status: statusFilter,
+        order: "-created_at"
+      });
+      const batch = res.products ?? [];
+      if (!batch.length) break;
+      ids.push(...batch.map((p) => p.id));
+      offset += batch.length;
+    }
+    return ids.slice(0, SELECT_ALL_CAP);
+  };
+  const pushMutation = reactQuery.useMutation({
+    mutationFn: async () => {
+      const ids = await resolveTargetIds();
+      if (!ids.length) throw new Error("No products to sync");
+      const res = await faireApi.syncBulk(ids);
+      return { res, queued: ids.length };
+    },
+    onSuccess: ({ res, queued }) => {
+      ui.toast.success("Bulk product sync started", {
+        description: `Queued ${queued} product(s). Batch ${res.batch_id}.` + (selectAllMatching && count > SELECT_ALL_CAP ? ` Capped at ${SELECT_ALL_CAP} — run again for the rest.` : "")
+      });
+      queryClient.invalidateQueries({ queryKey: ["faire", "syncs"] });
+      setRowSelection({});
+      setSelectAllMatching(false);
+    },
+    onError: (err) => ui.toast.error("Failed to start bulk sync", { description: err.message })
+  });
+  const columns = useBulkProductColumns();
+  const commands = react.useMemo(
+    () => [
+      {
+        label: connected ? "Push to Faire" : "Connect Faire first",
+        shortcut: "p",
+        action: () => {
+          if (!connected) {
+            ui.toast.error("Faire is not connected");
+            return;
+          }
+          pushMutation.mutate();
+        }
+      },
+      {
+        label: "Clear selection",
+        shortcut: "c",
+        action: () => {
+          setRowSelection({});
+          setSelectAllMatching(false);
+        }
+      }
+    ],
+    [connected, pushMutation]
+  );
+  const table = ui.useDataTable({
+    data: products,
+    columns,
+    rowCount: count,
+    getRowId: (row) => row.id,
+    isLoading: productsQuery.isLoading,
+    commands,
+    rowSelection: {
+      state: rowSelection,
+      onRowSelectionChange: (updater) => {
+        setSelectAllMatching(false);
+        setRowSelection(updater);
+      }
+    },
+    pagination: { state: pagination, onPaginationChange: setPagination },
+    filtering: { state: filtering, onFilteringChange: setFiltering },
+    search: { state: search, onSearchChange: setSearch }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(RouteFocusModal, { prev: "/settings/faire", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Bulk sync products to Faire" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable, { instance: table, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable.Toolbar, { className: "flex flex-col gap-y-3 border-b px-6 py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2 md:flex-row md:items-center md:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Input,
+              {
+                type: "search",
+                placeholder: "Search products…",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                className: "w-full md:w-72"
+              }
+            ),
+            !connected && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "orange", size: "2xsmall", children: "Not connected" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "small",
+                variant: "secondary",
+                onClick: () => productsQuery.refetch(),
+                isLoading: productsQuery.isFetching,
+                children: "Refresh"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                size: "small",
+                variant: selectAllMatching ? "primary" : "secondary",
+                disabled: !count,
+                onClick: () => {
+                  setRowSelection({});
+                  setSelectAllMatching((v) => !v);
+                },
+                children: selectAllMatching ? `All ${count} selected` : `Select all ${count}`
+              }
+            )
+          ] })
+        ] }),
+        targetCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "text-ui-fg-subtle", children: [
+          selectAllMatching ? `All ${count} matching product(s) will be synced` : `${targetCount} product(s) selected`,
+          pushMutation.isPending ? " — queuing…" : ""
+        ] })
+      ] }),
+      productsQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 p-6", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-10 w-full" }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Table, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})
+  ] });
+};
+const handle$2 = {
+  breadcrumb: () => "Bulk sync"
+};
 const STATUS_COLORS = {
   success: "green",
   failed: "red",
@@ -569,7 +826,7 @@ const STATUS_COLORS = {
 };
 const FaireSyncDetailPage = () => {
   const { id } = reactRouterDom.useParams();
-  const navigate = reactRouterDom.useNavigate();
+  const navigate2 = reactRouterDom.useNavigate();
   const [record, setRecord] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [retrying, setRetrying] = react.useState(false);
@@ -601,7 +858,7 @@ const FaireSyncDetailPage = () => {
   if (!record) {
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6 flex flex-col gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Sync record not found" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", onClick: () => navigate("/settings/faire"), children: "Back to Faire settings" })
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", onClick: () => navigate2("/settings/faire"), children: "Back to Faire settings" })
     ] });
   }
   const warnings = record.error_message ? record.error_message.split(" | ") : [];
@@ -699,13 +956,13 @@ const cleanSettings = (form) => {
   return out;
 };
 const FaireSyncSettingsDrawer = () => {
-  const navigate = reactRouterDom.useNavigate();
+  const navigate2 = reactRouterDom.useNavigate();
   const queryClient = reactQuery.useQueryClient();
   const [open, setOpen] = react.useState(true);
   const [form, setForm] = react.useState({});
   const close = () => {
     setOpen(false);
-    navigate(PARENT);
+    navigate2(PARENT);
   };
   const statusQuery = reactQuery.useQuery({
     queryKey: STATUS_KEY,
@@ -864,42 +1121,67 @@ const ChecklistItem = ({ ok, label }) => /* @__PURE__ */ jsxRuntime.jsxs(
 const handle = {
   breadcrumb: () => "Sync settings"
 };
+const EXCHANGED_PREFIX = "faire:oauth:exchanged:";
 const FaireOauthCallback = () => {
   const [params] = reactRouterDom.useSearchParams();
-  const navigate = reactRouterDom.useNavigate();
+  const navigate2 = reactRouterDom.useNavigate();
   const [error, setError] = react.useState(null);
-  const exchangedRef = react.useRef(false);
+  const [exchanging, setExchanging] = react.useState(true);
   react.useEffect(() => {
-    if (exchangedRef.current) return;
-    exchangedRef.current = true;
-    const code = params.get("code");
-    const state = params.get("state");
     const errParam = params.get("error");
     if (errParam) {
       setError(
         `Faire authorization failed: ${params.get("error_description") || errParam}`
       );
+      setExchanging(false);
       return;
     }
+    const code = params.get("authorization_code") || params.get("code");
+    const state = params.get("state");
     if (!code || !state) {
       setError("Missing code or state in Faire callback.");
+      setExchanging(false);
+      return;
+    }
+    if (sessionStorage.getItem(EXCHANGED_PREFIX + code)) {
+      navigate2("/settings/faire", { replace: true });
       return;
     }
-    faireApi.callback(code, state).then(() => {
-      navigate("/settings/faire", { replace: true });
-    }).catch((err) => {
-      setError(err.message || "Failed to complete Faire authorization.");
-    });
-  }, [params, navigate]);
+    sessionStorage.setItem(EXCHANGED_PREFIX + code, "1");
+    let cancelled = false;
+    const run = async () => {
+      try {
+        await faireApi.callback(code, state);
+        if (!cancelled) navigate2("/settings/faire", { replace: true });
+      } catch (err) {
+        if (!cancelled) {
+          try {
+            const status = await faireApi.status();
+            if (status == null ? void 0 : status.connected) {
+              navigate2("/settings/faire", { replace: true });
+              return;
+            }
+          } catch {
+          }
+          setError(err.message || "Failed to complete Faire authorization.");
+          setExchanging(false);
+        }
+      }
+    };
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [params, navigate2]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "flex flex-col items-center gap-4 p-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Connecting Faire…" }),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: error }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Completing authorization, please wait…" }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { variant: "error", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: error }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: exchanging ? "Completing authorization, please wait…" : "Redirecting…" }),
     error && /* @__PURE__ */ jsxRuntime.jsx(
       ui.Button,
       {
         size: "small",
         variant: "secondary",
-        onClick: () => navigate("/settings/faire", { replace: true }),
+        onClick: () => navigate2("/settings/faire", { replace: true }),
         children: "Back to Faire settings"
       }
     )
@@ -917,6 +1199,11 @@ const routeModule = {
     {
       Component: FaireSettingsPage,
       path: "/settings/faire",
+      handle: handle$3
+    },
+    {
+      Component: FaireBulkPage,
+      path: "/settings/faire/bulk",
       handle: handle$2
     },
     {