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

package/src/admin/routes/settings/faire/bulk/page.tsx

@@ -0,0 +1,318 @@
+import {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFilteringState,
+  DataTablePaginationState,
+  DataTableRowSelectionState,
+  Heading,
+  Input,
+  Skeleton,
+  StatusBadge,
+  Text,
+  Toaster,
+  toast,
+  useDataTable,
+} from "@medusajs/ui"
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
+import { useMemo, useState } from "react"
+import { faireApi, sdk } from "../../../../lib/api"
+import { RouteFocusModal } from "../../../../components/route-focus-modal"
+import {
+  BulkProduct,
+  useBulkProductColumns,
+} from "./use-bulk-product-columns"
+
+const PAGE_SIZE = 20
+const PRODUCT_FIELDS = "id,title,status,thumbnail,handle,created_at,updated_at"
+// Safety cap for "select all matching" — a runaway catalog shouldn't queue an
+// unbounded batch. If the match set exceeds this, we sync the first N and warn.
+const SELECT_ALL_CAP = 2000
+
+type ProductListResult = { products: BulkProduct[]; count: number }
+
+// Reuse the Medusa admin SDK's product list instead of a bespoke fetch wrapper.
+const listProducts = (query: Record<string, string | number | undefined>) =>
+  sdk.admin.product.list({
+    fields: PRODUCT_FIELDS,
+    ...query,
+  }) as unknown as Promise<ProductListResult>
+
+const FaireBulkPage = () => {
+  const queryClient = useQueryClient()
+
+  const [pagination, setPagination] = useState<DataTablePaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+  const [filtering, setFiltering] = useState<DataTableFilteringState>({})
+  const [search, setSearch] = useState("")
+  const [rowSelection, setRowSelection] = useState<DataTableRowSelectionState>({})
+  // When true, the action targets every product matching the current search /
+  // filter across all pages — not just the rows selected on screen.
+  const [selectAllMatching, setSelectAllMatching] = useState(false)
+
+  const statusFilter = (filtering.status as any)?.[0] as string | undefined
+
+  const statusQuery = useQuery({
+    queryKey: ["faire", "status"],
+    queryFn: () => faireApi.status() as Promise<any>,
+  })
+  const connected = !!statusQuery.data?.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 || undefined,
+        status: statusFilter,
+        order: "-created_at",
+      }),
+  })
+
+  const products = productsQuery.data?.products ?? []
+  const count = productsQuery.data?.count ?? 0
+
+  const selectedIds = useMemo(
+    () => Object.keys(rowSelection).filter((id) => rowSelection[id]),
+    [rowSelection]
+  )
+  const targetCount = selectAllMatching ? count : selectedIds.length
+
+  // Resolve the id set to sync: either the explicit selection, or every product
+  // matching the current query (paged out, capped).
+  const resolveTargetIds = async (): Promise<string[]> => {
+    if (!selectAllMatching) return selectedIds
+    const ids: string[] = []
+    let offset = 0
+    while (ids.length < count && ids.length < SELECT_ALL_CAP) {
+      const res = await listProducts({
+        limit: 200,
+        offset,
+        q: search || undefined,
+        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 }: any) => {
+      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: any) =>
+      toast.error("Failed to start bulk sync", { description: err.message }),
+  })
+
+  // ── Pull Faire orders into Medusa (the other bulk operation) ───────────────
+  const [pullBatch, setPullBatch] = useState<string | null>(null)
+  const pullMutation = useMutation({
+    mutationFn: () => faireApi.ingestOrders(),
+    onSuccess: (res: any) => {
+      setPullBatch(res.batch_id)
+      toast.success("Faire order pull started", {
+        description: "Running in the background. Polling progress…",
+      })
+    },
+    onError: (err: any) =>
+      toast.error("Failed to start order pull", { description: err.message }),
+  })
+  const pullStatus = useQuery({
+    queryKey: ["faire", "ingest", pullBatch],
+    enabled: !!pullBatch,
+    refetchInterval: (q) =>
+      (q.state.data as any)?.progress?.finished ? false : 3000,
+    queryFn: () => faireApi.ingestStatus(pullBatch!),
+  })
+  const pullProgress = (pullStatus.data as any)?.progress
+
+  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 (
+    <RouteFocusModal prev="/settings/faire">
+      <RouteFocusModal.Header>
+        <div className="flex flex-col">
+          <Heading>Bulk sync products to Faire</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            Select products (or all matching) and push them to Faire as a
+            background sync via the command bar.
+          </Text>
+        </div>
+      </RouteFocusModal.Header>
+      <RouteFocusModal.Body className="flex flex-1 flex-col overflow-hidden p-0">
+        <DataTable instance={table}>
+          <DataTable.Toolbar className="flex flex-col gap-y-3 border-b px-6 py-4">
+            <div className="flex flex-col gap-y-2 md:flex-row md:items-center md:justify-between">
+              <div className="flex items-center gap-x-2">
+                <Input
+                  type="search"
+                  placeholder="Search products…"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="w-full md:w-72"
+                />
+                {!connected && (
+                  <Badge color="orange" size="2xsmall">
+                    Not connected
+                  </Badge>
+                )}
+              </div>
+              <div className="flex items-center gap-x-2">
+                <Button
+                  size="small"
+                  variant="secondary"
+                  onClick={() => productsQuery.refetch()}
+                  isLoading={productsQuery.isFetching}
+                >
+                  Refresh
+                </Button>
+                <Button
+                  size="small"
+                  variant={selectAllMatching ? "primary" : "secondary"}
+                  disabled={!count}
+                  onClick={() => {
+                    setRowSelection({})
+                    setSelectAllMatching((v) => !v)
+                  }}
+                >
+                  {selectAllMatching
+                    ? `All ${count} selected`
+                    : `Select all ${count}`}
+                </Button>
+              </div>
+            </div>
+            {targetCount > 0 && (
+              <Text size="small" className="text-ui-fg-subtle">
+                {selectAllMatching
+                  ? `All ${count} matching product(s) will be synced`
+                  : `${targetCount} product(s) selected`}
+                {pushMutation.isPending ? " — queuing…" : ""}
+              </Text>
+            )}
+          </DataTable.Toolbar>
+          {productsQuery.isLoading ? (
+            <div className="flex flex-col gap-3 p-6">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <Skeleton key={i} className="h-10 w-full" />
+              ))}
+            </div>
+          ) : (
+            <DataTable.Table />
+          )}
+          <DataTable.Pagination />
+        </DataTable>
+      </RouteFocusModal.Body>
+      <RouteFocusModal.Footer>
+        <div className="flex w-full items-center justify-between gap-x-3">
+          <div className="flex items-center gap-x-3">
+            <Text size="small" className="text-ui-fg-subtle">
+              Pull Faire orders into Medusa (idempotent)
+            </Text>
+            {pullBatch && pullProgress && (
+              <StatusBadge
+                color={
+                  pullProgress.finished
+                    ? (pullStatus.data as any)?.batch?.status === "failed"
+                      ? "red"
+                      : "green"
+                    : "orange"
+                }
+              >
+                Pull: {pullProgress.done}/{pullProgress.total || "?"} (
+                {pullProgress.pct}%)
+              </StatusBadge>
+            )}
+          </div>
+          <Button
+            size="small"
+            variant="secondary"
+            onClick={() => pullMutation.mutate()}
+            disabled={!connected || pullMutation.isPending}
+            isLoading={pullMutation.isPending}
+          >
+            Pull orders
+          </Button>
+        </div>
+      </RouteFocusModal.Footer>
+      <Toaster />
+    </RouteFocusModal>
+  )
+}
+
+export const handle = {
+  breadcrumb: () => "Bulk sync",
+}
+
+export default FaireBulkPage

