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

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

@@ -1,10 +1,10 @@
 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, Drawer, Switch, clx } from "@medusajs/ui";
+import { Container, Heading, Text, StatusBadge, Alert, Tooltip, Button, createDataTableColumnHelper, toast, createDataTableFilterHelper, useDataTable, Skeleton, DataTable, Toaster, Label, FocusModal, Input, Badge, DropdownMenu, IconButton, Drawer, 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 { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 const sdk = new Medusa({
   baseUrl: "/",
@@ -174,14 +174,14 @@ const FaireProductWidget = ({ data }) => {
 defineWidgetConfig({
   zone: "product.details.side.before"
 });
-const columnHelper = createDataTableColumnHelper();
+const columnHelper$1 = createDataTableColumnHelper();
 const useFaireSyncColumns = () => {
   return [
-    columnHelper.accessor("product_id", {
+    columnHelper$1.accessor("product_id", {
       header: "Product",
       cell: (info) => /* @__PURE__ */ 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();
@@ -189,11 +189,11 @@ const useFaireSyncColumns = () => {
         return /* @__PURE__ */ jsx(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 }) => {
@@ -212,7 +212,7 @@ const useFaireSyncColumns = () => {
         );
       }
     }),
-    columnHelper.accessor("synced_at", {
+    columnHelper$1.accessor("synced_at", {
       header: "Synced",
       cell: (info) => {
         const v = info.getValue();
@@ -225,15 +225,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 = useNavigate();
+  const navigate2 = useNavigate();
   const queryClient = useQueryClient();
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: PAGE_SIZE
+    pageSize: PAGE_SIZE$1
   });
   const [filtering, setFiltering] = useState({});
   const statusQuery = useQuery({
@@ -297,7 +297,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,
@@ -340,7 +340,7 @@ const FaireSettingsPage = () => {
             {
               size: "small",
               variant: "secondary",
-              onClick: () => navigate("/settings/faire/settings"),
+              onClick: () => navigate2("/settings/faire/settings"),
               children: "Sync settings"
             }
           ),
@@ -482,7 +482,17 @@ const BulkOperations = ({ connected }) => {
             disabled: !connected || pushMutation.isPending
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "secondary",
+              disabled: !connected,
+              onClick: () => navigate("/settings/faire/bulk"),
+              children: "Select products"
+            }
+          ),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -554,9 +564,256 @@ const config = defineRouteConfig({
   label: "Faire",
   icon: BuildingStorefront
 });
-const handle$2 = {
+const handle$3 = {
   breadcrumb: () => "Faire Sync"
 };
+const Root = ({ prev = "..", children }) => {
+  const navigate2 = useNavigate();
+  const [open, setOpen] = useState(false);
+  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__ */ jsx(FocusModal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(FocusModal.Content, { className: "flex flex-col", children }) });
+};
+const RouteFocusModal = Object.assign(Root, {
+  Header: FocusModal.Header,
+  Title: FocusModal.Title,
+  Description: FocusModal.Description,
+  Body: FocusModal.Body,
+  Footer: FocusModal.Footer,
+  Close: FocusModal.Close
+});
+const columnHelper = createDataTableColumnHelper();
+const useBulkProductColumns = () => {
+  return [
+    columnHelper.accessor("title", {
+      header: "Product",
+      cell: ({ row, getValue }) => {
+        const p = row.original;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          p.thumbnail ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: p.thumbnail,
+              alt: "",
+              className: "h-8 w-8 rounded border border-ui-border-base object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded border border-ui-border-base bg-ui-bg-subtle" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: getValue() }),
+            p.handle && /* @__PURE__ */ 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__ */ jsx(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 = useQueryClient();
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE
+  });
+  const [filtering, setFiltering] = useState({});
+  const [search, setSearch] = useState("");
+  const [rowSelection, setRowSelection] = useState({});
+  const [selectAllMatching, setSelectAllMatching] = useState(false);
+  const statusFilter = (_a = filtering.status) == null ? void 0 : _a[0];
+  const statusQuery = useQuery({
+    queryKey: ["faire", "status"],
+    queryFn: () => faireApi.status()
+  });
+  const connected = !!((_b = statusQuery.data) == null ? void 0 : _b.connected);
+  const productsQuery = useQuery({
+    queryKey: ["faire", "bulk-products", pagination, statusFilter, search],
+    placeholderData: 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 = 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 = 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 }) => {
+      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) => toast.error("Failed to start bulk sync", { description: err.message })
+  });
+  const columns = useBulkProductColumns();
+  const commands = useMemo(
+    () => [
+      {
+        label: connected ? "Push to Faire" : "Connect Faire first",
+        shortcut: "p",
+        action: () => {
+          if (!connected) {
+            toast.error("Faire is not connected");
+            return;
+          }
+          pushMutation.mutate();
+        }
+      },
+      {
+        label: "Clear selection",
+        shortcut: "c",
+        action: () => {
+          setRowSelection({});
+          setSelectAllMatching(false);
+        }
+      }
+    ],
+    [connected, pushMutation]
+  );
+  const table = 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__ */ 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.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: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "search",
+                placeholder: "Search products…",
+                value: search,
+                onChange: (e) => setSearch(e.target.value),
+                className: "w-full md:w-72"
+              }
+            ),
+            !connected && /* @__PURE__ */ jsx(Badge, { color: "orange", size: "2xsmall", children: "Not connected" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "secondary",
+                onClick: () => productsQuery.refetch(),
+                isLoading: productsQuery.isFetching,
+                children: "Refresh"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              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__ */ jsxs(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__ */ jsx("div", { className: "flex flex-col gap-3 p-6", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, i)) }) : /* @__PURE__ */ jsx(DataTable.Table, {}),
+      /* @__PURE__ */ jsx(DataTable.Pagination, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(Toaster, {})
+  ] });
+};
+const handle$2 = {
+  breadcrumb: () => "Bulk sync"
+};
 const STATUS_COLORS = {
   success: "green",
   failed: "red",
@@ -566,7 +823,7 @@ const STATUS_COLORS = {
 };
 const FaireSyncDetailPage = () => {
   const { id } = useParams();
-  const navigate = useNavigate();
+  const navigate2 = useNavigate();
   const [record, setRecord] = useState(null);
   const [loading, setLoading] = useState(true);
   const [retrying, setRetrying] = useState(false);
@@ -598,7 +855,7 @@ const FaireSyncDetailPage = () => {
   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" })
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => navigate2("/settings/faire"), children: "Back to Faire settings" })
     ] });
   }
   const warnings = record.error_message ? record.error_message.split(" | ") : [];
@@ -696,13 +953,13 @@ const cleanSettings = (form) => {
   return out;
 };
 const FaireSyncSettingsDrawer = () => {
-  const navigate = useNavigate();
+  const navigate2 = useNavigate();
   const queryClient = useQueryClient();
   const [open, setOpen] = useState(true);
   const [form, setForm] = useState({});
   const close = () => {
     setOpen(false);
-    navigate(PARENT);
+    navigate2(PARENT);
   };
   const statusQuery = useQuery({
     queryKey: STATUS_KEY,
@@ -861,42 +1118,67 @@ const ChecklistItem = ({ ok, label }) => /* @__PURE__ */ jsxs(
 const handle = {
   breadcrumb: () => "Sync settings"
 };
+const EXCHANGED_PREFIX = "faire:oauth:exchanged:";
 const FaireOauthCallback = () => {
   const [params] = useSearchParams();
-  const navigate = useNavigate();
+  const navigate2 = useNavigate();
   const [error, setError] = useState(null);
-  const exchangedRef = useRef(false);
+  const [exchanging, setExchanging] = useState(true);
   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__ */ jsxs(Container, { className: "flex flex-col items-center gap-4 p-8", children: [
     /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Connecting Faire…" }),
-    error ? /* @__PURE__ */ jsx(Alert, { variant: "error", children: /* @__PURE__ */ jsx(Text, { children: error }) }) : /* @__PURE__ */ jsx(Text, { children: "Completing authorization, please wait…" }),
+    error ? /* @__PURE__ */ jsx(Alert, { variant: "error", children: /* @__PURE__ */ jsx(Text, { children: error }) }) : /* @__PURE__ */ jsx(Text, { children: exchanging ? "Completing authorization, please wait…" : "Redirecting…" }),
     error && /* @__PURE__ */ jsx(
       Button,
       {
         size: "small",
         variant: "secondary",
-        onClick: () => navigate("/settings/faire", { replace: true }),
+        onClick: () => navigate2("/settings/faire", { replace: true }),
         children: "Back to Faire settings"
       }
     )
@@ -914,6 +1196,11 @@ const routeModule = {
     {
       Component: FaireSettingsPage,
       path: "/settings/faire",
+      handle: handle$3
+    },
+    {
+      Component: FaireBulkPage,
+      path: "/settings/faire/bulk",
       handle: handle$2
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jytextiles/medusa-plugin-faire-store-sync",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/admin/components/route-focus-modal.tsx

@@ -0,0 +1,51 @@
+import { FocusModal } from "@medusajs/ui"
+import { PropsWithChildren, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+
+/**
+ * Minimal route-driven FocusModal for plugin admin routes.
+ *
+ * Mirrors the Medusa dashboard's `RouteFocusModal` (which isn't exported for
+ * plugins) without the form / stacked-modal / provider machinery — a full-page
+ * FocusModal that opens on mount (so the entry animation plays) and navigates
+ * back to `prev` on close, so the route itself drives open/closed state.
+ */
+type RouteFocusModalProps = PropsWithChildren<{
+  /** Where to navigate on close. Defaults to the parent route. */
+  prev?: string
+}>
+
+const Root = ({ prev = "..", children }: RouteFocusModalProps) => {
+  const navigate = useNavigate()
+  const [open, setOpen] = useState(false)
+
+  // Open on mount so the entry animation plays; reset on unmount.
+  useEffect(() => {
+    setOpen(true)
+    return () => setOpen(false)
+  }, [])
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      document.body.style.pointerEvents = "auto"
+      navigate(prev, { replace: true })
+      return
+    }
+    setOpen(next)
+  }
+
+  return (
+    <FocusModal open={open} onOpenChange={handleOpenChange}>
+      <FocusModal.Content className="flex flex-col">{children}</FocusModal.Content>
+    </FocusModal>
+  )
+}
+
+export const RouteFocusModal = Object.assign(Root, {
+  Header: FocusModal.Header,
+  Title: FocusModal.Title,
+  Description: FocusModal.Description,
+  Body: FocusModal.Body,
+  Footer: FocusModal.Footer,
+  Close: FocusModal.Close,
+})