@withpotter/components 0.13.0-next.101

package/dist/features/calendar-sync-pane.js

@@ -0,0 +1,370 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import {
+  RefreshCw,
+  Calendar,
+  Check,
+  X,
+  Plus,
+  Trash2,
+  AlertCircle,
+  Loader2
+} from "lucide-react";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useApiMutation } from "@withpotter/hooks/use-api-mutation";
+import {
+  calendarSyncApi,
+  contentApi
+} from "@withpotter/lib/api";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { ChannelFeedsSection } from "@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/_components/channel-feeds-section";
+import {
+  ChannelFeedModal
+} from "@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/_components/channel-feed-modal";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { completeFlow } from "@withpotter/components/feedback/flow-completion";
+import { Button } from "@withpotter/ui-kit/button";
+import { ErrorBanner } from "@withpotter/ui-kit/error-banner";
+import { useDemoMode } from "@withpotter/hooks/use-demo-mode";
+import {
+  DEMO_CALENDAR_CONNECTIONS,
+  DEMO_FEED_PROPERTIES
+} from "@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/demo-data";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { MobilePageHeader } from "@withpotter/components/mobile/mobile-page-header";
+function CalendarSyncPane({
+  title,
+  showHeader = false
+}) {
+  const searchParams = useSearchParams();
+  const { toast } = useToast();
+  const [pendingId, setPendingId] = useState(null);
+  const { tenant } = useAuth();
+  const tenantSlug = tenant?.slug;
+  const [showChannelModal, setShowChannelModal] = useState(false);
+  const [channelBusy, setChannelBusy] = useState(false);
+  const [channelError, setChannelError] = useState(null);
+  const { data: propertyData, isLoading: loadingProperties } = useApiQuery(
+    ["channel-feed-properties"],
+    (slug) => contentApi.list(slug, "product", { behaviors: ["rentable"], limit: 100 })
+  );
+  const demoActive = useDemoMode();
+  const properties = demoActive ? DEMO_FEED_PROPERTIES : (propertyData?.data ?? []).map((item) => ({
+    id: item.id,
+    title: item.title
+  }));
+  const propertyNameById = Object.fromEntries(
+    properties.map((p) => [p.id, p.title])
+  );
+  const {
+    data: connections,
+    isLoading,
+    error,
+    refetch: refetchConnections
+  } = useApiQuery(
+    ["calendar-connections"],
+    (slug) => calendarSyncApi.listConnections(slug)
+  );
+  const shown = demoActive ? DEMO_CALENDAR_CONNECTIONS : connections ?? [];
+  const channelFeeds = shown.filter((c) => c.provider === "ical");
+  const ownCalendars = shown.filter((c) => c.provider !== "ical");
+  const showChannelFeeds = loadingProperties || properties.length > 0 || channelFeeds.length > 0;
+  const connectMutation = useApiMutation(
+    (slug) => calendarSyncApi.getOAuthUrl(slug, "google")
+  );
+  const syncMutation = useApiMutation((slug, id) => calendarSyncApi.triggerSync(slug, id), {
+    invalidate: [["calendar-connections"]]
+  });
+  const deleteMutation = useApiMutation(
+    (slug, id) => calendarSyncApi.deleteConnection(slug, id),
+    {
+      invalidate: [["calendar-connections"]]
+    }
+  );
+  useEffect(() => {
+    if (searchParams.get("connected") === "true") {
+      toast({
+        title: "Calendar connected",
+        description: "Your Google Calendar has been connected successfully."
+      });
+      completeFlow("calendar.connect");
+      window.history.replaceState({}, "", "/dashboard/calendar-sync");
+    }
+    if (searchParams.get("error")) {
+      toast({
+        title: "Connection failed",
+        description: searchParams.get("error") || "Failed to connect calendar.",
+        variant: "destructive"
+      });
+      window.history.replaceState({}, "", "/dashboard/calendar-sync");
+    }
+  }, [searchParams, toast]);
+  const handleConnect = async () => {
+    try {
+      const result = await connectMutation.mutateAsync();
+      window.location.href = result.url;
+    } catch {
+      toast({
+        title: "Error",
+        description: "Failed to start calendar connection.",
+        variant: "destructive"
+      });
+    }
+  };
+  const handleSync = async (id) => {
+    setPendingId({ kind: "sync", id });
+    try {
+      const result = await syncMutation.mutateAsync(id);
+      toast({
+        title: "Sync complete",
+        description: result.message
+      });
+    } catch {
+      toast({
+        title: "Sync failed",
+        description: "Failed to sync calendar events.",
+        variant: "destructive"
+      });
+    } finally {
+      setPendingId(null);
+    }
+  };
+  const handleSubscribeChannel = async (data) => {
+    if (!tenantSlug) return;
+    setChannelBusy(true);
+    setChannelError(null);
+    try {
+      const result = await calendarSyncApi.subscribeToFeed(tenantSlug, data);
+      setShowChannelModal(false);
+      toast({
+        title: "Channel connected",
+        description: `${result.eventsFound} block${result.eventsFound === 1 ? "" : "s"} imported from ${data.name}.`
+      });
+      completeFlow("channel.connect");
+      refetchConnections();
+    } catch (err) {
+      setChannelError(
+        err instanceof Error ? err.message : "Could not read that calendar link."
+      );
+    } finally {
+      setChannelBusy(false);
+    }
+  };
+  const handleSyncChannel = async (id) => {
+    if (!tenantSlug) return;
+    setPendingId({ kind: "sync", id });
+    try {
+      const result = await calendarSyncApi.syncFeed(tenantSlug, id);
+      toast({
+        title: "Calendar checked",
+        description: `${result.eventsFound} block${result.eventsFound === 1 ? "" : "s"} held, ${result.removed} released.`
+      });
+      refetchConnections();
+    } catch (err) {
+      toast({
+        title: "Could not read that calendar",
+        description: err instanceof Error ? err.message : "Please try again shortly.",
+        variant: "destructive"
+      });
+    } finally {
+      setPendingId(null);
+    }
+  };
+  const handleDelete = async (id) => {
+    setPendingId({ kind: "delete", id });
+    try {
+      await deleteMutation.mutateAsync(id);
+      toast({
+        title: "Calendar removed",
+        description: "Calendar connection has been deleted."
+      });
+    } catch {
+      toast({
+        title: "Error",
+        description: "Failed to remove calendar connection.",
+        variant: "destructive"
+      });
+    } finally {
+      setPendingId(null);
+    }
+  };
+  const STATUS_ICON = {
+    connected: /* @__PURE__ */ jsx(Check, {}),
+    syncing: /* @__PURE__ */ jsx(RefreshCw, { className: "animate-spin" }),
+    error: /* @__PURE__ */ jsx(AlertCircle, {}),
+    disconnected: /* @__PURE__ */ jsx(X, {})
+  };
+  const getStatusBadge = (status) => /* @__PURE__ */ jsx(
+    StatusBadge,
+    {
+      status,
+      icon: STATUS_ICON[status],
+      label: status === "connected" ? "Connected" : void 0
+    }
+  );
+  const GoogleIcon = () => /* @__PURE__ */ jsxs("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showChannelModal && /* @__PURE__ */ jsx(
+      ChannelFeedModal,
+      {
+        properties,
+        loadingProperties: demoActive ? false : loadingProperties,
+        busy: channelBusy,
+        error: channelError,
+        onSubscribe: handleSubscribeChannel,
+        onClose: () => setShowChannelModal(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: showHeader ? "space-y-6 max-w-4xl mx-auto" : "space-y-6", children: [
+      showHeader && title ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MobilePageHeader, { title }),
+        /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-[var(--text-primary)]", children: title }) })
+      ] }) : null,
+      isLoading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-[var(--text-muted)]" }) }),
+      error ? /* @__PURE__ */ jsx(ErrorBanner, { children: "Failed to load calendar connections. Please try again." }) : null,
+      !isLoading && !error && showChannelFeeds && /* @__PURE__ */ jsx(
+        ChannelFeedsSection,
+        {
+          feeds: channelFeeds,
+          propertyNameById,
+          syncingId: pendingId?.kind === "sync" ? pendingId.id : null,
+          deletingId: pendingId?.kind === "delete" ? pendingId.id : null,
+          onAdd: () => {
+            setChannelError(null);
+            setShowChannelModal(true);
+          },
+          onSync: handleSyncChannel,
+          onDelete: handleDelete,
+          formatDateTime: (iso) => new Date(iso).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "2-digit"
+          })
+        }
+      ),
+      !isLoading && !error && /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Your calendar" }),
+          ownCalendars.length > 0 && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handleConnect,
+              loading: connectMutation.isPending,
+              icon: /* @__PURE__ */ jsx(Plus, {}),
+              children: "Add another calendar"
+            }
+          )
+        ] }),
+        ownCalendars.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "surface p-12 text-center", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "size-12 text-[var(--text-muted)] mx-auto mb-4" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-[var(--text-primary)] mb-2", children: "No calendars connected" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)] mb-4", children: "Connect your Google Calendar to sync bookings automatically." }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleConnect,
+              disabled: connectMutation.isPending,
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                "Connect calendar"
+              ]
+            }
+          )
+        ] }) : ownCalendars.map((connection) => /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-md bg-[var(--bg-muted)] flex items-center justify-center", children: connection.provider === "google" ? /* @__PURE__ */ jsx(GoogleIcon, {}) : /* @__PURE__ */ jsx(Calendar, { className: "size-5 text-[var(--text-secondary)]" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-[var(--text-primary)]", children: connection.name }),
+                connection.externalCalendarId && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: connection.externalCalendarId }),
+                connection.lastErrorMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--error)] mt-1", children: connection.lastErrorMessage })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: getStatusBadge(connection.status) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--border-subtle)] flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--text-tertiary)]", children: [
+              connection.lastSyncAt && /* @__PURE__ */ jsxs(Fragment, { children: [
+                "Last synced:",
+                " ",
+                new Date(connection.lastSyncAt).toLocaleString()
+              ] }),
+              connection.syncedEventsCount > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-2", children: [
+                "(",
+                connection.syncedEventsCount,
+                " events)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: () => handleSync(connection.id),
+                  disabled: syncMutation.isPending || connection.status === "syncing",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        className: `w-4 h-4 ${syncMutation.isPending || connection.status === "syncing" ? "animate-spin" : ""}`
+                      }
+                    ),
+                    syncMutation.isPending || connection.status === "syncing" ? "Syncing..." : "Sync Now"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghostDanger",
+                  size: "icon",
+                  "aria-label": `Disconnect ${connection.name}`,
+                  onClick: () => handleDelete(connection.id),
+                  disabled: deleteMutation.isPending,
+                  children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+                }
+              )
+            ] })
+          ] })
+        ] }, connection.id))
+      ] })
+    ] })
+  ] });
+}
+export {
+  CalendarSyncPane
+};
+//# sourceMappingURL=calendar-sync-pane.js.map

