@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/appointment-book-dialog.tsx

@@ -0,0 +1,618 @@
+import React from "react";
+import { Button } from "./button";
+import { Calendar as CalendarPicker } from "./calendar";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+import { AddressAutocomplete } from "./form-primitives";
+import { Label } from "./label";
+import { RadioGroup, RadioGroupCard, RadioGroupItem } from "./radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { Input } from "./input";
+import { Separator } from "./separator";
+import { Textarea } from "./textarea";
+import { Toggle } from "./toggle";
+import { Badge } from "./badge";
+import { Avatar, AvatarFallback } from "./avatar";
+import { MapPin, Phone, Video } from "lucide-react";
+import {
+  AppointmentSlotSection,
+  type AppointmentMeetingFormat,
+  type AppointmentTimeSlot,
+} from "./appointment-time-slot-picker";
+
+// Re-export so consumers who import these types from this module still work
+export type { AppointmentMeetingFormat } from "./appointment-time-slot-picker";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface AppointmentClient {
+  id: string;
+  name: string;
+  email: string;
+  /** Phone numbers — for Call format. Multiple for Joint accounts. */
+  phones?: string[];
+  /** Account type — "Joint" shows multiple phones in Call format */
+  accountType?: "Individual" | "Joint";
+}
+
+/**
+ * Alias of AppointmentTimeSlot kept for backward compatibility.
+ * Prefer importing AppointmentTimeSlot from appointment-time-slot-picker.
+ */
+export type AppointmentBookingSlot = AppointmentTimeSlot;
+
+export type AppointmentOfflineLocation = "office" | "home" | "custom";
+
+export interface AppointmentBookDialogProps {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  /**
+   * List of clients to search through.
+   *
+   * **Advisor mode (default):** provide a non-empty array — shows the client
+   * search field and "New appointment" header copy.
+   *
+   * **Client mode:** omit or pass an empty array — hides the client search,
+   * shows `advisorInfo` in the header instead, and changes the CTA copy to
+   * "Book Appointment".
+   */
+  clients?: AppointmentClient[];
+  /**
+   * Meeting type options. Omit or pass an empty array to hide the meeting
+   * type field (useful in client mode where the type is implicit).
+   */
+  meetingTypes?: string[];
+  amSlots: AppointmentTimeSlot[];
+  pmSlots: AppointmentTimeSlot[];
+  /**
+   * Advisor's weekly availability schedule. Days with `enabled: false` are
+   * disabled in the date picker so clients cannot select them.
+   */
+  schedule?: { day: string; enabled: boolean }[];
+  /**
+   * Advisor's office address pulled from company settings.
+   * Shown as an offline location option.
+   */
+  advisorOfficeAddress?: string;
+  /**
+   * Client's home address from their CRM profile.
+   * Shown as an offline location option when a client is selected.
+   */
+  clientHomeAddress?: string;
+  /**
+   * Advisor info shown in the dialog header when running in **client mode**
+   * (i.e. when `clients` is omitted or empty).
+   */
+  advisorInfo?: { name: string; role: string; initials: string };
+  /**
+   * Pre-select a client by ID when the dialog opens (advisor mode only).
+   * Used when rebooking from a cancelled appointment via `AppointmentDetailSheet`.
+   */
+  initialClientId?: string;
+  onBook?: (data: {
+    /** Empty string in client mode */
+    clientId: string;
+    /** Empty string when meetingTypes is omitted */
+    meetingType: string;
+    date: Date;
+    slot: AppointmentTimeSlot;
+    notes: string;
+    meetingFormat: AppointmentMeetingFormat;
+    offlineLocation?: AppointmentOfflineLocation;
+    customAddress?: string;
+    callPhone?: string;
+  }) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Client search sub-component
+// ---------------------------------------------------------------------------
+
+function ClientSearch({
+  clients,
+  value,
+  onValueChange,
+}: {
+  clients: AppointmentClient[];
+  value: string | undefined;
+  onValueChange: (id: string | undefined) => void;
+}) {
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const selected = clients.find((c) => c.id === value);
+  const filtered = clients.filter((c) => {
+    const q = query.toLowerCase();
+    return (
+      c.name.toLowerCase().includes(q) || c.email.toLowerCase().includes(q)
+    );
+  });
+
+  return (
+    <div className="relative">
+      <Input
+        value={selected ? selected.name : query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          if (selected) onValueChange(undefined);
+          setOpen(e.target.value.length > 0);
+        }}
+        onBlur={() => setTimeout(() => setOpen(false), 150)}
+        placeholder="Search by name or email…"
+        autoComplete="off"
+      />
+      {open && (filtered.length > 0 || query.length > 0) && (
+        <div className="absolute z-50 mt-1 w-full border border-border bg-popover shadow-md">
+          {filtered.length === 0 ? (
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">
+              No clients found.
+            </p>
+          ) : (
+            filtered.map((c) => (
+              <Button
+                key={c.id}
+                type="button"
+                variant="ghost"
+                className="h-auto w-full flex-col items-start gap-0.5 px-3 py-2 text-left hover:bg-primary/5"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  onValueChange(c.id);
+                  setQuery("");
+                  setOpen(false);
+                }}
+              >
+                <span className="text-sm font-medium">{c.name}</span>
+                <span className="text-xs text-muted-foreground">{c.email}</span>
+              </Button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Meeting format sub-component
+// ---------------------------------------------------------------------------
+
+const FORMAT_OPTIONS: {
+  value: AppointmentMeetingFormat;
+  label: string;
+  icon: React.ReactNode;
+}[] = [
+  { value: "call", label: "Call", icon: <Phone className="h-4 w-4" /> },
+  {
+    value: "google-meet",
+    label: "Google Meet",
+    icon: <Video className="h-4 w-4" />,
+  },
+  {
+    value: "offline",
+    label: "Offline",
+    icon: <MapPin className="h-4 w-4" />,
+  },
+];
+
+function MeetingFormatSection({
+  format,
+  onFormatChange,
+  offlineLocation,
+  onOfflineLocationChange,
+  customAddress,
+  onCustomAddressChange,
+  advisorOfficeAddress,
+  clientHomeAddress,
+  isClientMode,
+}: {
+  format: AppointmentMeetingFormat;
+  onFormatChange: (f: AppointmentMeetingFormat) => void;
+  offlineLocation: AppointmentOfflineLocation;
+  onOfflineLocationChange: (l: AppointmentOfflineLocation) => void;
+  customAddress: string;
+  onCustomAddressChange: (v: string) => void;
+  advisorOfficeAddress?: string;
+  clientHomeAddress?: string;
+  isClientMode?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        {FORMAT_OPTIONS.map((opt) => (
+          <Toggle
+            key={opt.value}
+            variant="outline"
+            pressed={format === opt.value}
+            onPressedChange={() => onFormatChange(opt.value)}
+            className="flex-1 gap-1.5"
+          >
+            {opt.icon}
+            {opt.label}
+          </Toggle>
+        ))}
+      </div>
+
+      {format === "offline" && (
+        <div className="flex flex-col gap-2 border border-border p-3">
+          <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Location
+          </p>
+          <RadioGroup
+            value={offlineLocation}
+            onValueChange={(v) =>
+              onOfflineLocationChange(v as AppointmentOfflineLocation)
+            }
+            className="gap-2"
+          >
+            {advisorOfficeAddress && (
+              <RadioGroupCard
+                value="office"
+                label="Advisor's Office"
+                description={advisorOfficeAddress}
+              />
+            )}
+            {clientHomeAddress && (
+              <RadioGroupCard
+                value="home"
+                label={isClientMode ? "Home" : "Client's Home"}
+                description={clientHomeAddress}
+              />
+            )}
+            <RadioGroupCard
+              value="custom"
+              label="Custom address"
+              description="Enter a specific location"
+            />
+          </RadioGroup>
+          {offlineLocation === "custom" && (
+            <AddressAutocomplete
+              value={customAddress}
+              onValueChange={onCustomAddressChange}
+              placeholder="e.g. 123 Collins St, Melbourne VIC 3000"
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function AppointmentBookDialog({
+  open,
+  onOpenChange,
+  clients = [],
+  meetingTypes = [],
+  amSlots,
+  pmSlots,
+  schedule,
+  advisorOfficeAddress,
+  clientHomeAddress,
+  advisorInfo,
+  initialClientId,
+  onBook,
+}: AppointmentBookDialogProps) {
+  const isClientMode = clients.length === 0;
+
+  const DAY_MAP: Record<string, number> = {
+    Sun: 0,
+    Mon: 1,
+    Tue: 2,
+    Wed: 3,
+    Thu: 4,
+    Fri: 5,
+    Sat: 6,
+  };
+  const disabledDayOfWeek = schedule
+    ?.filter((d) => !d.enabled)
+    .map((d) => DAY_MAP[d.day])
+    .filter((n): n is number => n !== undefined);
+
+  const [clientId, setClientId] = React.useState<string | undefined>(undefined);
+  const [meetingType, setMeetingType] = React.useState("");
+  const [meetingFormat, setMeetingFormat] =
+    React.useState<AppointmentMeetingFormat>("call");
+  const [offlineLocation, setOfflineLocation] =
+    React.useState<AppointmentOfflineLocation>(
+      advisorOfficeAddress ? "office" : "custom",
+    );
+  const [customAddress, setCustomAddress] = React.useState("");
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+  const [selectedSlot, setSelectedSlot] = React.useState<
+    AppointmentTimeSlot | undefined
+  >(undefined);
+  const [notes, setNotes] = React.useState("");
+  const [selectedPhone, setSelectedPhone] = React.useState<string | undefined>(
+    undefined,
+  );
+
+  const selectedClient = clients.find((c) => c.id === clientId);
+
+  // Pre-select client when dialog opens with an initialClientId (e.g. rebook after cancellation)
+  React.useEffect(() => {
+    if (open && initialClientId) {
+      setClientId(initialClientId);
+    }
+  }, [open, initialClientId]);
+
+  React.useEffect(() => {
+    setSelectedPhone(undefined);
+  }, [clientId]);
+
+  React.useEffect(() => {
+    if (meetingFormat !== "call") {
+      setSelectedPhone(undefined);
+    }
+  }, [meetingFormat]);
+
+  const clientReady = isClientMode || !!clientId;
+  const meetingTypeReady = meetingTypes.length === 0 || !!meetingType;
+  const offlineReady =
+    meetingFormat !== "offline" ||
+    offlineLocation !== "custom" ||
+    !!customAddress.trim();
+
+  const canSubmit =
+    clientReady && meetingTypeReady && !!date && !!selectedSlot && offlineReady;
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setClientId(undefined);
+      setMeetingType("");
+      setMeetingFormat("call");
+      setOfflineLocation(advisorOfficeAddress ? "office" : "custom");
+      setCustomAddress("");
+      setDate(new Date());
+      setSelectedSlot(undefined);
+      setNotes("");
+      setSelectedPhone(undefined);
+    }
+    onOpenChange(next);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent size="2xl" align="top">
+        <DialogHeader>
+          <DialogTitle>
+            {isClientMode ? "Book an Appointment" : "New appointment"}
+          </DialogTitle>
+          <DialogDescription>
+            {isClientMode
+              ? "Request a meeting with your advisor. They will confirm once the appointment is reviewed."
+              : "Book a meeting with a client. They will receive a confirmation email once the appointment is created."}
+          </DialogDescription>
+
+          {/* Advisor chip — client mode only */}
+          {isClientMode && advisorInfo && (
+            <div className="mt-3 flex items-center gap-3 border border-border bg-muted/30 px-3 py-2">
+              <Avatar className="h-8 w-8 shrink-0">
+                <AvatarFallback className="text-xs">
+                  {advisorInfo.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col gap-0.5">
+                <p className="text-sm font-medium">{advisorInfo.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {advisorInfo.role}
+                </p>
+              </div>
+            </div>
+          )}
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex flex-col gap-4">
+          {/* Client search — advisor mode only */}
+          {!isClientMode && (
+            <div className="flex flex-col gap-1.5">
+              <Label>Client</Label>
+              <ClientSearch
+                clients={clients}
+                value={clientId}
+                onValueChange={setClientId}
+              />
+            </div>
+          )}
+
+          {/* Appointment type — shown only when meetingTypes provided */}
+          {meetingTypes.length > 0 && (
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="book-apt-type">
+                {isClientMode ? "Appointment type" : "Meeting type"}
+              </Label>
+              <Select onValueChange={(v) => setMeetingType(v as string)}>
+                <SelectTrigger id="book-apt-type" className="w-full">
+                  <SelectValue placeholder="Select meeting type…" />
+                </SelectTrigger>
+                <SelectContent>
+                  {meetingTypes.map((t) => (
+                    <SelectItem key={t} value={t}>
+                      {t}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {/* Meeting format */}
+          <div className="flex flex-col gap-1.5">
+            <Label>Meeting format</Label>
+            <MeetingFormatSection
+              format={meetingFormat}
+              onFormatChange={setMeetingFormat}
+              offlineLocation={offlineLocation}
+              onOfflineLocationChange={setOfflineLocation}
+              customAddress={customAddress}
+              onCustomAddressChange={setCustomAddress}
+              advisorOfficeAddress={advisorOfficeAddress}
+              clientHomeAddress={clientHomeAddress}
+              isClientMode={isClientMode}
+            />
+          </div>
+
+          {/* Phone selection — advisor mode, Call format, client has phones */}
+          {!isClientMode &&
+            meetingFormat === "call" &&
+            selectedClient?.phones &&
+            selectedClient.phones.length > 0 && (
+              <div className="flex flex-col gap-1.5">
+                <Label>
+                  {selectedClient.accountType === "Joint"
+                    ? "Select a contact number"
+                    : "Phone number"}
+                </Label>
+                <RadioGroup
+                  value={selectedPhone ?? ""}
+                  onValueChange={(v) => setSelectedPhone(v as string)}
+                  className="gap-1 border border-border p-3"
+                >
+                  {selectedClient.phones.map((phone) => (
+                    <div
+                      key={phone}
+                      className="flex items-center gap-3 p-2 hover:bg-muted/50"
+                    >
+                      <RadioGroupItem value={phone} id={`phone-${phone}`} />
+                      <Label
+                        htmlFor={`phone-${phone}`}
+                        className="flex cursor-pointer items-center gap-2 font-normal"
+                      >
+                        <Phone className="h-4 w-4 text-muted-foreground" />
+                        {phone}
+                      </Label>
+                    </div>
+                  ))}
+                </RadioGroup>
+              </div>
+            )}
+
+          {/* Date + Time slot — side by side */}
+          <div className="grid grid-cols-[auto_1fr] items-start gap-5">
+            <div className="flex flex-col gap-1.5">
+              <Label>Date</Label>
+              <CalendarPicker
+                mode="single"
+                selected={date}
+                onSelect={(d) => {
+                  setDate(d);
+                  setSelectedSlot(undefined);
+                }}
+                captionLayout="label"
+                fromDate={new Date()}
+                disabled={
+                  disabledDayOfWeek && disabledDayOfWeek.length > 0
+                    ? [{ before: new Date() }, { dayOfWeek: disabledDayOfWeek }]
+                    : { before: new Date() }
+                }
+                className="border border-border"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label>Time slot</Label>
+              {date ? (
+                <div className="flex flex-col gap-3">
+                  <p className="text-xs text-muted-foreground">
+                    {date.toLocaleDateString("en-AU", {
+                      weekday: "long",
+                      day: "numeric",
+                      month: "long",
+                    })}
+                  </p>
+                  <AppointmentSlotSection
+                    label="Morning"
+                    slots={amSlots}
+                    selectedSlotId={selectedSlot?.id}
+                    onSelect={setSelectedSlot}
+                  />
+                  <AppointmentSlotSection
+                    label="Afternoon"
+                    slots={pmSlots}
+                    selectedSlotId={selectedSlot?.id}
+                    onSelect={setSelectedSlot}
+                  />
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  Select a date to see available slots.
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Notes */}
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="book-apt-notes">
+              Notes{" "}
+              <span className="font-normal text-muted-foreground">
+                (optional)
+              </span>
+            </Label>
+            <Textarea
+              id="book-apt-notes"
+              placeholder={
+                isClientMode
+                  ? "Let your advisor know what you'd like to discuss…"
+                  : "e.g. Client wants to discuss refinancing their investment property…"
+              }
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              className="w-full resize-none"
+              rows={2}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" />}>
+            Cancel
+          </DialogClose>
+          <Button
+            disabled={!canSubmit}
+            onClick={() => {
+              if (canSubmit && date && selectedSlot) {
+                onBook?.({
+                  clientId: clientId ?? "",
+                  meetingType,
+                  date,
+                  slot: selectedSlot,
+                  notes,
+                  meetingFormat,
+                  offlineLocation:
+                    meetingFormat === "offline" ? offlineLocation : undefined,
+                  customAddress:
+                    meetingFormat === "offline" && offlineLocation === "custom"
+                      ? customAddress
+                      : undefined,
+                  callPhone:
+                    meetingFormat === "call" ? selectedPhone : undefined,
+                });
+                handleOpenChange(false);
+              }
+            }}
+          >
+            {isClientMode ? "Book Appointment" : "Create appointment"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}