[pull] main from calcom:main

.env.example

@@ -261,6 +261,9 @@ EMAIL_SERVER_PORT=1025
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 
+# queue or cancel payment reminder email/flow
+AWAITING_PAYMENT_EMAIL_DELAY_MINUTES=
+
 # Used for E2E for email testing
 # Set it to "1" if you need to email checks in E2E tests locally
 # Make sure to run mailhog container manually or with `yarn dx`

apps/web/app/(use-page-wrapper)/(main-nav)/booking/[uid]/logs/page.tsx

@@ -11,7 +11,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
-import BookingLogsView from "~/booking/logs/views/booking-logs-view";
+import { BookingHistoryPage } from "@calcom/features/booking-audit/client/components/BookingHistoryPage";
 
 export const generateMetadata = async ({ params }: { params: Promise<{ uid: string }> }) =>
     await _generateMetadata(
@@ -39,7 +39,7 @@ const Page = async ({ params }: PageProps) => {
 
     return (
         <ShellMainAppDir heading={t("booking_history")} subtitle={t("booking_history_description")}>
-            <BookingLogsView bookingUid={bookingUid} />
+            <BookingHistoryPage bookingUid={bookingUid} />
         </ShellMainAppDir>
     );
 };

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx

@@ -55,9 +55,12 @@ const Page = async ({ params }: PageProps) => {
   }
 
   const featuresRepository = new FeaturesRepository(prisma);
-  const bookingsV3Enabled = session?.user?.id
-    ? await featuresRepository.checkIfUserHasFeature(session.user.id, "bookings-v3")
-    : false;
+  const featureFlags = session?.user?.id
+    ? await featuresRepository.getUserFeaturesStatus(session.user.id, ["bookings-v3", "booking-audit"])
+    : { "bookings-v3": false, "booking-audit": false };
+
+  const bookingsV3Enabled = featureFlags["bookings-v3"] ?? false;
+  const bookingAuditEnabled = featureFlags["booking-audit"] ?? false;
 
   return (
     <ShellMainAppDir
@@ -69,6 +72,7 @@ const Page = async ({ params }: PageProps) => {
         userId={session?.user?.id}
         permissions={{ canReadOthersBookings }}
         bookingsV3Enabled={bookingsV3Enabled}
+        bookingAuditEnabled={bookingAuditEnabled}
       />
     </ShellMainAppDir>
   );

apps/web/modules/bookings/components/BookingDetailsSheet.tsx

@@ -45,21 +45,24 @@ import { usePaymentStatus } from "../hooks/usePaymentStatus";
 import { useBookingDetailsSheetStore } from "../store/bookingDetailsSheetStore";
 import type { BookingOutput } from "../types";
 import { JoinMeetingButton } from "./JoinMeetingButton";
-
+import { BookingHistory } from "@calcom/features/booking-audit/client/components/BookingHistory";
+import { SegmentedControl } from "@calcom/ui/components/segmented-control";
 type BookingMetaData = z.infer<typeof bookingMetadataSchema>;
 
 interface BookingDetailsSheetProps {
   userTimeZone?: string;
   userTimeFormat?: number;
   userId?: number;
   userEmail?: string;
+  bookingAuditEnabled?: boolean;
 }
 
 export function BookingDetailsSheet({
   userTimeZone,
   userTimeFormat,
   userId,
   userEmail,
+  bookingAuditEnabled = false,
 }: BookingDetailsSheetProps) {
   const booking = useBookingDetailsSheetStore((state) => state.getSelectedBooking());
 
@@ -74,6 +77,7 @@ export function BookingDetailsSheet({
         userTimeFormat={userTimeFormat}
         userId={userId}
         userEmail={userEmail}
+        bookingAuditEnabled={bookingAuditEnabled}
       />
     </BookingActionsStoreProvider>
   );
@@ -85,6 +89,26 @@ interface BookingDetailsSheetInnerProps {
   userTimeFormat?: number;
   userId?: number;
   userEmail?: string;
+  bookingAuditEnabled?: boolean;
+}
+
+function useActiveSegment(bookingAuditEnabled: boolean) {
+  const [activeSegment, setActiveSegmentInStore] = useBookingDetailsSheetStore((state) => [state.activeSegment, state.setActiveSegment]);
+
+  const getDerivedActiveSegment = ({ activeSegment, bookingAuditEnabled }: { activeSegment: "info" | "history" | null, bookingAuditEnabled: boolean }) => {
+    if (!bookingAuditEnabled && activeSegment === "history") {
+      return "info";
+    }
+    return activeSegment ?? "info";
+  }
+
+  const derivedActiveSegment = getDerivedActiveSegment({ activeSegment, bookingAuditEnabled });
+
+  const setDerivedActiveSegment = (segment: "info" | "history") => {
+    setActiveSegmentInStore(getDerivedActiveSegment({ activeSegment: segment, bookingAuditEnabled }));
+  };
+
+  return [derivedActiveSegment, setDerivedActiveSegment] as const;
 }
 
 function BookingDetailsSheetInner({
@@ -93,8 +117,10 @@ function BookingDetailsSheetInner({
   userTimeFormat,
   userId,
   userEmail,
+  bookingAuditEnabled = false,
 }: BookingDetailsSheetInnerProps) {
   const { t } = useLocale();
+  const [activeSegment, setActiveSegment] = useActiveSegment(bookingAuditEnabled);
 
   // Fetch additional booking details for reschedule information
   const { data: bookingDetails } = trpc.viewer.bookings.getBookingDetails.useQuery(
@@ -117,13 +143,15 @@ function BookingDetailsSheetInner({
       navigatePrevious: state.navigatePrevious,
       isTransitioning: state.isTransitioning,
       setSelectedBookingUid: state.setSelectedBookingUid,
+      setActiveSegment: state.setActiveSegment,
       canGoNext: hasNextInArray || (isLastInArray && state.capabilities?.canNavigateToNextPeriod()),
       canGoPrev: hasPreviousInArray || (isFirstInArray && state.capabilities?.canNavigateToPreviousPeriod()),
     };
   });
 
   const handleClose = () => {
     navigation.setSelectedBookingUid(null);
+    navigation.setActiveSegment(null);
   };
 
   const handleNext = () => {
@@ -167,15 +195,15 @@ function BookingDetailsSheetInner({
   const recurringInfo =
     booking.recurringEventId && booking.eventType?.recurringEvent
       ? {
-          count: booking.eventType.recurringEvent.count,
-          recurringEvent: booking.eventType.recurringEvent,
-        }
+        count: booking.eventType.recurringEvent.count,
+        recurringEvent: booking.eventType.recurringEvent,
+      }
       : null;
 
   const customResponses = booking.responses
     ? Object.entries(booking.responses as Record<string, unknown>)
-        .filter(([fieldName]) => shouldShowFieldInCustomResponses(fieldName))
-        .map(([question, answer]) => [question, answer] as [string, unknown])
+      .filter(([fieldName]) => shouldShowFieldInCustomResponses(fieldName))
+      .map(([question, answer]) => [question, answer] as [string, unknown])
     : [];
 
   const reason = booking.assignmentReason?.[0];
@@ -254,43 +282,59 @@ function BookingDetailsSheetInner({
               </SheetTitle>
             </div>
 
-            <WhenSection
-              rescheduled={booking.rescheduled || false}
-              startTime={startTime}
-              endTime={endTime}
-              timeZone={userTimeZone}
-              previousBooking={bookingDetails?.previousBooking}
-            />
+            {bookingAuditEnabled && (
+              <SegmentedControl
+                data={[{ value: "info", label: t("info") }, { value: "history", label: t("history") }]}
+                value={activeSegment}
+                onChange={(value) => setActiveSegment(value)}
+              />
+            )}
 
-            <OldRescheduledBookingInfo
-              booking={booking}
-              rescheduledToBooking={bookingDetails?.rescheduledToBooking}
-            />
+            {activeSegment === "info" && (
+              <>
+                <WhenSection
+                  rescheduled={booking.rescheduled || false}
+                  startTime={startTime}
+                  endTime={endTime}
+                  timeZone={userTimeZone}
+                  previousBooking={bookingDetails?.previousBooking}
+                />
 
-            <NewRescheduledBookingInfo booking={booking} />
+                <OldRescheduledBookingInfo
+                  booking={booking}
+                  rescheduledToBooking={bookingDetails?.rescheduledToBooking}
+                />
 
-            <CancelledBookingInfo booking={booking} />
+                <NewRescheduledBookingInfo booking={booking} />
 
-            <WhoSection booking={booking} />
+                <CancelledBookingInfo booking={booking} />
 
-            <WhereSection booking={booking} meta={bookingMetadata} />
+                <WhoSection booking={booking} />
 
-            <RecurringInfoSection recurringInfo={recurringInfo} />
+                <WhereSection booking={booking} meta={bookingMetadata} />
 
-            <AssignmentReasonSection booking={booking} />
+                <RecurringInfoSection recurringInfo={recurringInfo} />
 
-            {booking.payment?.[0] && <PaymentSection booking={booking} payment={booking.payment[0]} />}
+                <AssignmentReasonSection booking={booking} />
 
-            <SlotsSection booking={booking} />
+                {booking.payment?.[0] && <PaymentSection booking={booking} payment={booking.payment[0]} />}
 
-            <AdditionalNotesSection booking={booking} />
+                <SlotsSection booking={booking} />
 
-            <CustomQuestionsSection
-              customResponses={customResponses}
-              bookingFields={booking.eventType?.bookingFields}
-            />
+                <AdditionalNotesSection booking={booking} />
 
-            <TrackingSection tracking={bookingDetails?.tracking} />
+                <CustomQuestionsSection
+                  customResponses={customResponses}
+                  bookingFields={booking.eventType?.bookingFields}
+                />
+
+                <TrackingSection tracking={bookingDetails?.tracking} />
+              </>
+            )}
+
+            {bookingAuditEnabled && activeSegment === "history" && (
+              <BookingHistory bookingUid={booking.uid} />
+            )}
           </div>
         </SheetBody>
 

apps/web/modules/bookings/components/BookingListContainer.tsx

@@ -71,6 +71,7 @@ interface BookingListContainerProps {
     canReadOthersBookings: boolean;
   };
   bookingsV3Enabled: boolean;
+  bookingAuditEnabled: boolean;
 }
 
 interface BookingListInnerProps extends BookingListContainerProps {
@@ -87,6 +88,7 @@ function BookingListInner({
   permissions,
   bookings,
   bookingsV3Enabled,
+  bookingAuditEnabled,
   data,
   isPending,
   hasError,
@@ -221,6 +223,7 @@ function BookingListInner({
           userTimeFormat={user?.timeFormat === null ? undefined : user?.timeFormat}
           userId={user?.id}
           userEmail={user?.email}
+          bookingAuditEnabled={bookingAuditEnabled}
         />
       )}
     </>

apps/web/modules/bookings/hooks/useActiveSegmentFromUrl.ts

@@ -0,0 +1,13 @@
+import { useQueryState } from "nuqs";
+
+export function useActiveSegmentFromUrl() {
+    return useQueryState<"info" | "history">("activeSegment", {
+        defaultValue: "info",
+        parse: (value) => {
+            if (!value) return "info";
+            if (value === "history") return "history";
+            return "info";
+        },
+    });
+}
+