@jytextiles/medusa-plugin-faire-store-sync 0.2.7 → 0.2.9

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

@@ -2,15 +2,24 @@ import { defineWidgetConfig } from "@medusajs/admin-sdk"
 import {
   Button,
   Container,
+  Drawer,
   Heading,
+  Input,
+  Label,
   Text,
   Alert,
+  Badge,
   StatusBadge,
   Tooltip,
+  clx,
+  toast,
 } from "@medusajs/ui"
 import { DetailWidgetProps, AdminProduct } from "@medusajs/framework/types"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { faireApi } from "../lib/api"
+import { useMemo, useState } from "react"
+import { faireApi, sdk } from "../lib/api"
+
+const MAX_RENDERED = 60
 
 const badgeColor = (status?: string): "green" | "red" | "orange" | "grey" => {
   switch (status) {
@@ -83,6 +92,72 @@ const FaireProductWidget = ({ data }: DetailWidgetProps<AdminProduct>) => {
 
   const notReady = connected && readiness && !readiness.ready_to_publish
 
+  // ── Faire category (taxonomy_type) picker ────────────────────────────────
+  // Faire requires a category per product. Sync resolves it in this order:
+  //   metadata.faire_taxonomy_type_id → metadata.faire_category →
+  //   product Type (by name) → account fallback. This panel pins an exact
+  //   `tt_…` id in metadata so the mapping is unambiguous.
+  const metadata: Record<string, any> = (data as any).metadata || {}
+  const productType: string | undefined = (data as any).type?.value
+
+  const [pickerOpen, setPickerOpen] = useState(false)
+  const [pickerSearch, setPickerSearch] = useState("")
+  // Local echo of the saved pin so the panel updates instantly (the parent
+  // product page's `data.metadata` only refreshes on its own refetch).
+  const [pinnedOverride, setPinnedOverride] = useState<string | null | undefined>(
+    undefined
+  )
+
+  const taxonomyQuery = useQuery({
+    queryKey: ["faire", "taxonomy"],
+    enabled: pickerOpen,
+    queryFn: async () => (await faireApi.taxonomy()).taxonomy ?? [],
+  })
+  const taxonomy = taxonomyQuery.data ?? []
+
+  const pinnedId: string | undefined =
+    pinnedOverride !== undefined
+      ? pinnedOverride ?? undefined
+      : metadata.faire_taxonomy_type_id
+  const pinnedName = useMemo(() => {
+    if (!pinnedId) return undefined
+    if (!/^tt_/.test(String(pinnedId))) return String(pinnedId)
+    return taxonomy.find((t: any) => t.id === pinnedId)?.name
+  }, [pinnedId, taxonomy])
+
+  // What the sync will actually use as the category source, for display.
+  const resolvedSource = pinnedId
+    ? { label: pinnedName || String(pinnedId), from: "pinned" as const }
+    : metadata.faire_category
+      ? { label: String(metadata.faire_category), from: "metadata" as const }
+      : productType
+        ? { label: productType, from: "type" as const }
+        : { label: "Account fallback", from: "fallback" as const }
+
+  const filteredTaxonomy = useMemo(() => {
+    const q = pickerSearch.trim().toLowerCase()
+    const list = q
+      ? taxonomy.filter((t: any) => t.name.toLowerCase().includes(q))
+      : taxonomy
+    return list.slice(0, MAX_RENDERED)
+  }, [taxonomy, pickerSearch])
+
+  const saveCategory = useMutation({
+    mutationFn: (value: string | null) =>
+      sdk.admin.product.update(data.id, {
+        metadata: { ...metadata, faire_taxonomy_type_id: value },
+      }),
+    onSuccess: (_res, value) => {
+      setPinnedOverride(value)
+      queryClient.invalidateQueries({ queryKey: ["product", data.id] })
+      setPickerOpen(false)
+      setPickerSearch("")
+      toast.success(value ? "Faire category set" : "Faire category cleared")
+    },
+    onError: (err: any) =>
+      toast.error("Failed to save category", { description: err?.message }),
+  })
+
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
@@ -150,6 +225,37 @@ const FaireProductWidget = ({ data }: DetailWidgetProps<AdminProduct>) => {
           </Alert>
         )}
 
+        {/* Faire category (taxonomy_type) */}
+        <div className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2">
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-2">
+              <Text size="small" weight="plus">
+                Faire category
+              </Text>
+              <Badge size="2xsmall" color={resolvedSource.from === "fallback" ? "orange" : "grey"}>
+                {resolvedSource.from === "pinned"
+                  ? "Pinned"
+                  : resolvedSource.from === "type"
+                    ? "From Type"
+                    : resolvedSource.from === "metadata"
+                      ? "Metadata"
+                      : "Fallback"}
+              </Badge>
+            </div>
+            <Text size="small" className="text-ui-fg-subtle">
+              {resolvedSource.label}
+            </Text>
+          </div>
+          <Button
+            size="small"
+            variant="secondary"
+            disabled={!connected}
+            onClick={() => setPickerOpen(true)}
+          >
+            {pinnedId ? "Change" : "Set category"}
+          </Button>
+        </div>
+
         <div className="flex items-center gap-3">
           <Tooltip
             content={
@@ -169,6 +275,81 @@ const FaireProductWidget = ({ data }: DetailWidgetProps<AdminProduct>) => {
           </Tooltip>
         </div>
       </div>
+
+      {/* Category picker — searchable list from Faire's taxonomy API. */}
+      <Drawer open={pickerOpen} onOpenChange={setPickerOpen}>
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title>Pick a Faire category</Drawer.Title>
+            <Drawer.Description>
+              Search Faire's product taxonomy and pin an exact category to this
+              product.
+            </Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Body className="flex flex-col gap-3 overflow-hidden">
+            <Input
+              type="search"
+              autoFocus
+              placeholder="Search categories…"
+              value={pickerSearch}
+              onChange={(e) => setPickerSearch(e.target.value)}
+            />
+            <div className="flex flex-col gap-1 overflow-y-auto">
+              {taxonomyQuery.isLoading ? (
+                <Text size="small" className="text-ui-fg-subtle px-1 py-2">
+                  Loading categories…
+                </Text>
+              ) : filteredTaxonomy.length === 0 ? (
+                <Text size="small" className="text-ui-fg-subtle px-1 py-2">
+                  No categories match “{pickerSearch}”.
+                </Text>
+              ) : (
+                filteredTaxonomy.map((t: any) => (
+                  <button
+                    key={t.id}
+                    type="button"
+                    onClick={() => saveCategory.mutate(t.id)}
+                    disabled={saveCategory.isPending}
+                    className={clx(
+                      "flex items-center justify-between rounded-md px-3 py-2 text-left text-sm",
+                      "hover:bg-ui-bg-base-hover",
+                      t.id === pinnedId && "bg-ui-bg-highlight"
+                    )}
+                  >
+                    <span>{t.name}</span>
+                    {t.id === pinnedId && (
+                      <Badge size="2xsmall" color="green">
+                        Current
+                      </Badge>
+                    )}
+                  </button>
+                ))
+              )}
+              {!taxonomyQuery.isLoading &&
+                taxonomy.length > filteredTaxonomy.length && (
+                  <Text size="xsmall" className="text-ui-fg-muted px-1 py-1">
+                    Showing {filteredTaxonomy.length} of {taxonomy.length} — refine
+                    your search to narrow down.
+                  </Text>
+                )}
+            </div>
+          </Drawer.Body>
+          <Drawer.Footer>
+            {pinnedId && (
+              <Button
+                variant="secondary"
+                onClick={() => saveCategory.mutate(null)}
+                isLoading={saveCategory.isPending}
+              >
+                Clear
+              </Button>
+            )}
+            <Drawer.Close asChild>
+              <Button variant="secondary">Cancel</Button>
+            </Drawer.Close>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer>
     </Container>
   )
 }

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

@@ -13,7 +13,6 @@ export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
   const hasMarkup =
     settings.default_wholesale_markup_percent != null &&
     settings.default_wholesale_markup_percent > 0
-  const hasShipping = !!settings.default_shipping_policy_id
   const hasTaxonomy = !!settings.default_category
 
   res.json({
@@ -41,7 +40,6 @@ export const GET = async (req: MedusaRequest, res: MedusaResponse) => {
       connected,
       brand: hasBrand,
       wholesale_pricing: hasMarkup,
-      shipping_policy: hasShipping,
       taxonomy: hasTaxonomy,
       ready_to_publish: connected && hasBrand && hasTaxonomy,
     },

package/src/lib/faire-client.ts

@@ -498,8 +498,13 @@ export class FaireClient {
           data.results ??
           []
         ).map((t: any) => ({ id: String(t.id), name: String(t.name ?? "") }))
-      } catch {
-        this.taxonomyTypesCache = []
+      } catch (err: any) {
+        // Don't cache the failure — a transient/auth error shouldn't blank the
+        // picker for the rest of the process lifetime. Surface it so an empty
+        // list is diagnosable (e.g. a 401 from an un-decrypted token).
+        // eslint-disable-next-line no-console
+        console.warn("[faire-sync] getTaxonomyTypes failed:", err?.message)
+        return []
       }
     }
     return this.taxonomyTypesCache ?? []

package/src/modules/faire-sync/service.ts

@@ -256,8 +256,13 @@ class FaireSyncService extends MedusaService({
   async getTaxonomyTypes(): Promise<Array<{ id: string; name: string }>> {
     const account = await this.getActiveAccount()
     if (!account) return []
+    // Tokens are stored AES-256-GCM encrypted at rest — go through
+    // ensureFreshToken so we send Faire the DECRYPTED (and non-expired) token.
+    // Passing the raw ciphertext gets a 401 that the client silently swallows to
+    // [], which surfaces as an empty taxonomy picker.
+    const fresh = await this.ensureFreshToken(account)
     const client = this.getClient(account.auth_mode as "oauth" | "apiKey")
-    return client.getTaxonomyTypes(account.access_token)
+    return client.getTaxonomyTypes(fresh!.access_token)
   }
 
   /**

package/src/workflows/sync-product-to-faire.ts

@@ -131,6 +131,7 @@ const prepareProductStep = createStep(
         "description",
         "status",
         "metadata",
+        "type.value",
         "tags.*",
         "variants.*",
         "variants.prices.*",
@@ -238,11 +239,16 @@ const prepareProductStep = createStep(
 
     // Resolve taxonomy_type.id — REQUIRED by Faire create. Priority:
     //   product.metadata.faire_taxonomy_type_id (tt_… or a category name)
+    //   → product.metadata.faire_category (name)
+    //   → product.type.value (the native Medusa Product Type, matched by name)
     //   → settings.default_category (id or name) → error.
+    // Product Type is the natural per-product carrier; the product widget lets an
+    // operator pin an exact `tt_…` id in metadata when the type name is ambiguous.
     const client = service.getClient(input.auth_mode)
     const categoryHint =
       metadata.faire_taxonomy_type_id ||
       metadata.faire_category ||
+      product.type?.value ||
       settings.default_category ||
       ""
     const taxonomyTypeId = await client.resolveTaxonomyTypeId(
@@ -252,9 +258,9 @@ const prepareProductStep = createStep(
     if (!taxonomyTypeId) {
       throw new MedusaError(
         MedusaError.Types.INVALID_DATA,
-        "Faire requires a product category (taxonomy_type). Set a Faire " +
-          "category in sync settings (default_category) or on the product " +
-          "(metadata.faire_taxonomy_type_id — a `tt_…` id or a category name)."
+        "Faire requires a product category (taxonomy_type). Set the product's " +
+          "Type to a Faire category name, pick one from the Faire panel on the " +
+          "product page, or set a fallback category in Faire sync settings."
       )
     }