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

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

@@ -0,0 +1,263 @@
+import {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFilteringState,
+  DataTablePaginationState,
+  DataTableRowSelectionState,
+  Heading,
+  Input,
+  Skeleton,
+  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 }),
+  })
+
+  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>
+      <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

@@ -361,7 +361,15 @@ const BulkOperations = ({ connected }: { connected: boolean }) => {
             onChange={(e) => setProductIds(e.target.value)}
             disabled={!connected || pushMutation.isPending}
           />
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button
+              size="small"
+              variant="secondary"
+              disabled={!connected}
+              onClick={() => navigate("/settings/faire/bulk")}
+            >
+              Select products
+            </Button>
             <Button
               size="small"
               onClick={handlePush}

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