feat: add instant meeting expiry input (#15555)

* feat: add instant meeting expiry input

* fix: type err

* chore: remove type

* chore: update label

Author: Udit-takkar

apps/web/components/eventtype/InstantEventController.tsx

@@ -2,7 +2,7 @@ import type { Webhook } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import type { EventTypeSetup } from "pages/event-types/[type]";
 import { useState } from "react";
-import { useFormContext } from "react-hook-form";
+import { useFormContext, Controller } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
@@ -15,7 +15,17 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, EmptyScreen, SettingsToggle, Dialog, DialogContent, showToast } from "@calcom/ui";
+import {
+  Alert,
+  Button,
+  EmptyScreen,
+  SettingsToggle,
+  Dialog,
+  DialogContent,
+  showToast,
+  TextField,
+  Label,
+} from "@calcom/ui";
 
 type InstantEventControllerProps = {
   eventType: EventTypeSetup;
@@ -85,7 +95,33 @@ export default function InstantEventController({
                     }
                   }}>
                   <div className="border-subtle rounded-b-lg border border-t-0 p-6">
-                    {instantEventState && <InstantMeetingWebhooks eventType={eventType} />}
+                    {instantEventState && (
+                      <div className="flex flex-col gap-2">
+                        <Controller
+                          name="instantMeetingExpiryTimeOffset"
+                          render={({ field: { value, onChange } }) => (
+                            <>
+                              <Label>{t("set_instant_meeting_expiry_time_offset_description")}</Label>
+                              <TextField
+                                required
+                                name="instantMeetingExpiryTimeOffset"
+                                labelSrOnly
+                                type="number"
+                                defaultValue={value}
+                                min={10}
+                                containerClassName="max-w-80"
+                                addOnSuffix={<>{t("seconds")}</>}
+                                onChange={(e) => {
+                                  onChange(Math.abs(Number(e.target.value)));
+                                }}
+                                data-testid="instant-meeting-expiry-time-offset"
+                              />
+                            </>
+                          )}
+                        />
+                        <InstantMeetingWebhooks eventType={eventType} />
+                      </div>
+                    )}
                   </div>
                 </SettingsToggle>
               </>
@@ -213,9 +249,6 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
               </>
             ) : (
               <>
-                <p className="text-default mb-4 text-sm font-normal">
-                  {t("warning_payment_instant_meeting_event")}
-                </p>
                 <EmptyScreen
                   Icon="webhook"
                   headline={t("create_your_first_webhook")}

apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -251,6 +251,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       destinationCalendar: eventType.destinationCalendar,
       recurringEvent: eventType.recurringEvent || null,
       isInstantEvent: eventType.isInstantEvent,
+      instantMeetingExpiryTimeOffset: eventType.instantMeetingExpiryTimeOffset,
       description: eventType.description ?? undefined,
       schedule: eventType.schedule || undefined,
       bookingLimits: eventType.bookingLimits || undefined,

apps/web/public/static/locales/en/common.json

@@ -1043,6 +1043,7 @@
   "seats_nearly_full": "Seats almost full",
   "seats_half_full": "Seats filling fast",
   "number_of_seats": "Number of seats per booking",
+  "set_instant_meeting_expiry_time_offset_description": "Set meeting join window (seconds): The time frame in seconds within which host can join and start the meeting. After this period, the meeting join url will expire.",
   "enter_number_of_seats": "Enter number of seats",
   "you_can_manage_your_schedules": "You can manage your schedules on the Availability page.",
   "booking_full": "No more seats available",

packages/features/bookings/Booker/components/hooks/useBookings.ts

@@ -204,11 +204,6 @@ export const useBookings = ({ event, hashedLink, bookingForm, metadata, teamMemb
       });
     },
     onError: (err, _, ctx) => {
-      // TODO:
-      // const vercelId = ctx?.meta?.headers?.get("x-vercel-id");
-      // if (vercelId) {
-      //   setResponseVercelIdHeader(vercelId);
-      // }
       bookerFormErrorRef && bookerFormErrorRef.current?.scrollIntoView({ behavior: "smooth" });
     },
   });

packages/features/eventtypes/lib/types.ts

