@jytextiles/medusa-plugin-faire-store-sync 0.1.0

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

@@ -0,0 +1,286 @@
+import {
+  Button,
+  Drawer,
+  Heading,
+  Label,
+  Skeleton,
+  StatusBadge,
+  Switch,
+  Text,
+  Toaster,
+  Tooltip,
+  clx,
+  toast,
+} from "@medusajs/ui"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { faireApi } from "../../../../lib/api"
+
+const STATUS_KEY = ["faire", "status"]
+const PARENT = "/settings/faire"
+
+// Radix Select can't use an empty-string item value, so "Not set" uses this
+// sentinel. It must never be persisted — map it back to null on save.
+const NONE = "__none__"
+
+const cleanSettings = (form: any) => {
+  const out: any = { ...form }
+  for (const key of [
+    "default_brand_id",
+    "default_shipping_policy_id",
+    "default_category",
+  ]) {
+    if (!out[key] || out[key] === NONE) out[key] = null
+  }
+  if (
+    out.default_wholesale_markup_percent === "" ||
+    out.default_wholesale_markup_percent === NONE
+  ) {
+    out.default_wholesale_markup_percent = null
+  }
+  if (out.default_lead_time_days === "" || out.default_lead_time_days === NONE) {
+    out.default_lead_time_days = null
+  }
+  return out
+}
+
+type Status = {
+  connected: boolean
+  account: any | null
+  settings: any
+  readiness: {
+    connected: boolean
+    brand: boolean
+    wholesale_pricing: boolean
+    shipping_policy: boolean
+    ready_to_publish: boolean
+  }
+}
+
+/**
+ * Routed Sync-settings drawer. Lives at /settings/faire/settings so it's its
+ * own route (linkable, back-button friendly) rather than an inline <Drawer>.
+ */
+const FaireSyncSettingsDrawer = () => {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const [open, setOpen] = useState(true)
+  const [form, setForm] = useState<any>({})
+
+  const close = () => {
+    setOpen(false)
+    navigate(PARENT)
+  }
+
+  const statusQuery = useQuery({
+    queryKey: STATUS_KEY,
+    queryFn: () => faireApi.status() as Promise<Status>,
+  })
+  const status = statusQuery.data
+  const connected = !!status?.connected
+
+  useEffect(() => {
+    if (status?.settings) setForm(status.settings)
+  }, [status?.settings])
+
+  const saveMutation = useMutation({
+    mutationFn: (payload: any) => faireApi.saveSettings(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: STATUS_KEY })
+      toast.success("Sync settings saved")
+      close()
+    },
+    onError: (err: any) =>
+      toast.error("Failed to save settings", { description: err.message }),
+  })
+
+  return (
+    <Drawer open={open} onOpenChange={(o) => (o ? setOpen(true) : close())}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Sync settings</Drawer.Title>
+          <Drawer.Description>
+            Publish readiness and the defaults applied to every product pushed
+            to Faire.
+          </Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body className="flex flex-col gap-6 overflow-y-auto">
+          {statusQuery.isLoading ? (
+            <div className="flex flex-col gap-3">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <Skeleton key={i} className="h-10 w-full" />
+              ))}
+            </div>
+          ) : (
+            <>
+              {/* Readiness checklist */}
+              <div className="flex flex-col gap-3">
+                <div className="flex flex-col gap-1">
+                  <Heading level="h2">Publish readiness</Heading>
+                  <Text className="text-ui-fg-subtle" size="small">
+                    Faire needs a brand and a wholesale-pricing strategy to
+                    publish products. Missing fields sync products as drafts.
+                  </Text>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <ChecklistItem ok={status?.readiness.connected} label="Faire connected" />
+                  <ChecklistItem ok={status?.readiness.brand} label="Brand configured" />
+                  <ChecklistItem ok={status?.readiness.wholesale_pricing} label="Wholesale pricing" />
+                  <ChecklistItem ok={status?.readiness.shipping_policy} label="Shipping policy" />
+                </div>
+              </div>
+
+              {/* Defaults */}
+              <div className="flex flex-col gap-3">
+                <div className="flex flex-col gap-1">
+                  <Heading level="h2">Sync defaults</Heading>
+                  <Text className="text-ui-fg-subtle" size="small">
+                    Applied to every product unless overridden in product
+                    metadata.
+                  </Text>
+                </div>
+                <div className="grid grid-cols-1 gap-4">
+                  <Field label="Brand ID">
+                    <input
+                      className="border-ui-border-base rounded-lg border px-3 py-2 text-sm"
+                      value={String(form.default_brand_id ?? "")}
+                      onChange={(e) =>
+                        setForm({ ...form, default_brand_id: e.target.value || null })
+                      }
+                      disabled={!connected}
+                      placeholder="b_..."
+                    />
+                  </Field>
+                  <Field label="Wholesale markup % (off retail)">
+                    <Tooltip content="Wholesale price = retail × (100 − markup%) / 100. E.g. 50 → half of retail.">
+                      <input
+                        type="number"
+                        className="border-ui-border-base rounded-lg border px-3 py-2 text-sm"
+                        value={String(form.default_wholesale_markup_percent ?? "")}
+                        onChange={(e) =>
+                          setForm({
+                            ...form,
+                            default_wholesale_markup_percent: e.target.value
+                              ? Number(e.target.value)
+                              : null,
+                          })
+                        }
+                        disabled={!connected}
+                        placeholder="e.g. 50"
+                      />
+                    </Tooltip>
+                  </Field>
+                  <Field label="Default min order quantity">
+                    <input
+                      type="number"
+                      className="border-ui-border-base rounded-lg border px-3 py-2 text-sm"
+                      value={String(form.default_min_order_quantity ?? 1)}
+                      onChange={(e) =>
+                        setForm({
+                          ...form,
+                          default_min_order_quantity: e.target.value
+                            ? Number(e.target.value)
+                            : 1,
+                        })
+                      }
+                      disabled={!connected}
+                    />
+                  </Field>
+                  <Field label="Default lead time (days)">
+                    <input
+                      type="number"
+                      className="border-ui-border-base rounded-lg border px-3 py-2 text-sm"
+                      value={String(form.default_lead_time_days ?? "")}
+                      onChange={(e) =>
+                        setForm({
+                          ...form,
+                          default_lead_time_days: e.target.value
+                            ? Number(e.target.value)
+                            : null,
+                        })
+                      }
+                      disabled={!connected}
+                      placeholder="e.g. 14"
+                    />
+                  </Field>
+                  <Field label="Default category">
+                    <input
+                      className="border-ui-border-base rounded-lg border px-3 py-2 text-sm"
+                      value={String(form.default_category ?? "")}
+                      onChange={(e) =>
+                        setForm({ ...form, default_category: e.target.value || null })
+                      }
+                      disabled={!connected}
+                      placeholder="e.g. Home Decor"
+                    />
+                  </Field>
+                  <Field label="Follow product status">
+                    <Tooltip content="If on, published Medusa products are published on Faire; draft products sync as drafts.">
+                      <Switch
+                        checked={form.follow_product_status !== false}
+                        onCheckedChange={(v: boolean) =>
+                          setForm({ ...form, follow_product_status: v })
+                        }
+                      />
+                    </Tooltip>
+                  </Field>
+                  <Field label="Auto publish">
+                    <Tooltip content="Publish products to Faire automatically on sync (otherwise create as draft).">
+                      <Switch
+                        checked={!!form.auto_publish}
+                        onCheckedChange={(v: boolean) =>
+                          setForm({ ...form, auto_publish: v })
+                        }
+                      />
+                    </Tooltip>
+                  </Field>
+                </div>
+              </div>
+            </>
+          )}
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Button variant="secondary" onClick={close}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => saveMutation.mutate(cleanSettings(form))}
+            isLoading={saveMutation.isPending}
+            disabled={!connected}
+          >
+            Save settings
+          </Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+      <Toaster />
+    </Drawer>
+  )
+}
+
+const Field = ({ label, children }: { label: string; children: React.ReactNode }) => (
+  <div className="flex flex-col gap-1.5">
+    <Label>{label}</Label>
+    {children}
+  </div>
+)
+
+const ChecklistItem = ({ ok, label }: { ok?: boolean; label: string }) => (
+  <div
+    className={clx(
+      "flex items-center gap-2 rounded-lg border px-3 py-2",
+      ok
+        ? "border-ui-tag-green-border bg-ui-tag-green-bg"
+        : "border-ui-tag-red-border bg-ui-tag-red-bg"
+    )}
+  >
+    <StatusBadge color={ok ? "green" : "red"}>{ok ? "Ready" : "Missing"}</StatusBadge>
+    <Text>{label}</Text>
+  </div>
+)
+
+export const handle = {
+  breadcrumb: () => "Sync settings",
+}
+
+export default FaireSyncSettingsDrawer

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

