@agent-native/scheduling 0.1.1

package/src/react/components/booking-links/ConferencingSelector.tsx

@@ -0,0 +1,255 @@
+/**
+ * ConferencingSelector — choose how a booking's video meeting is set up.
+ *
+ * Renders a grid of options (no conferencing, Google Meet, Zoom, custom
+ * link). Each option is fully styled with the consumer's shadcn
+ * primitives. The Zoom option does NOT accept a pasted personal meeting
+ * URL — the user connects their Zoom account via OAuth instead, and the
+ * app auto-creates a meeting per booking. See `connect-video` action.
+ *
+ * Shadcn primitives expected in the consumer: button, input, label,
+ * badge. Icons from `@tabler/icons-react`.
+ *
+ * Props:
+ *   - `value`        — current conferencing config { type, url? }
+ *   - `onChange`     — called with the next config (call instantly — the
+ *                      caller owns persistence, typically optimistic)
+ *   - `zoomStatus`   — 'connected' | 'disconnected' | 'not-configured'
+ *                      drives the Connect Zoom button / installed chip
+ *   - `onConnectZoom` — optional callback that starts the OAuth flow; if
+ *                      omitted, the button is hidden (useful for preview)
+ *   - `googleConnected` — whether Google Meet is available (depends on
+ *                         Google Calendar credential)
+ *   - `onConnectGoogle` — optional, same shape as onConnectZoom
+ */
+import { useId, type ComponentType } from "react";
+import {
+  IconBrandGoogle,
+  IconBrandZoom,
+  IconCheck,
+  IconLink,
+  IconVideo,
+  IconVideoOff,
+} from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+export type ConferencingType = "none" | "google_meet" | "zoom" | "custom";
+
+export interface ConferencingValue {
+  type: ConferencingType;
+  /** Used for `custom` — the meeting URL. Ignored for `zoom` (OAuth-created). */
+  url?: string;
+}
+
+export type ProviderStatus = "connected" | "disconnected" | "not-configured";
+
+export interface ConferencingSelectorProps {
+  value: ConferencingValue;
+  onChange: (next: ConferencingValue) => void;
+  zoomStatus?: ProviderStatus;
+  googleStatus?: ProviderStatus;
+  onConnectZoom?: () => void;
+  onConnectGoogle?: () => void;
+  /** Hide the label above the grid (for use inside a card with its own title). */
+  hideLabel?: boolean;
+}
+
+const OPTIONS: {
+  type: ConferencingType;
+  label: string;
+  description: string;
+  Icon: ComponentType<{ className?: string }>;
+}[] = [
+  {
+    type: "none",
+    label: "No conferencing",
+    description: "In-person or other",
+    Icon: IconVideoOff,
+  },
+  {
+    type: "google_meet",
+    label: "Google Meet",
+    description: "Auto-generate a Meet link",
+    Icon: IconBrandGoogle,
+  },
+  {
+    type: "zoom",
+    label: "Zoom",
+    description: "Auto-create a meeting per booking",
+    Icon: IconBrandZoom,
+  },
+  {
+    type: "custom",
+    label: "Custom link",
+    description: "Paste any meeting URL",
+    Icon: IconLink,
+  },
+];
+
+function cls(...parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export function ConferencingSelector(props: ConferencingSelectorProps) {
+  const id = useId();
+  const {
+    value,
+    onChange,
+    zoomStatus = "disconnected",
+    googleStatus = "disconnected",
+    onConnectZoom,
+    onConnectGoogle,
+    hideLabel,
+  } = props;
+
+  const statusFor = (type: ConferencingType): ProviderStatus => {
+    if (type === "zoom") return zoomStatus;
+    if (type === "google_meet") return googleStatus;
+    return "connected";
+  };
+
+  return (
+    <div className="space-y-3">
+      {!hideLabel && (
+        <Label className="flex items-center gap-1.5">
+          <IconVideo className="h-4 w-4" />
+          Conferencing
+        </Label>
+      )}
+
+      <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+        {OPTIONS.map((opt) => {
+          const isSelected = value.type === opt.type;
+          const status = statusFor(opt.type);
+          const isUnavailable = status === "not-configured";
+          return (
+            <button
+              key={opt.type}
+              type="button"
+              onClick={() =>
+                onChange({
+                  type: opt.type,
+                  url: opt.type === "custom" ? value.url : undefined,
+                })
+              }
+              disabled={isUnavailable}
+              title={
+                isUnavailable
+                  ? `${opt.label} is not configured on this server.`
+                  : undefined
+              }
+              className={cls(
+                "flex flex-col gap-1 rounded-lg border px-3 py-2.5 text-left text-xs transition-colors",
+                isSelected
+                  ? "border-primary bg-primary/10"
+                  : "border-border/60 hover:border-primary/30 hover:bg-accent/60",
+                isUnavailable && "opacity-50 cursor-not-allowed",
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <opt.Icon className="h-4 w-4 shrink-0" />
+                <span
+                  className={cls("font-medium", isSelected && "text-primary")}
+                >
+                  {opt.label}
+                </span>
+                {isSelected && status === "connected" && (
+                  <Badge
+                    variant="secondary"
+                    className="ml-auto h-5 gap-1 text-[10px] font-normal"
+                  >
+                    <IconCheck className="h-3 w-3" />
+                    Connected
+                  </Badge>
+                )}
+                {isSelected && status !== "connected" && (
+                  <IconCheck className="ml-auto h-3.5 w-3.5 text-primary" />
+                )}
+              </div>
+              <p className="text-muted-foreground">{opt.description}</p>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Zoom: OAuth connect button */}
+      {value.type === "zoom" && zoomStatus !== "connected" && onConnectZoom && (
+        <div className="rounded-md border border-border/60 bg-muted/30 p-3">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">Connect your Zoom account</p>
+              <p className="text-xs text-muted-foreground">
+                We'll create a real Zoom meeting for every booking — no need to
+                paste a personal link.
+              </p>
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              onClick={onConnectZoom}
+              disabled={zoomStatus === "not-configured"}
+            >
+              <IconBrandZoom className="mr-1.5 h-4 w-4" />
+              Connect Zoom
+            </Button>
+          </div>
+          {zoomStatus === "not-configured" && (
+            <p className="mt-2 text-[11px] text-muted-foreground">
+              Ask your admin to set <code>ZOOM_CLIENT_ID</code> and{" "}
+              <code>ZOOM_CLIENT_SECRET</code> to enable Zoom OAuth.
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Google Meet: connect calendar button */}
+      {value.type === "google_meet" &&
+        googleStatus !== "connected" &&
+        onConnectGoogle && (
+          <div className="rounded-md border border-border/60 bg-muted/30 p-3">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">Connect Google Calendar</p>
+                <p className="text-xs text-muted-foreground">
+                  Meet links are auto-generated when the calendar event is
+                  created.
+                </p>
+              </div>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={onConnectGoogle}
+                disabled={googleStatus === "not-configured"}
+              >
+                <IconBrandGoogle className="mr-1.5 h-4 w-4" />
+                Connect Google
+              </Button>
+            </div>
+          </div>
+        )}
+
+      {/* Custom URL input */}
+      {value.type === "custom" && (
+        <div className="space-y-1.5">
+          <Label htmlFor={`${id}-url`} className="text-xs">
+            Meeting URL
+          </Label>
+          <Input
+            id={`${id}-url`}
+            type="url"
+            value={value.url ?? ""}
+            onChange={(e) =>
+              onChange({ type: "custom", url: e.currentTarget.value })
+            }
+            placeholder="https://meet.example.com/room"
+            className="h-8 text-sm"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/components/booking-links/CustomFieldsEditor.tsx

@@ -0,0 +1,420 @@
+/**
+ * CustomFieldsEditor — add, remove, reorder, and configure custom form
+ * fields shown on a booking page.
+ *
+ * The shape matches the calendar template's `CustomField`. The scheduling
+ * template's event types also have `customFields` — both can use this
+ * directly.
+ *
+ * All edits flow through `onChange` synchronously so the caller can
+ * update the UI (and persist) optimistically.
+ *
+ * Shadcn primitives expected in the consumer: button, input, label,
+ * textarea, switch. Icons from `@tabler/icons-react`.
+ */
+import { useState } from "react";
+import { nanoid } from "nanoid";
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconGripVertical,
+  IconListCheck,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+
+export type CustomFieldType =
+  | "text"
+  | "email"
+  | "url"
+  | "tel"
+  | "textarea"
+  | "select"
+  | "checkbox";
+
+export interface CustomField {
+  id: string;
+  label: string;
+  type: CustomFieldType;
+  required: boolean;
+  placeholder?: string;
+  pattern?: string;
+  patternError?: string;
+  options?: string[];
+}
+
+export interface CustomFieldsEditorProps {
+  fields: CustomField[];
+  onChange: (fields: CustomField[]) => void;
+  /** Hide the outer label + add button (e.g. if rendered inside its own card). */
+  hideLabel?: boolean;
+}
+
+const TYPE_LABELS: Record<CustomFieldType, string> = {
+  text: "Short text",
+  email: "Email",
+  url: "URL",
+  tel: "Phone",
+  textarea: "Long text",
+  select: "Dropdown",
+  checkbox: "Checkbox",
+};
+
+const PRESETS: {
+  label: string;
+  type: CustomFieldType;
+  placeholder?: string;
+  pattern?: string;
+  patternError?: string;
+}[] = [
+  {
+    label: "LinkedIn Profile",
+    type: "url",
+    placeholder: "https://linkedin.com/in/yourname",
+    pattern: "^https?://(www\\.)?linkedin\\.com/in/.+",
+    patternError: "Please enter a valid LinkedIn profile URL",
+  },
+  { label: "Company", type: "text", placeholder: "Your company name" },
+  { label: "Phone Number", type: "tel", placeholder: "+1 (555) 123-4567" },
+  { label: "Website", type: "url", placeholder: "https://example.com" },
+];
+
+function cls(...parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export function CustomFieldsEditor(props: CustomFieldsEditorProps) {
+  const { fields, onChange, hideLabel } = props;
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [showPresets, setShowPresets] = useState(false);
+
+  function addField(
+    partial?: Partial<CustomField> & { label: string; type: CustomFieldType },
+  ) {
+    const field: CustomField = {
+      id: nanoid(8),
+      label: partial?.label || "New Field",
+      type: partial?.type || "text",
+      required: partial?.required ?? true,
+      placeholder: partial?.placeholder,
+      pattern: partial?.pattern,
+      patternError: partial?.patternError,
+      options: partial?.options,
+    };
+    onChange([...fields, field]);
+    setEditingId(field.id);
+    setShowPresets(false);
+  }
+
+  function updateField(id: string, updates: Partial<CustomField>) {
+    onChange(fields.map((f) => (f.id === id ? { ...f, ...updates } : f)));
+  }
+
+  function removeField(id: string) {
+    onChange(fields.filter((f) => f.id !== id));
+    if (editingId === id) setEditingId(null);
+  }
+
+  function moveField(id: string, dir: -1 | 1) {
+    const idx = fields.findIndex((f) => f.id === id);
+    if (idx < 0) return;
+    const target = idx + dir;
+    if (target < 0 || target >= fields.length) return;
+    const next = [...fields];
+    [next[idx], next[target]] = [next[target], next[idx]];
+    onChange(next);
+  }
+
+  return (
+    <div className="space-y-3">
+      {!hideLabel && (
+        <div className="flex items-center justify-between">
+          <Label className="flex items-center gap-1.5">
+            <IconListCheck className="h-4 w-4" />
+            Custom fields
+          </Label>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={() => setShowPresets((p) => !p)}
+              className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+            >
+              <IconChevronDown
+                className={cls(
+                  "h-3 w-3 transition-transform",
+                  showPresets && "rotate-180",
+                )}
+              />
+              Presets
+            </button>
+            <button
+              type="button"
+              onClick={() => addField()}
+              className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+            >
+              <IconPlus className="h-3 w-3" />
+              Add
+            </button>
+          </div>
+        </div>
+      )}
+
+      {showPresets && (
+        <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+          {PRESETS.map((preset) => (
+            <button
+              key={preset.label}
+              type="button"
+              onClick={() => addField(preset)}
+              className="rounded-lg border border-border/60 px-3 py-2 text-left text-xs hover:border-primary/30 hover:bg-accent/60"
+            >
+              <p className="font-medium">{preset.label}</p>
+              <p className="text-muted-foreground">
+                {TYPE_LABELS[preset.type]}
+              </p>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {fields.length === 0 && !showPresets && (
+        <p className="text-xs text-muted-foreground">
+          Add custom fields to collect information from bookers — e.g. LinkedIn
+          profile, company name, phone number.
+        </p>
+      )}
+
+      <div className="space-y-2">
+        {fields.map((field) => {
+          const isEditing = editingId === field.id;
+          return (
+            <div
+              key={field.id}
+              className="overflow-hidden rounded-lg border border-border"
+            >
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => setEditingId(isEditing ? null : field.id)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setEditingId(isEditing ? null : field.id);
+                  }
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-accent/40"
+              >
+                <IconGripVertical className="h-3.5 w-3.5 shrink-0 text-muted-foreground/40" />
+                <div className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">
+                    {field.label}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground">
+                    {TYPE_LABELS[field.type]}
+                    {field.required ? " · Required" : " · Optional"}
+                    {field.pattern ? " · Pattern" : ""}
+                  </span>
+                </div>
+                <div className="flex shrink-0 items-center gap-1">
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      moveField(field.id, -1);
+                    }}
+                    className="p-0.5 text-muted-foreground/40 hover:text-foreground"
+                    title="Move up"
+                  >
+                    <IconChevronLeft className="h-3 w-3 rotate-90" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      moveField(field.id, 1);
+                    }}
+                    className="p-0.5 text-muted-foreground/40 hover:text-foreground"
+                    title="Move down"
+                  >
+                    <IconChevronRight className="h-3 w-3 rotate-90" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeField(field.id);
+                    }}
+                    className="p-0.5 text-muted-foreground/40 hover:text-destructive"
+                    title="Remove field"
+                  >
+                    <IconTrash className="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
+
+              {isEditing && (
+                <div className="space-y-3 border-t border-border bg-muted/20 px-3 py-3">
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">Label</Label>
+                      <Input
+                        value={field.label}
+                        onChange={(e) =>
+                          updateField(field.id, { label: e.target.value })
+                        }
+                        placeholder="Field label"
+                        className="h-8 text-sm"
+                      />
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">Type</Label>
+                      <select
+                        value={field.type}
+                        onChange={(e) =>
+                          updateField(field.id, {
+                            type: e.target.value as CustomFieldType,
+                          })
+                        }
+                        className="h-8 w-full rounded-md border border-input bg-background px-2 text-sm"
+                      >
+                        {(
+                          Object.entries(TYPE_LABELS) as [
+                            CustomFieldType,
+                            string,
+                          ][]
+                        ).map(([value, label]) => (
+                          <option key={value} value={value}>
+                            {label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Placeholder</Label>
+                    <Input
+                      value={field.placeholder || ""}
+                      onChange={(e) =>
+                        updateField(field.id, {
+                          placeholder: e.target.value || undefined,
+                        })
+                      }
+                      placeholder="Placeholder text"
+                      className="h-8 text-sm"
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs">Required</Label>
+                    <Switch
+                      checked={field.required}
+                      onCheckedChange={(checked) =>
+                        updateField(field.id, { required: checked })
+                      }
+                    />
+                  </div>
+
+                  {field.type === "select" && (
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">
+                        Options{" "}
+                        <span className="font-normal text-muted-foreground">
+                          (one per line)
+                        </span>
+                      </Label>
+                      <Textarea
+                        value={(field.options || []).join("\n")}
+                        onChange={(e) => {
+                          const options = e.target.value
+                            .split("\n")
+                            .filter((o) => o.trim());
+                          updateField(field.id, { options });
+                        }}
+                        placeholder={"Option 1\nOption 2\nOption 3"}
+                        rows={3}
+                        className="text-sm"
+                      />
+                    </div>
+                  )}
+
+                  {field.type !== "checkbox" && field.type !== "select" && (
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">
+                        Validation pattern{" "}
+                        <span className="font-normal text-muted-foreground">
+                          (regex, optional)
+                        </span>
+                      </Label>
+                      <Input
+                        value={field.pattern || ""}
+                        onChange={(e) =>
+                          updateField(field.id, {
+                            pattern: e.target.value || undefined,
+                          })
+                        }
+                        placeholder="e.g. ^https?://(www\.)?linkedin\.com/in/.+"
+                        className="h-8 font-mono text-sm"
+                      />
+                      {field.pattern && (
+                        <div className="space-y-1.5">
+                          <Label className="text-xs">
+                            Error message{" "}
+                            <span className="font-normal text-muted-foreground">
+                              (shown when pattern doesn't match)
+                            </span>
+                          </Label>
+                          <Input
+                            value={field.patternError || ""}
+                            onChange={(e) =>
+                              updateField(field.id, {
+                                patternError: e.target.value || undefined,
+                              })
+                            }
+                            placeholder="e.g. Please enter a valid LinkedIn URL"
+                            className="h-8 text-sm"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {hideLabel && (
+        <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => setShowPresets((p) => !p)}
+            className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+          >
+            <IconChevronDown
+              className={cls(
+                "h-3 w-3 transition-transform",
+                showPresets && "rotate-180",
+              )}
+            />
+            Presets
+          </button>
+          <button
+            type="button"
+            onClick={() => addField()}
+            className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+          >
+            <IconPlus className="h-3 w-3" />
+            Add field
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}