@@ -34,6 +34,7 @@ export type FormValues = {
   eventName: string;
   slug: string;
   isInstantEvent: boolean;
+  instantMeetingExpiryTimeOffset: number;
   length: number;
   offsetStart: number;
   description: string;

packages/features/instant-meeting/handleInstantMeeting.ts

@@ -194,12 +194,25 @@ async function handler(req: NextApiRequest) {
   const newBooking = await prisma.booking.create(createBookingObj);
 
   // Create Instant Meeting Token
+
   const token = randomBytes(32).toString("hex");
+
+  const eventTypeWithExpiryTimeOffset = await prisma.eventType.findUniqueOrThrow({
+    where: {
+      id: req.body.eventTypeId,
+    },
+    select: {
+      instantMeetingExpiryTimeOffset: true,
+    },
+  });
+
+  const instantMeetingExpiryTimeOffset = eventTypeWithExpiryTimeOffset?.instantMeetingExpiryTimeOffset ?? 90;
+
   const instantMeetingToken = await prisma.instantMeetingToken.create({
     data: {
       token,
-      // 90 Seconds
-      expires: new Date(new Date().getTime() + 1000 * 90),
+      // current time + offset Seconds
+      expires: new Date(new Date().getTime() + 1000 * instantMeetingExpiryTimeOffset),
       team: {
         connect: {
           id: eventType.team.id,

packages/lib/event-types/getEventTypeById.ts

@@ -84,6 +84,7 @@ export const getEventTypeById = async ({
       description: true,
       length: true,
       isInstantEvent: true,
+      instantMeetingExpiryTimeOffset: true,
       aiPhoneCallConfig: true,
       offsetStart: true,
       hidden: true,

packages/lib/server/eventTypeSelect.ts

@@ -40,6 +40,7 @@ export const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
   slotInterval: true,
   successRedirectUrl: true,
   isInstantEvent: true,
+  instantMeetingExpiryTimeOffset: true,
   aiPhoneCallConfig: true,
   assignAllTeamMembers: true,
   recurringEvent: true,

packages/lib/test/builder.ts

@@ -82,6 +82,7 @@ export const buildEventType = (eventType?: Partial<EventType>): EventType => {
     description: faker.lorem.paragraph(),
     position: 1,
     isInstantEvent: false,
+    instantMeetingExpiryTimeOffset: 90,
     locations: null,
     length: 15,
     offsetStart: 0,

packages/platform/sdk/src/endpoints/events/event-types/types.ts

@@ -59,6 +59,7 @@ export type EventType = {
   bookingLimits: number | null;
   durationLimits: number | null;
   isInstantEvent: boolean;
+  instantMeetingExpiryTimeOffset: number;
   assignAllTeamMembers: boolean;
   useEventTypeDestinationCalendarEmail: boolean;
 };

packages/platform/sdk/src/endpoints/events/types.ts

@@ -45,6 +45,7 @@ export type Event = {
   eventName: string;
   slug: string;
   isInstantEvent: boolean;
+  instantMeetingExpiryTimeOffset: number;
   aiPhoneCallConfig: {
     eventTypeId: number;
     enabled: boolean;

packages/prisma/migrations/20240624195855_add_instant_meeting_expiry_offset/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventType" ADD COLUMN     "instantMeetingExpiryTimeOffset" INTEGER NOT NULL DEFAULT 90;

packages/prisma/schema.prisma

@@ -133,6 +133,7 @@ model EventType {
   /// @zod.custom(imports.intervalLimitsType)
   durationLimits                       Json?
   isInstantEvent                       Boolean                   @default(false)
+  instantMeetingExpiryTimeOffset       Int                       @default(90)
   assignAllTeamMembers                 Boolean                   @default(false)
   useEventTypeDestinationCalendarEmail Boolean                   @default(false)
   aiPhoneCallConfig                    AIPhoneCallConfiguration?

packages/prisma/zod-utils.ts

@@ -608,6 +608,7 @@ export const allManagedEventTypeProps: { [k in keyof Omit<Prisma.EventTypeSelect
   title: true,
   description: true,
   isInstantEvent: true,
+  instantMeetingExpiryTimeOffset: true,
   aiPhoneCallConfig: true,
   currency: true,
   periodDays: true,

packages/trpc/server/routers/viewer/eventTypes/types.ts

@@ -8,6 +8,7 @@ export const EventTypeUpdateInput = _EventTypeModel
   /** Optional fields */
   .extend({
     isInstantEvent: z.boolean().optional(),
+    instantMeetingExpiryTimeOffset: z.number().optional(),
     aiPhoneCallConfig: z
       .object({
         generalPrompt: z.string(),