@@ -0,0 +1,67 @@
+import { Container, Heading, Text, Alert, Button } from "@medusajs/ui"
+import { useEffect, useRef, useState } from "react"
+import { useNavigate, useSearchParams } from "react-router-dom"
+import { faireApi } from "../../../../../lib/api"
+
+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)
+
+  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}`
+      )
+      return
+    }
+    if (!code || !state) {
+      setError("Missing code or state in Faire callback.")
+      return
+    }
+
+    faireApi
+      .callback(code, state)
+      .then(() => {
+        navigate("/settings/faire", { replace: true })
+      })
+      .catch((err: any) => {
+        setError(err.message || "Failed to complete Faire authorization.")
+      })
+  }, [params, navigate])
+
+  return (
+    <Container className="flex flex-col items-center gap-4 p-8">
+      <Heading level="h1">Connecting Faire…</Heading>
+      {error ? (
+        <Alert variant="error">
+          <Text>{error}</Text>
+        </Alert>
+      ) : (
+        <Text>Completing authorization, please wait…</Text>
+      )}
+      {error && (
+        <Button
+          size="small"
+          variant="secondary"
+          onClick={() => navigate("/settings/faire", { replace: true })}
+        >
+          Back to Faire settings
+        </Button>
+      )}
+    </Container>
+  )
+}
+
+export default FaireOauthCallback

package/src/admin/widgets/faire-product-widget.tsx

@@ -0,0 +1,180 @@
+import { defineWidgetConfig } from "@medusajs/admin-sdk"
+import {
+  Button,
+  Container,
+  Heading,
+  Text,
+  Alert,
+  StatusBadge,
+  Tooltip,
+} from "@medusajs/ui"
+import { DetailWidgetProps, AdminProduct } from "@medusajs/framework/types"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { faireApi } from "../lib/api"
+
+const badgeColor = (status?: string): "green" | "red" | "orange" | "grey" => {
+  switch (status) {
+    case "synced":
+    case "success":
+      return "green"
+    case "failed":
+      return "red"
+    case "draft":
+    case "pending":
+      return "orange"
+    default:
+      return "grey"
+  }
+}
+
+const FaireProductWidget = ({ data }: DetailWidgetProps<AdminProduct>) => {
+  const queryClient = useQueryClient()
+  const productKey = ["faire", "product-status", data.id]
+
+  const statusQuery = useQuery({
+    queryKey: ["faire", "status"],
+    queryFn: () => faireApi.status() as Promise<any>,
+  })
+  const connected = !!statusQuery.data?.connected
+  const readiness = statusQuery.data?.readiness
+
+  const productStatusQuery = useQuery({
+    queryKey: productKey,
+    queryFn: () => faireApi.productStatus(data.id),
+    refetchInterval: (query) => {
+      const s = (query.state.data as any)?.latest?.status
+      return s === "draft" || s === "pending" ? 10_000 : false
+    },
+  })
+  const latest = productStatusQuery.data?.latest
+
+  const syncMutation = useMutation({
+    mutationFn: () => faireApi.syncProduct(data.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: productKey })
+    },
+  })
+  const result: any = syncMutation.data ? (syncMutation.data as any).result : null
+  const error = syncMutation.error
+    ? (syncMutation.error as any).message || "Sync failed"
+    : null
+
+  const view = result
+    ? {
+        published: result.published,
+        state: result.state,
+        product_url: result.product_url,
+        product_token: result.product_token,
+        warnings: result.warnings as string[] | undefined,
+        status: result.published ? "success" : result.state,
+      }
+    : latest
+      ? {
+          published: latest.published,
+          state: latest.product_state,
+          product_url: latest.product_url,
+          product_token: latest.product_token,
+          warnings: latest.error_message
+            ? String(latest.error_message).split(" | ")
+            : undefined,
+          status: latest.status,
+        }
+      : null
+
+  const notReady = connected && readiness && !readiness.ready_to_publish
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex flex-col gap-1">
+          <Heading level="h2">Faire Sync</Heading>
+          <Text className="text-ui-fg-subtle">
+            Sync this product to your Faire brand.
+          </Text>
+        </div>
+        {view && (
+          <StatusBadge color={badgeColor(view.status)}>
+            {view.published ? "Active" : view.state || view.status}
+          </StatusBadge>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-4 px-6 py-4">
+        {!connected && !statusQuery.isLoading && (
+          <Alert variant="warning">
+            <Text className="text-ui-fg-subtle">
+              Faire is not connected. Connect it under Settings → Faire.
+            </Text>
+          </Alert>
+        )}
+
+        {notReady && (
+          <Alert variant="warning">
+            <Text className="text-ui-fg-subtle">
+              Publish readiness incomplete (brand or wholesale pricing config is
+              missing). Syncing will still run and create the product as a draft.
+            </Text>
+          </Alert>
+        )}
+
+        {error && (
+          <Alert variant="error">
+            <Text className="text-ui-fg-subtle">{error}</Text>
+          </Alert>
+        )}
+
+        {view && (
+          <Alert variant={view.published ? "success" : "warning"}>
+            <div className="flex flex-col gap-1">
+              <Text>
+                {view.published
+                  ? "Published to Faire as active."
+                  : `Synced as ${view.state || view.status}.`}
+              </Text>
+              {view.warnings && view.warnings.length > 0 && (
+                <Text className="text-ui-fg-subtle">
+                  {view.warnings.join(" | ")}
+                </Text>
+              )}
+              {view.product_url && (
+                <a
+                  href={view.product_url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+                >
+                  {view.published ? "View on Faire →" : "Open in Faire →"}
+                </a>
+              )}
+            </div>
+          </Alert>
+        )}
+
+        <div className="flex items-center gap-3">
+          <Tooltip
+            content={
+              connected
+                ? undefined
+                : "Connect Faire under Settings → Faire first."
+            }
+          >
+            <Button
+              size="small"
+              isLoading={syncMutation.isPending}
+              disabled={!connected}
+              onClick={() => syncMutation.mutate()}
+            >
+              {view ? "Re-sync to Faire" : "Sync to Faire"}
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+export const config = defineWidgetConfig({
+  zone: "product.details.side.before",
+})
+
+export default FaireProductWidget

package/src/api/admin/faire/auth/authorize/route.ts

@@ -0,0 +1,10 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { FAIRE_SYNC_MODULE } from "../../../../../modules/faire-sync"
+import FaireSyncService from "../../../../../modules/faire-sync/service"
+
+// GET /admin/faire/auth/authorize — begins OAuth, returns the Faire authorize URL
+export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+  const { authorization_url, state } = await service.startOAuth()
+  res.json({ authorization_url, state })
+}

package/src/api/admin/faire/auth/callback/route.ts

@@ -0,0 +1,29 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { MedusaError } from "@medusajs/framework/utils"
+import { FAIRE_SYNC_MODULE } from "../../../../../modules/faire-sync"
+import FaireSyncService from "../../../../../modules/faire-sync/service"
+
+// POST /admin/faire/auth/callback — exchanges the OAuth code (called by the
+// admin SPA callback page, so it runs with an authenticated admin session).
+export const POST = async (req: MedusaRequest, res: MedusaResponse) => {
+  const { code, state } = req.body as { code: string; state: string }
+
+  if (!code || !state) {
+    throw new MedusaError(
+      MedusaError.Types.INVALID_DATA,
+      "code and state are required"
+    )
+  }
+
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+  const { account, brand } = await service.completeOAuth(code, state)
+
+  res.json({
+    account: {
+      id: (account as any).id,
+      brand_id: (account as any).brand_id,
+      brand_name: (account as any).brand_name,
+    },
+    brand,
+  })
+}

package/src/api/admin/faire/auth/disconnect/route.ts

@@ -0,0 +1,10 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { FAIRE_SYNC_MODULE } from "../../../../../modules/faire-sync"
+import FaireSyncService from "../../../../../modules/faire-sync/service"
+
+// POST /admin/faire/auth/disconnect
+export const POST = async (req: MedusaRequest, res: MedusaResponse) => {
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+  await service.disconnect()
+  res.json({ disconnected: true })
+}

package/src/api/admin/faire/brand/route.ts

@@ -0,0 +1,12 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { FAIRE_SYNC_MODULE } from "../../../../modules/faire-sync"
+import FaireSyncService from "../../../../modules/faire-sync/service"
+
+// GET /admin/faire/brand — the connected Faire brand (fresh token)
+export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+  const account = await service.ensureFreshToken()
+  const client = service.getClient()
+  const brand = await client.getBrand(account.access_token)
+  res.json({ brand })
+}

package/src/api/admin/faire/ingest/orders/[batchId]/route.ts

@@ -0,0 +1,31 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { MedusaError } from "@medusajs/framework/utils"
+import { FAIRE_SYNC_MODULE } from "../../../../../../modules/faire-sync"
+import FaireSyncService from "../../../../../../modules/faire-sync/service"
+
+// GET /admin/faire/ingest/orders/:batchId — poll bulk order-ingest progress
+export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
+  const { batchId } = req.params
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+
+  const batch = await service.retrieveFaireSyncBatch(batchId).catch(() => null)
+
+  if (!batch) {
+    throw new MedusaError(MedusaError.Types.NOT_FOUND, "Batch not found")
+  }
+
+  const total = (batch as any).total_products || 0
+  const done =
+    ((batch as any).synced_count || 0) + ((batch as any).failed_count || 0)
+
+  res.json({
+    batch,
+    progress: {
+      total,
+      done,
+      pct: total ? Math.round((done / total) * 100) : 0,
+      finished:
+        (batch as any).status === "completed" || (batch as any).status === "failed",
+    },
+  })
+}

package/src/api/admin/faire/ingest/orders/route.ts

@@ -0,0 +1,29 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { MedusaError } from "@medusajs/framework/utils"
+import { ingestFaireOrdersBulkWorkflow } from "../../../../../workflows/ingest-faire-orders-bulk"
+
+type IngestOrdersBody = {
+  limit?: number
+}
+
+// POST /admin/faire/ingest/orders — pull Faire orders and create Medusa orders
+// for them. Runs as a long-running background workflow; returns a batch id the
+// client can poll at GET /admin/faire/ingest/orders/:batchId.
+export const POST = async (
+  req: MedusaRequest<IngestOrdersBody>,
+  res: MedusaResponse
+) => {
+  const limit = req.body?.limit
+  if (limit != null && (!Number.isFinite(limit) || limit <= 0)) {
+    throw new MedusaError(
+      MedusaError.Types.INVALID_DATA,
+      "limit must be a positive number"
+    )
+  }
+
+  const { result } = await ingestFaireOrdersBulkWorkflow(req.scope).run({
+    input: { limit },
+  })
+
+  res.status(202).json({ batch_id: (result as any).batch_id, status: "processing" })
+}

package/src/api/admin/faire/products/route.ts

@@ -0,0 +1,14 @@
+import { MedusaRequest, MedusaResponse } from "@medusajs/framework/http"
+import { FAIRE_SYNC_MODULE } from "../../../../modules/faire-sync"
+import FaireSyncService from "../../../../modules/faire-sync/service"
+
+// GET /admin/faire/products — list products already on Faire (paginated)
+export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
+  const service: FaireSyncService = req.scope.resolve(FAIRE_SYNC_MODULE)
+  const account = await service.ensureFreshToken()
+  const client = service.getClient()
+  const limit = Number(req.query.limit) || 50
+  const page = req.query.page ? Number(req.query.page) : 1
+  const data = await client.listProducts(account.access_token, { limit, page })
+  res.json({ products: data.results, count: data.count })
+}