package/src/admin/routes/settings/faire/bulk/use-bulk-product-columns.tsx

@@ -0,0 +1,60 @@
+import { createDataTableColumnHelper, StatusBadge } from "@medusajs/ui"
+
+export type BulkProduct = {
+  id: string
+  title: string
+  status: string
+  thumbnail: string | null
+  handle: string | null
+  created_at: string
+  updated_at: string | null
+}
+
+const columnHelper = createDataTableColumnHelper<BulkProduct>()
+
+export const useBulkProductColumns = () => {
+  return [
+    columnHelper.accessor("title", {
+      header: "Product",
+      cell: ({ row, getValue }) => {
+        const p = row.original
+        return (
+          <div className="flex items-center gap-3">
+            {p.thumbnail ? (
+              <img
+                src={p.thumbnail}
+                alt=""
+                className="h-8 w-8 rounded border border-ui-border-base object-cover"
+              />
+            ) : (
+              <div className="h-8 w-8 rounded border border-ui-border-base bg-ui-bg-subtle" />
+            )}
+            <div className="flex flex-col">
+              <span className="font-medium">{getValue()}</span>
+              {p.handle && (
+                <span className="text-ui-fg-subtle text-xs font-mono">
+                  {p.handle}
+                </span>
+              )}
+            </div>
+          </div>
+        )
+      },
+    }),
+    columnHelper.accessor("status", {
+      header: "Status",
+      cell: (info) => {
+        const s = info.getValue()
+        const color = s === "published" ? "green" : s === "draft" ? "orange" : "grey"
+        return <StatusBadge color={color as any}>{s}</StatusBadge>
+      },
+    }),
+    columnHelper.accessor("updated_at", {
+      header: "Updated",
+      cell: (info) => {
+        const v = info.getValue()
+        return v ? new Date(v).toLocaleString() : "—"
+      },
+    }),
+  ]
+}

