feat: Add email input dialog to /booking/uid page

apps/web/components/booking/CancelBooking.tsx

@@ -83,6 +83,8 @@ type Props = {
       currency: string;
       appId: string | null;
     } | null;
+    userEmail?: string;
+    attendees?: { email: string }[];
   };
   profile: {
     name: string | null;
@@ -177,6 +179,74 @@ export default function CancelBooking(props: Props) {
 
   const isRenderedAsCancelDialog = props.renderContext === "dialog";
 
+  const handleCancellation = async () => {
+    setLoading(true);
+
+    try {
+      // telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+
+      const response = await fetch("/api/csrf?sameSite=none", { cache: "no-store" });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSRF token: ${response.status}`);
+      }
+      const { csrfToken } = await response.json();
+
+      const res = await fetch("/api/cancel", {
+        body: JSON.stringify({
+          uid: booking?.uid,
+          cancellationReason: cancellationReason,
+          allRemainingBookings,
+          // @NOTE: very important this shouldn't cancel with number ID use uid instead
+          seatReferenceUid,
+          cancelledBy: currentUserEmail,
+          internalNote: internalNote,
+          csrfToken,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      const bookingWithCancellationReason = {
+        ...(bookingCancelledEventProps.booking as object),
+        cancellationReason,
+      } as unknown;
+
+      if (res.ok) {
+        // tested by apps/web/playwright/booking-pages.e2e.ts
+        sdkActionManager?.fire("bookingCancelled", {
+          ...bookingCancelledEventProps,
+          booking: bookingWithCancellationReason,
+        });
+        refreshData();
+        if (props.onCanceled) {
+          props.onCanceled();
+        }
+      } else {
+        const data = await res.json();
+        const errorMessage =
+          data.message ||
+          `${t("error_with_status_code_occured", { status: res.status })} ${t("please_try_again")}`;
+
+        if (props.showErrorAsToast) {
+          showToast(errorMessage, "error");
+        } else {
+          setError(errorMessage);
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : t("please_try_again");
+      if (props.showErrorAsToast) {
+        showToast(errorMessage, "error");
+      } else {
+        setError(errorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       {error && !props.showErrorAsToast && (
@@ -268,62 +338,7 @@ export default function CancelBooking(props: Props) {
               <Button
                 data-testid="confirm_cancel"
                 disabled={hostMissingCancellationReason || cancellationNoShowFeeNotAcknowledged}
-                onClick={async () => {
-                  setLoading(true);
-
-                  // telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
-
-                  const response = await fetch("/api/csrf?sameSite=none", { cache: "no-store" });
-                  const { csrfToken } = await response.json();
-
-                  const res = await fetch("/api/cancel", {
-                    body: JSON.stringify({
-                      uid: booking?.uid,
-                      cancellationReason: cancellationReason,
-                      allRemainingBookings,
-                      // @NOTE: very important this shouldn't cancel with number ID use uid instead
-                      seatReferenceUid,
-                      cancelledBy: currentUserEmail,
-                      internalNote: internalNote,
-                      csrfToken,
-                    }),
-                    headers: {
-                      "Content-Type": "application/json",
-                    },
-                    method: "POST",
-                  });
-
-                  const bookingWithCancellationReason = {
-                    ...(bookingCancelledEventProps.booking as object),
-                    cancellationReason,
-                  } as unknown;
-
-                  if (res.status >= 200 && res.status < 300) {
-                    // tested by apps/web/playwright/booking-pages.e2e.ts
-                    sdkActionManager?.fire("bookingCancelled", {
-                      ...bookingCancelledEventProps,
-                      booking: bookingWithCancellationReason,
-                    });
-                    refreshData();
-                    if (props.onCanceled) {
-                      props.onCanceled();
-                    }
-                  } else {
-                    const data = await res.json();
-                    setLoading(false);
-                    const errorMessage =
-                      data.message ||
-                      `${t("error_with_status_code_occured", { status: res.status })} ${t(
-                        "please_try_again"
-                      )}`;
-
-                    if (props.showErrorAsToast) {
-                      showToast(errorMessage, "error");
-                    } else {
-                      setError(errorMessage);
-                    }
-                  }
-                }}
+                onClick={handleCancellation}
                 loading={loading}>
                 {props.allRemainingBookings ? t("cancel_all_remaining") : t("cancel_event")}
               </Button>

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { Toaster } from "sonner";
 import { z } from "zod";
 
@@ -49,8 +49,10 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent, DialogHeader } from "@calcom/ui/components/dialog";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { EmailInput, TextArea } from "@calcom/ui/components/form";
+import { Input } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 import { useCalcomTheme } from "@calcom/ui/styles";
@@ -82,6 +84,10 @@ const querySchema = z.object({
   redirect_status: z.string().optional(),
 });
 
+const verificationSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Enter a valid email address"),
+});
+
 const useBrandColors = ({
   brandColor,
   darkBrandColor,
@@ -162,7 +168,7 @@ export default function Success(props: PageProps) {
   const [is24h, setIs24h] = useState(
     props?.userTimeFormat ? props.userTimeFormat === 24 : isBrowserLocale24h()
   );
-  const { data: session } = useSession();
+  const { data: session, status: sessionStatus } = useSession();
   const isHost = props.isLoggedInUserHost;
 
   const [showUtmParams, setShowUtmParams] = useState(false);
@@ -195,12 +201,17 @@ export default function Success(props: PageProps) {
   const currentUserEmail =
     searchParams?.get("rescheduledBy") ??
     searchParams?.get("cancelledBy") ??
+    searchParams?.get("email") ??
     session?.user?.email ??
     undefined;
 
   const defaultRating = validateRating(rating);
   const [rateValue, setRateValue] = useState<number>(defaultRating);
   const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false);
+  const [showVerificationDialog, setShowVerificationDialog] = useState<boolean>(false);
+  const [verificationEmail, setVerificationEmail] = useState<string>("");
+  const [verificationError, setVerificationError] = useState<string>("");
+  const [isVerifying, setIsVerifying] = useState<boolean>(false);
 
   const mutation = trpc.viewer.public.submitRating.useMutation({
     onSuccess: async () => {
@@ -450,6 +461,87 @@ export default function Success(props: PageProps) {
     return isRecurringBooking ? t("meeting_is_scheduled_recurring") : t("meeting_is_scheduled");
   })();
 
+  const emailParam = useMemo(() => {
+    return searchParams.get("email");
+  }, [searchParams]);
+
+  const [isEmailVerified, setIsEmailVerified] = useState<boolean>(false);
+  const [lastVerifiedEmail, setLastVerifiedEmail] = useState<string | null>(null);
+
+  const { data: emailVerificationResult, isLoading: isVerifyingEmailParam } =
+    trpc.viewer.public.verifyBookingEmail.useQuery(
+      { bookingUid: bookingInfo.uid, email: emailParam ?? "" },
+      { enabled: !!emailParam && !session }
+    );
+
+  useEffect(() => {
+    if (emailVerificationResult?.isValid && emailParam) {
+      setIsEmailVerified(true);
+      setLastVerifiedEmail(emailParam);
+    }
+  }, [emailVerificationResult, emailParam]);
+
+  useEffect(() => {
+    if (emailParam !== lastVerifiedEmail) {
+      setIsEmailVerified(false);
+    }
+  }, [emailParam, lastVerifiedEmail]);
+
+  useEffect(() => {
+    if (sessionStatus === "loading" || isVerifyingEmailParam) return;
+
+    const needsVerification = !session && (!emailParam || !emailVerificationResult?.isValid);
+
+    setShowVerificationDialog((prev) => {
+      if (prev === needsVerification) return prev;
+      return needsVerification;
+    });
+  }, [session, sessionStatus, emailParam, emailVerificationResult, isVerifyingEmailParam]);
+
+  const updateSearchParams = useCallback(
+    (email: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("email", email);
+      router.replace(`?${params.toString()}`, { scroll: false });
+    },
+    [router, searchParams]
+  );
+
+  const verifyEmailMutation = trpc.viewer.public.verifyBookingEmail.useQuery(
+    { bookingUid: bookingInfo.uid, email: verificationEmail },
+    { enabled: false }
+  );
+
+  const handleVerification = async () => {
+    setVerificationError("");
+
+    const parsed = verificationSchema.safeParse({ email: verificationEmail });
+    if (!parsed.success) {
+      setVerificationError(parsed.error.errors[0].message);
+      return;
+    }
+
+    setIsVerifying(true);
+    try {
+      const result = await verifyEmailMutation.refetch();
+      if (result.data?.isValid) {
+        setIsEmailVerified(true);
+        updateSearchParams(verificationEmail);
+        setShowVerificationDialog(false);
+      } else {
+        setVerificationError(t("verification_email_error"));
+      }
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const showBookingInfo = useMemo(() => {
+    if (session) return true;
+    if (!emailParam) return false;
+    return isEmailVerified || emailVerificationResult?.isValid;
+  }, [session, emailParam, isEmailVerified, emailVerificationResult]);
+
   return (
     <div className={isEmbed ? "" : "h-screen"} data-testid="success-page">
       {!isEmbed && !isFeedbackMode && (
@@ -478,7 +570,8 @@ export default function Success(props: PageProps) {
       <BookingPageTagManager
         eventType={{ ...eventType, metadata: eventTypeMetaDataSchemaWithTypedApps.parse(eventType.metadata) }}
       />
-      <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
+      {showBookingInfo ? (
+        <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
         <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
           <div
             className={classNames(
@@ -1112,6 +1205,45 @@ export default function Success(props: PageProps) {
           </div>
         </div>
       </main>
+      ) : (
+        <Dialog
+          open={showVerificationDialog}
+          onOpenChange={() => {
+            setShowVerificationDialog;
+          }}
+          data-testid="verify-email-dialog">
+          <DialogContent
+            onPointerDownOutside={(e) => e.preventDefault()}
+            onEscapeKeyDown={(e) => e.preventDefault()}>
+            <DialogHeader title={t("verify_email")} />
+            <div className="space-y-4 py-4">
+              <p className="text-default text-sm">{t("verification_email_dialog_description")}</p>
+              <Input
+                data-testid="verify-email-input"
+                type="email"
+                placeholder={t("verification_email_input_placeholder")}
+                value={verificationEmail}
+                onChange={(e) => setVerificationEmail(e.target.value)}
+                className="mb-2"
+              />
+              {verificationError && (
+                <p data-testid="verify-email-error" className="text-error text-sm">
+                  {verificationError}
+                </p>
+              )}
+              <div className="flex justify-end space-x-2">
+                <Button
+                  onClick={handleVerification}
+                  disabled={isVerifying}
+                  loading={isVerifying}
+                  data-testid="verify-email-trigger">
+                  {t("verify")}
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
       <Toaster position="bottom-right" />
     </div>
   );