@wealthx/shadcn 1.4.0 → 1.5.0

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

@@ -26,7 +26,7 @@ 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 { CalendarCheck, MapPin, Phone, Users, Video } from "lucide-react";
 import { formatDateLong } from "@/lib/format-date";
 import {
   AppointmentSlotSection,
@@ -124,6 +124,15 @@ export interface AppointmentBookDialogProps {
    * Used when rebooking from a cancelled appointment via `AppointmentDetailSheet`.
    */
   initialClientId?: string;
+  /**
+   * Pre-set meeting format from the advisor's availability settings.
+   * In **client mode**, when this is provided the meeting format picker is
+   * hidden — the client books using this format only.
+   * Has no effect in advisor mode (advisors always see the format picker).
+   *
+   * @remarks Mount-time initialiser only.
+   */
+  defaultMeetingFormat?: AppointmentMeetingFormat;
   /**
    * Guest identity for **client / public booking mode** only.
    * When all fields are provided the guest form is hidden; when any field is
@@ -238,6 +247,11 @@ const FORMAT_OPTIONS: {
     label: "Google Meet",
     icon: <Video className="h-4 w-4" />,
   },
+  {
+    value: "microsoft-teams",
+    label: "MS Teams",
+    icon: <Users className="h-4 w-4" />,
+  },
   {
     value: "offline",
     label: "Offline",
@@ -245,9 +259,16 @@ const FORMAT_OPTIONS: {
   },
 ];
 
+// Pre-baked references — FORMAT_OPTIONS is a module constant so these are stable
+const FORMAT_CALL = FORMAT_OPTIONS[0];
+const FORMAT_OFFLINE = FORMAT_OPTIONS[3];
+// Icon shared by the "Online Meeting" collapsed option in client mode
+const ONLINE_MEETING_ICON = <Video className="h-4 w-4" />;
+
 function MeetingFormatSection({
   format,
   onFormatChange,
+  options = FORMAT_OPTIONS,
   offlineLocation,
   onOfflineLocationChange,
   customAddress,
@@ -258,6 +279,7 @@ function MeetingFormatSection({
 }: {
   format: AppointmentMeetingFormat;
   onFormatChange: (f: AppointmentMeetingFormat) => void;
+  options?: typeof FORMAT_OPTIONS;
   offlineLocation: AppointmentOfflineLocation;
   onOfflineLocationChange: (l: AppointmentOfflineLocation) => void;
   customAddress: string;
@@ -269,7 +291,7 @@ function MeetingFormatSection({
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-2">
-        {FORMAT_OPTIONS.map((opt) => (
+        {options.map((opt) => (
           <Toggle
             key={opt.value}
             variant="outline"
@@ -328,6 +350,80 @@ function MeetingFormatSection({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Booking confirmation sub-component (client mode only)
+// ---------------------------------------------------------------------------
+
+interface SubmittedBooking {
+  advisorName?: string;
+  date: Date;
+  slotLabel: string;
+}
+
+function SummaryRow({
+  label,
+  value,
+  border = true,
+}: {
+  label: string;
+  value: React.ReactNode;
+  border?: boolean;
+}) {
+  return (
+    <div
+      className={`flex items-center justify-between px-4 py-3 ${border ? "border-b border-border" : ""}`}
+    >
+      <span className="text-xs text-muted-foreground">{label}</span>
+      {typeof value === "string" ? (
+        <span className="text-xs font-medium">{value}</span>
+      ) : (
+        value
+      )}
+    </div>
+  );
+}
+
+function BookingConfirmationScreen({
+  booking,
+  onDone,
+}: {
+  booking: SubmittedBooking;
+  onDone: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-6 py-4 text-center">
+      <div className="flex h-16 w-16 items-center justify-center bg-success/10">
+        <CalendarCheck className="h-8 w-8 text-success" />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <h3 className="text-lg font-semibold">Booking request sent!</h3>
+        <p className="text-sm text-muted-foreground">
+          Your advisor will review and confirm the appointment. You'll receive a
+          notification once it's confirmed.
+        </p>
+      </div>
+
+      <div className="w-full border border-border bg-muted/30 text-left">
+        {booking.advisorName && (
+          <SummaryRow label="Advisor" value={booking.advisorName} />
+        )}
+        <SummaryRow label="Date" value={formatDateLong(booking.date)} />
+        <SummaryRow label="Time" value={booking.slotLabel} />
+        <SummaryRow
+          label="Status"
+          value={<Badge variant="warning">Pending confirmation</Badge>}
+          border={false}
+        />
+      </div>
+
+      <Button className="w-full" onClick={onDone}>
+        Done
+      </Button>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -359,6 +455,7 @@ export function AppointmentBookDialog({
   clientHomeAddress,
   advisorInfo,
   initialClientId,
+  defaultMeetingFormat,
   guestInfo,
   onBook,
 }: AppointmentBookDialogProps) {
@@ -366,6 +463,22 @@ export function AppointmentBookDialog({
   // Guest form is shown in client mode when at least one identity field is missing.
   const showGuestForm = isClientMode && !(guestInfo?.name && guestInfo?.email);
 
+  // In client mode with a preset online platform, collapse Google Meet / MS Teams
+  // into a single "Online Meeting" option so the client sees 3 choices:
+  // Call | Online Meeting | Offline — without knowing the specific platform.
+  const visibleFormatOptions: typeof FORMAT_OPTIONS =
+    isClientMode && defaultMeetingFormat
+      ? [
+          FORMAT_CALL,
+          {
+            value: defaultMeetingFormat,
+            label: "Online Meeting",
+            icon: ONLINE_MEETING_ICON,
+          },
+          FORMAT_OFFLINE,
+        ]
+      : FORMAT_OPTIONS;
+
   const disabledDayOfWeek = React.useMemo(
     () =>
       schedule
@@ -375,16 +488,19 @@ export function AppointmentBookDialog({
     [schedule],
   );
 
+  // Stable "today" reference — avoids prop identity churn on CalendarPicker each render
+  const today = React.useMemo(() => new Date(), []);
+
   const [clientId, setClientId] = React.useState<string | undefined>(undefined);
   const [meetingType, setMeetingType] = React.useState("");
   const [meetingFormat, setMeetingFormat] =
-    React.useState<AppointmentMeetingFormat>("call");
+    React.useState<AppointmentMeetingFormat>(defaultMeetingFormat ?? "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 [date, setDate] = React.useState<Date | undefined>(() => new Date());
   const [selectedSlot, setSelectedSlot] = React.useState<
     AppointmentTimeSlot | undefined
   >(undefined);
@@ -398,6 +514,10 @@ export function AppointmentBookDialog({
   const [guestEmail, setGuestEmail] = React.useState(guestInfo?.email ?? "");
   const [guestPhone, setGuestPhone] = React.useState(guestInfo?.phone ?? "");
 
+  // null = form view; non-null = confirmation screen (client mode only)
+  const [submittedBooking, setSubmittedBooking] =
+    React.useState<SubmittedBooking | null>(null);
+
   const selectedClient = React.useMemo(
     () => clients.find((c) => c.id === clientId),
     [clients, clientId],
@@ -441,7 +561,7 @@ export function AppointmentBookDialog({
     if (!next) {
       setClientId(undefined);
       setMeetingType("");
-      setMeetingFormat("call");
+      setMeetingFormat(defaultMeetingFormat ?? "call");
       setOfflineLocation(advisorOfficeAddress ? "office" : "custom");
       setCustomAddress("");
       setDate(new Date());
@@ -451,281 +571,308 @@ export function AppointmentBookDialog({
       setGuestName(guestInfo?.name ?? "");
       setGuestEmail(guestInfo?.email ?? "");
       setGuestPhone(guestInfo?.phone ?? "");
+      setSubmittedBooking(null);
     }
     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">
-          {!isClientMode && (
-            <div className="flex flex-col gap-1.5">
-              <Label>Client</Label>
-              <ClientSearch
-                clients={clients}
-                value={clientId}
-                onValueChange={setClientId}
-              />
-            </div>
-          )}
+      <DialogContent size="2xl">
+        {submittedBooking ? (
+          <BookingConfirmationScreen
+            booking={submittedBooking}
+            onDone={() => handleOpenChange(false)}
+          />
+        ) : (
+          <>
+            <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">
+              {!isClientMode && (
+                <div className="flex flex-col gap-1.5">
+                  <Label>Client</Label>
+                  <ClientSearch
+                    clients={clients}
+                    value={clientId}
+                    onValueChange={setClientId}
+                  />
+                </div>
+              )}
 
-          {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>
-          )}
+              {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>
+              )}
+
+              {/* Guest identity — public booking only */}
+              {showGuestForm && (
+                <>
+                  <div className="flex flex-col gap-1.5">
+                    <Label htmlFor="guest-name">Full name</Label>
+                    <Input
+                      id="guest-name"
+                      placeholder="Your full name"
+                      value={guestName}
+                      onChange={(e) => setGuestName(e.target.value)}
+                      autoComplete="name"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <Label htmlFor="guest-email">Email</Label>
+                    <Input
+                      id="guest-email"
+                      type="email"
+                      placeholder="your@email.com"
+                      value={guestEmail}
+                      onChange={(e) => setGuestEmail(e.target.value)}
+                      autoComplete="email"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <Label htmlFor="guest-phone">
+                      Phone{" "}
+                      <span className="font-normal text-muted-foreground">
+                        (optional)
+                      </span>
+                    </Label>
+                    <Input
+                      id="guest-phone"
+                      type="tel"
+                      placeholder="+61 4XX XXX XXX"
+                      value={guestPhone}
+                      onChange={(e) => setGuestPhone(e.target.value)}
+                      autoComplete="tel"
+                    />
+                  </div>
+                </>
+              )}
 
-          {/* Guest identity — public booking only */}
-          {showGuestForm && (
-            <>
+              {/* Format picker
+                  - Advisor mode: all options (Call / Google Meet / MS Teams / Offline)
+                  - Client mode, no preset: all options
+                  - Client mode, preset online format: only [broker's platform, Offline]
+                    so clients can still choose in-person while the online platform is locked */}
               <div className="flex flex-col gap-1.5">
-                <Label htmlFor="guest-name">Full name</Label>
-                <Input
-                  id="guest-name"
-                  placeholder="Your full name"
-                  value={guestName}
-                  onChange={(e) => setGuestName(e.target.value)}
-                  autoComplete="name"
+                <Label>Meeting format</Label>
+                <MeetingFormatSection
+                  format={meetingFormat}
+                  onFormatChange={setMeetingFormat}
+                  options={visibleFormatOptions}
+                  offlineLocation={offlineLocation}
+                  onOfflineLocationChange={setOfflineLocation}
+                  customAddress={customAddress}
+                  onCustomAddressChange={setCustomAddress}
+                  advisorOfficeAddress={advisorOfficeAddress}
+                  clientHomeAddress={clientHomeAddress}
+                  isClientMode={isClientMode}
                 />
               </div>
-              <div className="flex flex-col gap-1.5">
-                <Label htmlFor="guest-email">Email</Label>
-                <Input
-                  id="guest-email"
-                  type="email"
-                  placeholder="your@email.com"
-                  value={guestEmail}
-                  onChange={(e) => setGuestEmail(e.target.value)}
-                  autoComplete="email"
-                />
+
+              {/* 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);
+                      if (d) onDateChange?.(d);
+                    }}
+                    captionLayout="label"
+                    fromDate={today}
+                    disabled={
+                      disabledDayOfWeek && disabledDayOfWeek.length > 0
+                        ? [{ before: today }, { dayOfWeek: disabledDayOfWeek }]
+                        : { before: today }
+                    }
+                    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">
+                        {formatDateLong(date)}
+                      </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="guest-phone">
-                  Phone{" "}
+                <Label htmlFor="book-apt-notes">
+                  Notes{" "}
                   <span className="font-normal text-muted-foreground">
                     (optional)
                   </span>
                 </Label>
-                <Input
-                  id="guest-phone"
-                  type="tel"
-                  placeholder="+61 4XX XXX XXX"
-                  value={guestPhone}
-                  onChange={(e) => setGuestPhone(e.target.value)}
-                  autoComplete="tel"
+                <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 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);
-                  if (d) onDateChange?.(d);
-                }}
-                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">
-                    {formatDateLong(date)}
-                  </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,
-                  guestName: isClientMode
-                    ? guestName.trim() || undefined
-                    : undefined,
-                  guestEmail: isClientMode
-                    ? guestEmail.trim() || undefined
-                    : undefined,
-                  guestPhone: isClientMode
-                    ? guestPhone.trim() || undefined
-                    : undefined,
-                });
-                handleOpenChange(false);
-              }
-            }}
-          >
-            {isClientMode ? "Book Appointment" : "Create appointment"}
-          </Button>
-        </DialogFooter>
+            <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,
+                      guestName: isClientMode
+                        ? guestName.trim() || undefined
+                        : undefined,
+                      guestEmail: isClientMode
+                        ? guestEmail.trim() || undefined
+                        : undefined,
+                      guestPhone: isClientMode
+                        ? guestPhone.trim() || undefined
+                        : undefined,
+                    });
+                    if (isClientMode) {
+                      setSubmittedBooking({
+                        advisorName: advisorInfo?.name,
+                        date,
+                        slotLabel: selectedSlot.label,
+                      });
+                    } else {
+                      handleOpenChange(false);
+                    }
+                  }
+                }}
+              >
+                {isClientMode ? "Book Appointment" : "Create appointment"}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
       </DialogContent>
     </Dialog>
   );