package/src/admin/routes/settings/faire/page.tsx

@@ -187,6 +187,13 @@ const FaireSettingsPage = () => {
           {connected ? (
             <div className="flex items-center gap-3">
               <StatusBadge color="green">Connected</StatusBadge>
+              <Button
+                size="small"
+                variant="secondary"
+                onClick={() => navigate("/settings/faire/bulk")}
+              >
+                Bulk sync
+              </Button>
               <Button
                 size="small"
                 variant="secondary"
@@ -230,9 +237,6 @@ const FaireSettingsPage = () => {
         )}
       </Container>
 
-      {/* Bulk operations */}
-      <BulkOperations connected={connected} />
-
       {/* Recent syncs */}
       <Container className="divide-y p-0">
         <DataTable instance={table}>
@@ -272,167 +276,6 @@ const InfoField = ({ label, value }: { label: string; value: string }) => (
   </div>
 )
 
-/**
- * Bulk operations card: push many products to Faire, and pull Faire orders into
- * Medusa. Both run as long-running background workflows; progress is polled.
- */
-const BulkOperations = ({ connected }: { connected: boolean }) => {
-  const [productIds, setProductIds] = useState("")
-  const [pushBatch, setPushBatch] = useState<string | null>(null)
-  const [pullBatch, setPullBatch] = useState<string | null>(null)
-
-  const pushMutation = useMutation({
-    mutationFn: (ids: string[]) => faireApi.syncBulk(ids),
-    onSuccess: (res: any) => {
-      setPushBatch(res.batch_id)
-      toast.success("Bulk product sync started", {
-        description: "Running in the background. Polling progress…",
-      })
-    },
-    onError: (err: any) =>
-      toast.error("Failed to start bulk sync", { description: err.message }),
-  })
-
-  const pullMutation = useMutation({
-    mutationFn: () => faireApi.ingestOrders(),
-    onSuccess: (res: any) => {
-      setPullBatch(res.batch_id)
-      toast.success("Faire order pull started", {
-        description: "Running in the background. Polling progress…",
-      })
-    },
-    onError: (err: any) =>
-      toast.error("Failed to start order pull", { description: err.message }),
-  })
-
-  // Poll both batches until finished.
-  const pushStatus = useQuery({
-    queryKey: ["faire", "bulk", pushBatch],
-    enabled: !!pushBatch,
-    refetchInterval: (q) =>
-      (q.state.data as any)?.progress?.finished ? false : 3000,
-    queryFn: () => faireApi.bulkStatus(pushBatch!),
-  })
-  const pullStatus = useQuery({
-    queryKey: ["faire", "ingest", pullBatch],
-    enabled: !!pullBatch,
-    refetchInterval: (q) =>
-      (q.state.data as any)?.progress?.finished ? false : 3000,
-    queryFn: () => faireApi.ingestStatus(pullBatch!),
-  })
-
-  const pushProgress = (pushStatus.data as any)?.progress
-  const pullProgress = (pullStatus.data as any)?.progress
-
-  const handlePush = () => {
-    const ids = productIds
-      .split(/[\s,]+/)
-      .map((s) => s.trim())
-      .filter(Boolean)
-    if (!ids.length) {
-      toast.error("Enter at least one product id")
-      return
-    }
-    pushMutation.mutate(ids)
-  }
-
-  return (
-    <Container className="divide-y p-0">
-      <div className="px-6 py-4">
-        <Heading>Bulk operations</Heading>
-        <Text className="text-ui-fg-subtle" size="small">
-          Push many products to Faire, or pull wholesale orders from Faire into
-          Medusa. Both run as long-running background workflows.
-        </Text>
-      </div>
-      <div className="px-6 py-4 flex flex-col gap-6">
-        {/* Push products */}
-        <div className="flex flex-col gap-3">
-          <div className="flex flex-col gap-1">
-            <Label>Push products to Faire</Label>
-            <Text className="text-ui-fg-subtle" size="small">
-              Comma- or line-separated Medusa product IDs.
-            </Text>
-          </div>
-          <textarea
-            className="border-ui-border-base rounded-lg border px-3 py-2 text-sm min-h-[72px]"
-            placeholder="prod_01..., prod_02..."
-            value={productIds}
-            onChange={(e) => setProductIds(e.target.value)}
-            disabled={!connected || pushMutation.isPending}
-          />
-          <div className="flex items-center gap-3">
-            <Button
-              size="small"
-              onClick={handlePush}
-              disabled={!connected || pushMutation.isPending}
-              isLoading={pushMutation.isPending}
-            >
-              Start bulk push
-            </Button>
-            {pushBatch && pushProgress && (
-              <BulkProgress
-                label="Push"
-                progress={pushProgress}
-                status={(pushStatus.data as any)?.batch?.status}
-              />
-            )}
-          </div>
-        </div>
-
-        {/* Pull orders */}
-        <div className="flex flex-col gap-3">
-          <div className="flex flex-col gap-1">
-            <Label>Pull Faire orders into Medusa</Label>
-            <Text className="text-ui-fg-subtle" size="small">
-              Ingests all available Faire orders as Medusa orders (idempotent).
-            </Text>
-          </div>
-          <div className="flex items-center gap-3">
-            <Button
-              size="small"
-              variant="secondary"
-              onClick={() => pullMutation.mutate()}
-              disabled={!connected || pullMutation.isPending}
-              isLoading={pullMutation.isPending}
-            >
-              Start order pull
-            </Button>
-            {pullBatch && pullProgress && (
-              <BulkProgress
-                label="Pull"
-                progress={pullProgress}
-                status={(pullStatus.data as any)?.batch?.status}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </Container>
-  )
-}
-
-const BulkProgress = ({
-  label,
-  progress,
-  status,
-}: {
-  label: string
-  progress: { total: number; done: number; pct: number; finished: boolean }
-  status?: string
-}) => (
-  <div className="flex items-center gap-3">
-    <StatusBadge color={progress.finished ? (status === "failed" ? "red" : "green") : "orange"}>
-      {label}: {progress.done}/{progress.total || "?"} ({progress.pct}%)
-    </StatusBadge>
-    {progress.finished && (
-      <Text className="text-ui-fg-subtle" size="small">
-        {status === "failed" ? "Completed with errors" : "Done"}
-      </Text>
-    )}
-  </div>
-)
-
 export const config = defineRouteConfig({
   label: "Faire",
   icon: BuildingStorefront,

package/src/admin/routes/settings/oauth/faire/callback/page.tsx

@@ -1,44 +1,87 @@
 import { Container, Heading, Text, Alert, Button } from "@medusajs/ui"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { useNavigate, useSearchParams } from "react-router-dom"
 import { faireApi } from "../../../../../lib/api"
 
+/**
+ * Faire redirects here with `?code=...&state=...`. Faire OAuth codes are
+ * single-use: exchanging the same code twice yields `invalid_grant`.
+ *
+ * A `useRef` guard is not sufficient — React StrictMode (dev) simulates an
+ * unmount/remount which resets the ref, and any real remount (e.g. a parent
+ * re-render, route transition, or HMR) would too. We therefore persist the
+ * "already exchanged" flag in `sessionStorage` keyed by the code itself, which
+ * survives remounts. We also short-circuit if Faire is already connected.
+ */
+const EXCHANGED_PREFIX = "faire:oauth:exchanged:"
+
 const FaireOauthCallback = () => {
   const [params] = useSearchParams()
   const navigate = useNavigate()
   const [error, setError] = useState<string | null>(null)
-  // OAuth codes are single-use. React StrictMode (dev) double-invokes effects,
-  // and any re-render would re-run this — exchanging the same code twice yields
-  // an invalid_grant error. Guard so it runs once.
-  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
     }
+
+    // Faire returns the authorization code as `authorization_code`
+    // (some flows use `code`). Accept either.
+    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
+    }
+
+    // Already exchanged this exact code in this browser session — don't retry.
+    // This guard is checked AND set synchronously, before any async work, so
+    // that React StrictMode's double effect invocation (or any concurrent
+    // remount) cannot race past it and exchange the single-use code twice.
+    if (sessionStorage.getItem(EXCHANGED_PREFIX + code)) {
+      navigate("/settings/faire", { replace: true })
       return
     }
+    // Claim the code synchronously — any subsequent effect run will see this.
+    sessionStorage.setItem(EXCHANGED_PREFIX + code, "1")
 
-    faireApi
-      .callback(code, state)
-      .then(() => {
-        navigate("/settings/faire", { replace: true })
-      })
-      .catch((err: any) => {
-        setError(err.message || "Failed to complete Faire authorization.")
-      })
+    let cancelled = false
+
+    const run = async () => {
+      try {
+        await faireApi.callback(code, state)
+        if (!cancelled) navigate("/settings/faire", { replace: true })
+      } catch (err: any) {
+        if (!cancelled) {
+          // "code already used" can happen if a prior exchange succeeded but
+          // the response was lost. If we are in fact connected, treat as success.
+          try {
+            const status: any = await faireApi.status()
+            if (status?.connected) {
+              navigate("/settings/faire", { replace: true })
+              return
+            }
+          } catch {
+            /* ignore */
+          }
+          setError(err.message || "Failed to complete Faire authorization.")
+          setExchanging(false)
+        }
+      }
+    }
+
+    run()
+
+    return () => {
+      cancelled = true
+    }
   }, [params, navigate])
 
   return (
@@ -49,7 +92,7 @@ const FaireOauthCallback = () => {
           <Text>{error}</Text>
         </Alert>
       ) : (
-        <Text>Completing authorization, please wait…</Text>
+        <Text>{exchanging ? "Completing authorization, please wait…" : "Redirecting…"}</Text>
       )}
       {error && (
         <Button