package/dist/features/calendar-sync-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/calendar-sync-pane.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type ReactNode } from 'react';\nimport { useSearchParams } from 'next/navigation';\nimport {\n  RefreshCw,\n  Calendar,\n  Check,\n  X,\n  Plus,\n  Trash2,\n  AlertCircle,\n  Loader2,\n} from 'lucide-react';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useApiMutation } from '@withpotter/hooks/use-api-mutation';\nimport {\n  calendarSyncApi,\n  contentApi,\n  type CalendarConnectionItem,\n} from '@withpotter/lib/api';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { ChannelFeedsSection } from '@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/_components/channel-feeds-section';\nimport {\n  ChannelFeedModal,\n  type PropertyOption,\n} from '@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/_components/channel-feed-modal';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { completeFlow } from '@withpotter/components/feedback/flow-completion';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { ErrorBanner } from '@withpotter/ui-kit/error-banner';\nimport { useDemoMode } from '@withpotter/hooks/use-demo-mode';\nimport {\n  DEMO_CALENDAR_CONNECTIONS,\n  DEMO_FEED_PROPERTIES,\n} from '@withpotter/pages-bookings/dashboard/(bookings)/calendar-sync/demo-data';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\n\nimport { MobilePageHeader } from '@withpotter/components/mobile/mobile-page-header';\n\n/**\n * Everything about calendars that are not ours: the feeds we import and the\n * calendar we export to.\n *\n * A component rather than a page, because two surfaces show it. A short-let\n * and an events business reach it as their own nav row; an appointments\n * business reaches it as a tab on the surface that owns the rest of its\n * availability, and neither should be a second implementation of the other.\n */\nexport function CalendarSyncPane({\n  title,\n  showHeader = false,\n}: {\n  /** Rendered as the page heading. Only when this pane IS the page. */\n  title?: string;\n  showHeader?: boolean;\n}) {\n  const searchParams = useSearchParams();\n  const { toast } = useToast();\n  const [pendingId, setPendingId] = useState<{\n    kind: 'sync' | 'delete';\n    id: string;\n  } | null>(null);\n  const { tenant } = useAuth();\n  const tenantSlug = tenant?.slug;\n  const [showChannelModal, setShowChannelModal] = useState(false);\n  const [channelBusy, setChannelBusy] = useState(false);\n  const [channelError, setChannelError] = useState<string | null>(null);\n\n  // Only rentable listings can carry a channel calendar: a feed belongs to\n  // something somebody else can book, which is what `rentable` means.\n  const { data: propertyData, isLoading: loadingProperties } = useApiQuery(\n    ['channel-feed-properties'],\n    (slug) =>\n      contentApi.list(slug, 'product', { behaviors: ['rentable'], limit: 100 }),\n  );\n  const demoActive = useDemoMode();\n  const properties: PropertyOption[] = demoActive\n    ? DEMO_FEED_PROPERTIES\n    : (propertyData?.data ?? []).map((item) => ({\n        id: item.id,\n        title: item.title,\n      }));\n  const propertyNameById = Object.fromEntries(\n    properties.map((p) => [p.id, p.title]),\n  );\n\n  const {\n    data: connections,\n    isLoading,\n    error,\n    refetch: refetchConnections,\n  } = useApiQuery<CalendarConnectionItem[]>(['calendar-connections'], (slug) =>\n    calendarSyncApi.listConnections(slug),\n  );\n\n  // Two opposite directions, listed apart: Google is an EXPORT of our bookings,\n  // a channel feed is an IMPORT of somebody else's. A page that shows them\n  // together cannot say which is which, and an operator who connects Google\n  // could reasonably believe they are protected from double-booking when\n  // nothing is reading anyone else's calendar.\n  const shown = demoActive ? DEMO_CALENDAR_CONNECTIONS : (connections ?? []);\n  const channelFeeds = shown.filter((c) => c.provider === 'ical');\n  const ownCalendars = shown.filter((c) => c.provider !== 'ical');\n  /**\n   * Whether importing somebody else's calendar is a thing this business does.\n   *\n   * A feed is scoped to one `rentable` listing — that is what the modal picks\n   * from. A salon has bookable services and no rentable anything, so the whole\n   * import half of this page was furniture for them: a heading, an explanation\n   * and an Add button that opens a picker with nothing in it. Kept visible\n   * while the listings are still loading and whenever a feed already exists, so\n   * an existing connection never vanishes on a slow request.\n   */\n  const showChannelFeeds =\n    loadingProperties || properties.length > 0 || channelFeeds.length > 0;\n\n  const connectMutation = useApiMutation<{ url: string }, void>((slug) =>\n    calendarSyncApi.getOAuthUrl(slug, 'google'),\n  );\n\n  const syncMutation = useApiMutation<\n    { success: boolean; eventsSynced: number; message: string },\n    string\n  >((slug, id) => calendarSyncApi.triggerSync(slug, id), {\n    invalidate: [['calendar-connections']],\n  });\n\n  const deleteMutation = useApiMutation<void, string>(\n    (slug, id) => calendarSyncApi.deleteConnection(slug, id),\n    {\n      invalidate: [['calendar-connections']],\n    },\n  );\n\n  // Handle OAuth redirect params\n  useEffect(() => {\n    if (searchParams.get('connected') === 'true') {\n      toast({\n        title: 'Calendar connected',\n        description: 'Your Google Calendar has been connected successfully.',\n      });\n      completeFlow('calendar.connect');\n      // Clean URL params\n      window.history.replaceState({}, '', '/dashboard/calendar-sync');\n    }\n    if (searchParams.get('error')) {\n      toast({\n        title: 'Connection failed',\n        description: searchParams.get('error') || 'Failed to connect calendar.',\n        variant: 'destructive',\n      });\n      window.history.replaceState({}, '', '/dashboard/calendar-sync');\n    }\n  }, [searchParams, toast]);\n\n  const handleConnect = async () => {\n    try {\n      const result = await connectMutation.mutateAsync();\n      // Redirect to Google OAuth\n      window.location.href = result.url;\n    } catch {\n      toast({\n        title: 'Error',\n        description: 'Failed to start calendar connection.',\n        variant: 'destructive',\n      });\n    }\n  };\n\n  const handleSync = async (id: string) => {\n    setPendingId({ kind: 'sync', id });\n    try {\n      const result = await syncMutation.mutateAsync(id);\n      toast({\n        title: 'Sync complete',\n        description: result.message,\n      });\n    } catch {\n      toast({\n        title: 'Sync failed',\n        description: 'Failed to sync calendar events.',\n        variant: 'destructive',\n      });\n    } finally {\n      setPendingId(null);\n    }\n  };\n\n  const handleSubscribeChannel = async (data: {\n    feedUrl: string;\n    name: string;\n    propertyId: string;\n  }) => {\n    if (!tenantSlug) return;\n    setChannelBusy(true);\n    setChannelError(null);\n    try {\n      const result = await calendarSyncApi.subscribeToFeed(tenantSlug, data);\n      setShowChannelModal(false);\n      // Report the count, not a bare success: it is the only evidence the link\n      // was the right one.\n      toast({\n        title: 'Channel connected',\n        description: `${result.eventsFound} block${\n          result.eventsFound === 1 ? '' : 's'\n        } imported from ${data.name}.`,\n      });\n      completeFlow('channel.connect');\n      refetchConnections();\n    } catch (err) {\n      setChannelError(\n        err instanceof Error\n          ? err.message\n          : 'Could not read that calendar link.',\n      );\n    } finally {\n      setChannelBusy(false);\n    }\n  };\n\n  const handleSyncChannel = async (id: string) => {\n    if (!tenantSlug) return;\n    setPendingId({ kind: 'sync', id });\n    try {\n      const result = await calendarSyncApi.syncFeed(tenantSlug, id);\n      toast({\n        title: 'Calendar checked',\n        description: `${result.eventsFound} block${\n          result.eventsFound === 1 ? '' : 's'\n        } held, ${result.removed} released.`,\n      });\n      refetchConnections();\n    } catch (err) {\n      toast({\n        title: 'Could not read that calendar',\n        description:\n          err instanceof Error ? err.message : 'Please try again shortly.',\n        variant: 'destructive',\n      });\n    } finally {\n      setPendingId(null);\n    }\n  };\n\n  const handleDelete = async (id: string) => {\n    setPendingId({ kind: 'delete', id });\n    try {\n      await deleteMutation.mutateAsync(id);\n      toast({\n        title: 'Calendar removed',\n        description: 'Calendar connection has been deleted.',\n      });\n    } catch {\n      toast({\n        title: 'Error',\n        description: 'Failed to remove calendar connection.',\n        variant: 'destructive',\n      });\n    } finally {\n      setPendingId(null);\n    }\n  };\n\n  /**\n   * The colour lives in StatusBadge, which owns the one map for the whole app.\n   * This is only the glyph and the wording: `syncing` and `disconnected` are\n   * absent from that map on purpose and resolve to the quiet grey, the same\n   * treatment `pending` and `processing` get.\n   */\n  const STATUS_ICON: Record<string, ReactNode> = {\n    connected: <Check />,\n    syncing: <RefreshCw className=\"animate-spin\" />,\n    error: <AlertCircle />,\n    disconnected: <X />,\n  };\n\n  const getStatusBadge = (status: CalendarConnectionItem['status']) => (\n    <StatusBadge\n      status={status}\n      icon={STATUS_ICON[status]}\n      label={status === 'connected' ? 'Connected' : undefined}\n    />\n  );\n\n  const GoogleIcon = () => (\n    <svg className=\"w-5 h-5\" viewBox=\"0 0 24 24\">\n      <path\n        fill=\"#4285F4\"\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n      />\n      <path\n        fill=\"#EA4335\"\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n      />\n    </svg>\n  );\n\n  return (\n    <>\n      {showChannelModal && (\n        <ChannelFeedModal\n          properties={properties}\n          loadingProperties={demoActive ? false : loadingProperties}\n          busy={channelBusy}\n          error={channelError}\n          onSubscribe={handleSubscribeChannel}\n          onClose={() => setShowChannelModal(false)}\n        />\n      )}\n      <div className={showHeader ? 'space-y-6 max-w-4xl mx-auto' : 'space-y-6'}>\n        {showHeader && title ? (\n          <>\n            <MobilePageHeader title={title} />\n            <div className=\"hidden lg:block\">\n              <h1 className=\"text-title font-semibold text-[var(--text-primary)]\">\n                {title}\n              </h1>\n            </div>\n          </>\n        ) : null}\n\n        {/* Loading */}\n        {isLoading && (\n          <div className=\"flex items-center justify-center py-12\">\n            <Loader2 className=\"size-6 animate-spin text-[var(--text-muted)]\" />\n          </div>\n        )}\n\n        {/* Error */}\n        {error ? (\n          <ErrorBanner>\n            Failed to load calendar connections. Please try again.\n          </ErrorBanner>\n        ) : null}\n\n        {/* Channel calendars — somebody else's bookings, holding our dates.\n            Only for a business that has something a channel could list: a feed\n            attaches to a `rentable` listing, so an appointments business was\n            being shown a whole section whose Add button opens an empty picker. */}\n        {!isLoading && !error && showChannelFeeds && (\n          <ChannelFeedsSection\n            feeds={channelFeeds}\n            propertyNameById={propertyNameById}\n            syncingId={pendingId?.kind === 'sync' ? pendingId.id : null}\n            deletingId={pendingId?.kind === 'delete' ? pendingId.id : null}\n            onAdd={() => {\n              setChannelError(null);\n              setShowChannelModal(true);\n            }}\n            onSync={handleSyncChannel}\n            onDelete={handleDelete}\n            formatDateTime={(iso) =>\n              new Date(iso).toLocaleDateString('en-US', {\n                month: 'short',\n                day: 'numeric',\n                hour: 'numeric',\n                minute: '2-digit',\n              })\n            }\n          />\n        )}\n\n        {/* Your own calendar — an EXPORT: our bookings, in their calendar. */}\n        {!isLoading && !error && (\n          <section className=\"space-y-3\">\n            <div className=\"flex items-center justify-between\">\n              {/* Heading alone — the sentence under it was the banned subtitle. */}\n              <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n                Your calendar\n              </h2>\n              {ownCalendars.length > 0 && (\n                <Button\n                  variant=\"secondary\"\n                  onClick={handleConnect}\n                  loading={connectMutation.isPending}\n                  icon={<Plus />}\n                >\n                  Add another calendar\n                </Button>\n              )}\n            </div>\n            {ownCalendars.length === 0 ? (\n              <div className=\"surface p-12 text-center\">\n                <Calendar className=\"size-12 text-[var(--text-muted)] mx-auto mb-4\" />\n                <h3 className=\"text-lg font-medium text-[var(--text-primary)] mb-2\">\n                  No calendars connected\n                </h3>\n                <p className=\"text-[var(--text-tertiary)] mb-4\">\n                  Connect your Google Calendar to sync bookings automatically.\n                </p>\n                <Button\n                  onClick={handleConnect}\n                  disabled={connectMutation.isPending}\n                >\n                  <Plus className=\"size-4\" />\n                  Connect calendar\n                </Button>\n              </div>\n            ) : (\n              ownCalendars.map((connection) => (\n                <div key={connection.id} className=\"surface p-4\">\n                  <div className=\"flex items-start justify-between\">\n                    <div className=\"flex items-start gap-4\">\n                      <div className=\"w-10 h-10 rounded-md bg-[var(--bg-muted)] flex items-center justify-center\">\n                        {connection.provider === 'google' ? (\n                          <GoogleIcon />\n                        ) : (\n                          <Calendar className=\"size-5 text-[var(--text-secondary)]\" />\n                        )}\n                      </div>\n                      <div>\n                        <h3 className=\"text-sm font-medium text-[var(--text-primary)]\">\n                          {connection.name}\n                        </h3>\n                        {connection.externalCalendarId && (\n                          <p className=\"text-sm text-[var(--text-tertiary)]\">\n                            {connection.externalCalendarId}\n                          </p>\n                        )}\n                        {connection.lastErrorMessage && (\n                          <p className=\"text-xs text-[var(--error)] mt-1\">\n                            {connection.lastErrorMessage}\n                          </p>\n                        )}\n                      </div>\n                    </div>\n\n                    <div className=\"flex items-center gap-3\">\n                      {getStatusBadge(connection.status)}\n                    </div>\n                  </div>\n\n                  <div className=\"mt-4 pt-4 border-t border-[var(--border-subtle)] flex items-center justify-between\">\n                    <div className=\"text-xs text-[var(--text-tertiary)]\">\n                      {connection.lastSyncAt && (\n                        <>\n                          Last synced:{' '}\n                          {new Date(connection.lastSyncAt).toLocaleString()}\n                        </>\n                      )}\n                      {connection.syncedEventsCount > 0 && (\n                        <span className=\"ml-2\">\n                          ({connection.syncedEventsCount} events)\n                        </span>\n                      )}\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <Button\n                        variant=\"ghost\"\n                        onClick={() => handleSync(connection.id)}\n                        disabled={\n                          syncMutation.isPending ||\n                          connection.status === 'syncing'\n                        }\n                      >\n                        <RefreshCw\n                          className={`w-4 h-4 ${\n                            syncMutation.isPending ||\n                            connection.status === 'syncing'\n                              ? 'animate-spin'\n                              : ''\n                          }`}\n                        />\n                        {syncMutation.isPending ||\n                        connection.status === 'syncing'\n                          ? 'Syncing...'\n                          : 'Sync Now'}\n                      </Button>\n                      {/* `ghostDanger`: red on hover AND focus. Was a plain\n                          `ghost`, and unlabelled. */}\n                      <Button\n                        variant=\"ghostDanger\"\n                        size=\"icon\"\n                        aria-label={`Disconnect ${connection.name}`}\n                        onClick={() => handleDelete(connection.id)}\n                        disabled={deleteMutation.isPending}\n                      >\n                        <Trash2 className=\"size-4\" />\n                      </Button>\n                    </div>\n                  </div>\n                </div>\n              ))\n            )}\n          </section>\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/calendar-sync.d.ts

@@ -0,0 +1 @@
+export declare function CalendarSyncFeature(): import("react").JSX.Element;

package/dist/features/calendar-sync.js

@@ -0,0 +1,138 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Calendar,
+  RefreshCw,
+  CheckCircle,
+  XCircle,
+  ExternalLink,
+  Link2,
+  Unlink
+} from "lucide-react";
+import { getApiUrl } from "@withpotter/lib/api/core";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, ToggleRow } from "@withpotter/ui-kit";
+function CalendarSyncFeature() {
+  const [isConnected, setIsConnected] = useState(false);
+  const [autoSync, setAutoSync] = useState(true);
+  const [blockTime, setBlockTime] = useState(true);
+  const [includeDetails, setIncludeDetails] = useState(true);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const handleConnect = async () => {
+    setIsConnecting(true);
+    setTimeout(() => {
+      setIsConnected(true);
+      setIsConnecting(false);
+    }, 1500);
+  };
+  const handleDisconnect = async () => {
+    setIsConnected(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-[var(--text-primary)]", children: "Calendar sync" }),
+      /* @__PURE__ */ jsx("p", { className: "hidden sm:block text-sm text-[var(--text-secondary)] mt-1", children: "Connect your calendar to automatically sync bookings and availability" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "surface p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-[var(--accent-secondary)] rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsx(Calendar, { className: "size-6 text-brand-500" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Google Calendar" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Sync your bookings with Google Calendar" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mt-2", children: isConnected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CheckCircle, { className: "size-4 text-[var(--success)]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--success)] font-medium", children: "Connected" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(XCircle, { className: "size-4 text-[var(--text-muted)]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: "Not connected" })
+          ] }) })
+        ] })
+      ] }),
+      isConnected ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          className: "border-[var(--error)]/20 text-[var(--error)]",
+          onClick: handleDisconnect,
+          children: [
+            /* @__PURE__ */ jsx(Unlink, { className: "size-4" }),
+            "Disconnect"
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(Button, { onClick: handleConnect, disabled: isConnecting, children: isConnecting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "size-4 animate-spin" }),
+        "Connecting..."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Link2, { className: "size-4" }),
+        "Connect"
+      ] }) })
+    ] }) }),
+    isConnected && /* @__PURE__ */ jsxs("div", { className: "surface p-4 space-y-6", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Sync settings" }),
+      /* @__PURE__ */ jsxs("div", { className: "-mx-6 border-y border-[var(--border-subtle)]", children: [
+        /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label: "Auto-sync new bookings",
+            hint: "Automatically add new bookings to your calendar",
+            checked: autoSync,
+            onChange: setAutoSync
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label: "Block calendar time",
+            hint: "Block time slots when you have other events",
+            checked: blockTime,
+            onChange: setBlockTime
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleRow,
+          {
+            label: "Include customer details",
+            hint: "Add customer info to calendar events",
+            checked: includeDetails,
+            onChange: setIncludeDetails
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "surface p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-[var(--bg-muted)] rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-6 text-[var(--text-secondary)]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)]", children: "iCal Feed" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)] mt-1", children: "Subscribe from any calendar app" }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              readOnly: true,
+              value: `${getApiUrl()}/calendar/ical/your-tenant`,
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Copy" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: "#",
+        className: "inline-flex items-center gap-1 text-sm text-brand-500 hover:text-brand-600",
+        children: [
+          "Learn more about calendar integrations",
+          /* @__PURE__ */ jsx(ExternalLink, {})
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  CalendarSyncFeature
+};
+//# sourceMappingURL=calendar-sync.js.map

package/dist/features/calendar-sync.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/calendar-sync.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Calendar,\n  RefreshCw,\n  CheckCircle,\n  XCircle,\n  ExternalLink,\n  Link2,\n  Unlink,\n} from 'lucide-react';\nimport { getApiUrl } from '@withpotter/lib/api/core';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, ToggleRow } from '@withpotter/ui-kit';\n\nexport function CalendarSyncFeature() {\n  const [isConnected, setIsConnected] = useState(false);\n  const [autoSync, setAutoSync] = useState(true);\n  const [blockTime, setBlockTime] = useState(true);\n  const [includeDetails, setIncludeDetails] = useState(true);\n  const [isConnecting, setIsConnecting] = useState(false);\n\n  const handleConnect = async () => {\n    setIsConnecting(true);\n    setTimeout(() => {\n      setIsConnected(true);\n      setIsConnecting(false);\n    }, 1500);\n  };\n\n  const handleDisconnect = async () => {\n    setIsConnected(false);\n  };\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1 className=\"text-title font-semibold text-[var(--text-primary)]\">\n          Calendar sync\n        </h1>\n        <p className=\"hidden sm:block text-sm text-[var(--text-secondary)] mt-1\">\n          Connect your calendar to automatically sync bookings and availability\n        </p>\n      </div>\n\n      <div className=\"surface p-4\">\n        <div className=\"flex items-start justify-between\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"w-12 h-12 bg-[var(--accent-secondary)] rounded-md flex items-center justify-center\">\n              <Calendar className=\"size-6 text-brand-500\" />\n            </div>\n            <div>\n              <h3 className=\"font-semibold text-[var(--text-primary)]\">\n                Google Calendar\n              </h3>\n              <p className=\"text-sm text-[var(--text-secondary)] mt-1\">\n                Sync your bookings with Google Calendar\n              </p>\n              <div className=\"flex items-center gap-2 mt-2\">\n                {isConnected ? (\n                  <>\n                    <CheckCircle className=\"size-4 text-[var(--success)]\" />\n                    <span className=\"text-sm text-[var(--success)] font-medium\">\n                      Connected\n                    </span>\n                  </>\n                ) : (\n                  <>\n                    <XCircle className=\"size-4 text-[var(--text-muted)]\" />\n                    <span className=\"text-sm text-[var(--text-tertiary)]\">\n                      Not connected\n                    </span>\n                  </>\n                )}\n              </div>\n            </div>\n          </div>\n\n          {isConnected ? (\n            <Button\n              variant=\"secondary\"\n              className=\"border-[var(--error)]/20 text-[var(--error)]\"\n              onClick={handleDisconnect}\n            >\n              <Unlink className=\"size-4\" />\n              Disconnect\n            </Button>\n          ) : (\n            <Button onClick={handleConnect} disabled={isConnecting}>\n              {isConnecting ? (\n                <>\n                  <RefreshCw className=\"size-4 animate-spin\" />\n                  Connecting...\n                </>\n              ) : (\n                <>\n                  <Link2 className=\"size-4\" />\n                  Connect\n                </>\n              )}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {isConnected && (\n        <div className=\"surface p-4 space-y-6\">\n          <h3 className=\"font-semibold text-[var(--text-primary)]\">\n            Sync settings\n          </h3>\n          {/* ToggleRow draws its own dividers, so the stack does not need\n              space-y: the rows sit against each other the way a settings list\n              does everywhere else. */}\n          <div className=\"-mx-6 border-y border-[var(--border-subtle)]\">\n            <ToggleRow\n              label=\"Auto-sync new bookings\"\n              hint=\"Automatically add new bookings to your calendar\"\n              checked={autoSync}\n              onChange={setAutoSync}\n            />\n            <ToggleRow\n              label=\"Block calendar time\"\n              hint=\"Block time slots when you have other events\"\n              checked={blockTime}\n              onChange={setBlockTime}\n            />\n            <ToggleRow\n              label=\"Include customer details\"\n              hint=\"Add customer info to calendar events\"\n              checked={includeDetails}\n              onChange={setIncludeDetails}\n            />\n          </div>\n        </div>\n      )}\n\n      <div className=\"surface p-4\">\n        <div className=\"flex items-start gap-4\">\n          <div className=\"w-12 h-12 bg-[var(--bg-muted)] rounded-md flex items-center justify-center\">\n            <RefreshCw className=\"size-6 text-[var(--text-secondary)]\" />\n          </div>\n          <div className=\"flex-1\">\n            <h3 className=\"font-semibold text-[var(--text-primary)]\">\n              iCal Feed\n            </h3>\n            <p className=\"text-sm text-[var(--text-secondary)] mt-1\">\n              Subscribe from any calendar app\n            </p>\n            <div className=\"mt-3 flex items-center gap-2\">\n              <Input\n                type=\"text\"\n                readOnly\n                value={`${getApiUrl()}/calendar/ical/your-tenant`}\n                className=\"flex-1\"\n              />\n              <Button variant=\"secondary\">Copy</Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"text-center\">\n        <a\n          href=\"#\"\n          className=\"inline-flex items-center gap-1 text-sm text-brand-500 hover:text-brand-600\"\n        >\n          Learn more about calendar integrations\n          <ExternalLink />\n        </a>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/collection-card.d.ts

@@ -0,0 +1,28 @@
+import type { InventoryProduct } from '@withpotter/lib/api/types';
+import type { CollectionWithProducts } from '@withpotter/components/features/collections-helpers';
+/**
+ * A collection as a customer meets it.
+ *
+ * The list was a table — name, slug, a count, a money total — which is the
+ * shape you give something you audit. A collection is not audited. It is a
+ * SECTION OF A SHOP: it has a cover, a name and a set of products, and the
+ * only question a merchant brings to this screen is what it looks like on
+ * their site.
+ *
+ * That framing is not decoration, it is what is left after the alternative was
+ * ruled out. "Where does this collection appear?" would be the more
+ * operational question, and it cannot be answered: `PageSection` stores
+ * `blockType` and an untyped `data` blob with no collection reference, and the
+ * storefront's `collections` block renders the set rather than naming members.
+ * Collections are not placed individually — they all appear wherever that block
+ * does. So the only thing a merchant actually controls per collection is how it
+ * looks, and that is what this shows.
+ *
+ * The cover falls back to a mosaic of what is inside, because a collection with
+ * no cover still has a face on the storefront, and "which of mine look empty"
+ * is answered by seeing them rather than by reading a zero in a column.
+ */
+export declare function CollectionCard({ collection, allProducts, }: {
+    collection: CollectionWithProducts;
+    allProducts: InventoryProduct[];
+}): import("react").JSX.Element;