feat: availability in instant meeting

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

@@ -2193,6 +2193,7 @@
   "member_removed": "Member removed",
   "my_availability": "My Availability",
   "team_availability": "Team Availability",
+  "instant_meeting_availability": "Instant meeting availability",
   "backup_code": "Backup Code",
   "backup_codes": "Backup Codes",
   "backup_code_instructions": "Each backup code can be used exactly once to grant access without your authenticator.",

apps/web/test/lib/handleChildrenEventTypes.test.ts

@@ -143,6 +143,7 @@ describe("handleChildrenEventTypes", () => {
           users: { connect: [{ id: 4 }] },
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
+          instantMeetingScheduleId: undefined,
           bookingLimits: undefined,
           durationLimits: undefined,
           recurringEvent: undefined,
@@ -199,6 +200,7 @@ describe("handleChildrenEventTypes", () => {
           scheduleId: null,
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
+          instantMeetingScheduleId: undefined,
           hashedLink: { create: { link: expect.any(String) } },
         },
         where: {
@@ -304,6 +306,7 @@ describe("handleChildrenEventTypes", () => {
           recurringEvent: undefined,
           eventTypeColor: undefined,
           hashedLink: undefined,
+          instantMeetingScheduleId: undefined,
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
           userId: 4,
@@ -357,6 +360,7 @@ describe("handleChildrenEventTypes", () => {
           locations: [],
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
+          instantMeetingScheduleId: undefined,
         },
         where: {
           userId_parentId: {
@@ -421,6 +425,7 @@ describe("handleChildrenEventTypes", () => {
           recurringEvent: undefined,
           eventTypeColor: undefined,
           hashedLink: undefined,
+          instantMeetingScheduleId: undefined,
           locations: [],
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
@@ -447,6 +452,7 @@ describe("handleChildrenEventTypes", () => {
           lockTimeZoneToggleOnBookingPage: false,
           requiresBookerEmailVerification: false,
           hashedLink: undefined,
+          instantMeetingScheduleId: undefined,
         },
         where: {
           userId_parentId: {

packages/features/bookings/Booker/Booker.tsx

@@ -439,7 +439,7 @@ const BookerComponent = ({
           }}
         />
 
-        {bookerState !== "booking" && event.data?.isInstantEvent && (
+        {bookerState !== "booking" && event.data?.showInstantEventConnectNowModal && (
           <div
             className={classNames(
               "animate-fade-in-up  z-40 my-2 opacity-0",

packages/features/bookings/types.ts

@@ -51,7 +51,7 @@ export type BookerEvent = Pick<
   | "bookingFields"
   | "seatsShowAvailabilityCount"
   | "isInstantEvent"
-> & { users: BookerEventUser[] } & { profile: BookerEventProfile };
+> & { users: BookerEventUser[]; showInstantEventConnectNowModal: boolean } & { profile: BookerEventProfile };
 
 export type ValidationErrors<T extends object> = { key: FieldPath<T>; error: ErrorOption }[];
 

packages/features/eventtypes/components/EventType.tsx

@@ -210,6 +210,7 @@ export const EventType = (props: EventTypeSetupProps & { allActiveWorkflows?: Wo
       instantMeetingExpiryTimeOffsetInSeconds: eventType.instantMeetingExpiryTimeOffsetInSeconds,
       description: eventType.description ?? undefined,
       schedule: eventType.schedule || undefined,
+      instantMeetingSchedule: eventType.instantMeetingSchedule || undefined,
       bookingLimits: eventType.bookingLimits || undefined,
       onlyShowFirstAvailableSlot: eventType.onlyShowFirstAvailableSlot || undefined,
       durationLimits: eventType.durationLimits || undefined,

packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx

@@ -2,10 +2,12 @@ import type { Webhook } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useFormContext, Controller } from "react-hook-form";
+import { components } from "react-select";
+import type { OptionProps, SingleValueProps } from "react-select";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
-import type { EventTypeSetup, FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { EventTypeSetup, FormValues, AvailabilityOption } from "@calcom/features/eventtypes/lib/types";
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
@@ -24,6 +26,8 @@ import {
   showToast,
   TextField,
   Label,
+  Select,
+  Badge,
 } from "@calcom/ui";
 
 type InstantEventControllerProps = {
@@ -32,6 +36,36 @@ type InstantEventControllerProps = {
   isTeamEvent: boolean;
 };
 
+const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
+  const { label, isDefault } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.Option {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+    </components.Option>
+  );
+};
+
+const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
+  const { label, isDefault } = props.data;
+  const { t } = useLocale();
+  return (
+    <components.SingleValue {...props}>
+      <span>{label}</span>
+      {isDefault && (
+        <Badge variant="blue" className="ml-2">
+          {t("default")}
+        </Badge>
+      )}
+    </components.SingleValue>
+  );
+};
+
 export default function InstantEventController({
   eventType,
   paymentEnabled,
@@ -42,13 +76,30 @@ export default function InstantEventController({
   const [instantEventState, setInstantEventState] = useState<boolean>(eventType?.isInstantEvent ?? false);
   const formMethods = useFormContext<FormValues>();
 
-  const { shouldLockDisableProps } = useLockedFieldsManager({ eventType, translate: t, formMethods });
+  const { shouldLockDisableProps } = useLockedFieldsManager({
+    eventType,
+    translate: t,
+    formMethods,
+  });
 
   const instantLocked = shouldLockDisableProps("isInstantEvent");
 
   const isOrg = !!session.data?.user?.org?.id;
 
-  if (session.status === "loading") return <></>;
+  const { data, isPending } = trpc.viewer.availability.list.useQuery(undefined);
+
+  if (session.status === "loading" || isPending || !data) return <></>;
+
+  const schedules = data.schedules;
+
+  const options = schedules.map((schedule) => ({
+    value: schedule.id,
+    label: schedule.name,
+    isDefault: schedule.isDefault,
+    isManaged: false,
+  }));
+
+  console.log("options", options);
 
   return (
     <LicenseRequired>
@@ -96,6 +147,32 @@ export default function InstantEventController({
                   <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                     {instantEventState && (
                       <div className="flex flex-col gap-2">
+                        <Controller
+                          name="instantMeetingSchedule"
+                          render={({ field: { onChange, value } }) => {
+                            const optionValue: AvailabilityOption | undefined = options.find(
+                              (option) => option.value === value
+                            );
+                            return (
+                              <>
+                                <Label>{t("instant_meeting_availability")}</Label>
+                                <Select
+                                  placeholder={t("select")}
+                                  options={options}
+                                  isDisabled={shouldLockDisableProps("instantMeetingSchedule").disabled}
+                                  isSearchable={false}
+                                  onChange={(selected) => {
+                                    if (selected) onChange(selected.value);
+                                  }}
+                                  className="mb-4 block w-full min-w-0 flex-1 rounded-sm text-sm"
+                                  value={optionValue}
+                                  components={{ Option, SingleValue }}
+                                  isMulti={false}
+                                />
+                              </>
+                            );
+                          }}
+                        />
                         <Controller
                           name="instantMeetingExpiryTimeOffsetInSeconds"
                           render={({ field: { value, onChange } }) => (

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -4,6 +4,7 @@ import { Prisma } from "@prisma/client";
 import type { LocationObject } from "@calcom/app-store/locations";
 import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
+import dayjs from "@calcom/dayjs";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { isRecurringEvent, parseRecurringEvent } from "@calcom/lib";
@@ -120,11 +121,84 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
       timeZone: true,
     },
   },
+  instantMeetingSchedule: {
+    select: {
+      id: true,
+      timeZone: true,
+    },
+  },
+
   hidden: true,
   assignAllTeamMembers: true,
   rescheduleWithSameRoundRobinHost: true,
 });
 
+export async function isCurrentlyAvailable({
+  prisma,
+  instantMeetingScheduleId,
+  availabilityTimezone,
+  length,
+}: {
+  prisma: PrismaClient;
+  instantMeetingScheduleId: number;
+  availabilityTimezone: string;
+  length: number;
+}): Promise<boolean> {
+  const now = dayjs().tz(availabilityTimezone);
+  const currentDay = now.day();
+  const meetingEndTime = now.add(length, "minute");
+
+  const res = await prisma.schedule.findUniqueOrThrow({
+    where: {
+      id: instantMeetingScheduleId,
+    },
+    select: {
+      availability: true,
+    },
+  });
+
+  const dateOverride = res.availability.find((a) => a.date && dayjs(a.date).isSame(now, "day"));
+
+  if (dateOverride) {
+    return !isAvailableInTimeSlot(dateOverride, now, meetingEndTime);
+  }
+
+  for (const availability of res.availability) {
+    if (!availability.date && availability.days.includes(currentDay)) {
+      const isAvailable = isAvailableInTimeSlot(availability, now, meetingEndTime);
+      if (isAvailable) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function isAvailableInTimeSlot(
+  availability: { startTime: Date; endTime: Date; days: number[] },
+  now: dayjs.Dayjs,
+  meetingEndTime: dayjs.Dayjs
+): boolean {
+  const startTime = dayjs(availability.startTime).utc().format("HH:mm");
+  const endTime = dayjs(availability.endTime).utc().format("HH:mm");
+
+  const periodStart = now
+    .startOf("day")
+    .hour(parseInt(startTime.split(":")[0]))
+    .minute(parseInt(startTime.split(":")[1]));
+  const periodEnd = now
+    .startOf("day")
+    .hour(parseInt(endTime.split(":")[0]))
+    .minute(parseInt(endTime.split(":")[1]));
+
+  const isWithinPeriod =
+    now.isBetween(periodStart, periodEnd, null, "[)") &&
+    meetingEndTime.isBetween(periodStart, periodEnd, null, "(]");
+
+  return isWithinPeriod;
+}
+
 // TODO: Convert it to accept a single parameter with structured data
 export const getPublicEvent = async (
   username: string,
@@ -216,6 +290,7 @@ export const getPublicEvent = async (
         logoUrl: null,
       },
       isInstantEvent: false,
+      showInstantEventConnectNowModal: false,
     };
   }
 
@@ -334,6 +409,20 @@ export const getPublicEvent = async (
       },
     });
   }
+
+  let showInstantEventConnectNowModal = eventWithUserProfiles.isInstantEvent;
+
+  if (eventWithUserProfiles.isInstantEvent && eventWithUserProfiles.instantMeetingSchedule?.id) {
+    const { id, timeZone } = eventWithUserProfiles.instantMeetingSchedule;
+
+    showInstantEventConnectNowModal = await isCurrentlyAvailable({
+      prisma,
+      instantMeetingScheduleId: id,
+      availabilityTimezone: timeZone ?? "Europe/London",
+      length: eventWithUserProfiles.length,
+    });
+  }
+
   return {
     ...eventWithUserProfiles,
     bookerLayouts: bookerLayoutsSchema.parse(eventMetaData?.bookerLayouts || null),
@@ -372,6 +461,7 @@ export const getPublicEvent = async (
 
     isDynamic: false,
     isInstantEvent: eventWithUserProfiles.isInstantEvent,
+    showInstantEventConnectNowModal,
     aiPhoneCallConfig: eventWithUserProfiles.aiPhoneCallConfig,
     assignAllTeamMembers: event.assignAllTeamMembers,
   };