@wealthx/shadcn 1.2.2 → 1.3.0

package/dist/chunk-I3RZS7V2.mjs

@@ -0,0 +1,136 @@
+import {
+  Badge
+} from "./chunk-BKNFWEH2.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Spinner
+} from "./chunk-7YAU5CY6.mjs";
+import {
+  Input
+} from "./chunk-GYMYRIZP.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+
+// src/components/ui/appointment-gmail-connect.tsx
+import { Check, Copy, Link2, Mail, ShieldCheck, Unlink } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PERMISSIONS = [
+  "Read your calendar availability",
+  "Send appointment confirmation emails",
+  "Create calendar events on your behalf"
+];
+function AppointmentGmailConnect({
+  connection,
+  state = "disconnected",
+  onConnect,
+  onDisconnect,
+  calendarLink,
+  onCopyLink
+}) {
+  if (state === "connecting") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center", children: [
+      /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6 text-primary" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Connecting to Gmail\u2026" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Complete the sign-in in the popup window." })
+      ] })
+    ] });
+  }
+  if (connection.connected) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center bg-primary/10", children: /* @__PURE__ */ jsx(Mail, { className: "h-5 w-5 text-primary" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: "Gmail Connected" }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: connection.email })
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "success", children: [
+          /* @__PURE__ */ jsx(Check, { size: 10 }),
+          "Active"
+        ] }),
+        connection.connectedAt && /* @__PURE__ */ jsxs("p", { className: "shrink-0 text-sm text-muted-foreground", children: [
+          "Connected since ",
+          connection.connectedAt
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            className: "shrink-0 gap-1.5 text-destructive hover:text-destructive",
+            onClick: onDisconnect,
+            children: [
+              /* @__PURE__ */ jsx(Unlink, { className: "h-3.5 w-3.5" }),
+              "Disconnect"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-5 py-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Permissions granted" }),
+        PERMISSIONS.map((perm) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(ShieldCheck, { className: "h-4 w-4 shrink-0 text-success" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: perm })
+        ] }, perm))
+      ] }),
+      calendarLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 px-5 py-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Link2, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Calendar Appointment Link" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Share with clients so they can self-book." }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "calendar-link",
+                readOnly: true,
+                value: calendarLink,
+                className: "cursor-default select-all pr-10 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                onClick: onCopyLink,
+                className: "absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2",
+                children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 border border-border bg-card px-6 py-8 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center bg-muted", children: /* @__PURE__ */ jsx(Mail, { className: "h-6 w-6 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: "Connect your Gmail account" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-xs text-sm text-muted-foreground", children: "Link your Gmail to let clients book appointments and receive confirmation emails automatically." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-xs flex-col gap-2 text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "This will allow WealthX to:" }),
+      PERMISSIONS.map((perm) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: perm })
+      ] }, perm))
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { onClick: onConnect, className: "gap-2", children: [
+      /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4" }),
+      "Connect Gmail"
+    ] })
+  ] });
+}
+
+export {
+  AppointmentGmailConnect
+};