Bugfix/i3531 round robin assigns to unavailable members (#3813)

* wip commit

* Finished new algorithm for fetching the least recently booked user

* ROUND_ROBIN fix

* Removed redundant import

* Prisma dependency turned getLuckyUser into a server-only function

* DRY avatars

* Properly passThrough

* name can be undefined.

* Remove debug artefact

Author: emrysal

apps/web/components/booking/AvailableTimes.tsx

@@ -1,4 +1,3 @@
-import { SchedulingType } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FC, useEffect, useState } from "react";
@@ -18,10 +17,6 @@ type AvailableTimesProps = {
   recurringCount: number | undefined;
   eventTypeSlug: string;
   date: Dayjs;
-  users: {
-    username: string | null;
-  }[];
-  schedulingType: SchedulingType | null;
   seatsPerTimeSlot?: number | null;
   slots?: Slot[];
   isLoading: boolean;
@@ -35,7 +30,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   eventTypeSlug,
   recurringCount,
   timeFormat,
-  schedulingType,
   seatsPerTimeSlot,
 }) => {
   const { t, i18n } = useLocale();
@@ -82,10 +76,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               bookingUrl.query.rescheduleUid = rescheduleUid as string;
             }
 
-            if (schedulingType === SchedulingType.ROUND_ROBIN) {
-              bookingUrl.query.user = slot.users;
-            }
-
             // If event already has an attendee add booking id
             if (slot.bookingUid) {
               bookingUrl.query.bookingUid = slot.bookingUid;

apps/web/components/booking/UserAvatars.tsx

@@ -0,0 +1,34 @@
+import { CAL_URL } from "@calcom/lib/constants";
+
+import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup";
+
+export const UserAvatars = ({
+  profile,
+  users,
+  ...props
+}: {
+  profile: { image: string | null; name?: string | null };
+  showMembers: boolean;
+  users: { username: string | null; name?: string | null }[];
+} & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
+  const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
+  return (
+    <AvatarGroup
+      border="border-2 dark:border-gray-800 border-white"
+      items={
+        [
+          { image: profile.image, alt: profile.name, title: profile.name },
+          ...(showMembers
+            ? users.map((user) => ({
+                title: user.name,
+                image: `${CAL_URL}/${user.username}/avatar.png`,
+                alt: user.name || undefined,
+              }))
+            : []),
+        ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+      }
+      size={props.size}
+      truncateAfter={props.truncateAfter}
+    />
+  );
+};

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,5 +1,6 @@
 // Get router variables
 import { EventType } from "@prisma/client";
+import { SchedulingType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
@@ -18,7 +19,7 @@ import {
 import { useContracts } from "@calcom/features/ee/web3/contexts/contractsContext";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
-import { CAL_URL, WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import notEmpty from "@calcom/lib/notEmpty";
@@ -37,9 +38,9 @@ import { isBrandingHidden } from "@lib/isBrandingHidden";
 
 import AvailableTimes from "@components/booking/AvailableTimes";
 import TimeOptions from "@components/booking/TimeOptions";
+import { UserAvatars } from "@components/booking/UserAvatars";
 import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 import { HeadSeo } from "@components/seo/head-seo";
-import AvatarGroup from "@components/ui/AvatarGroup";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
@@ -235,8 +236,6 @@ const SlotPicker = ({
           eventTypeSlug={eventType.slug}
           seatsPerTimeSlot={seatsPerTimeSlot}
           recurringCount={recurringEventCount}
-          schedulingType={eventType.schedulingType}
-          users={[]}
         />
       )}
     </>
@@ -425,20 +424,10 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
             {/* mobile: details */}
             <div className="block px-4 pt-4 sm:p-8 md:hidden">
               <div>
-                <AvatarGroup
-                  border="border-2 dark:border-gray-800 border-white"
-                  items={
-                    [
-                      { image: profile.image, alt: profile.name, title: profile.name },
-                      ...eventType.users
-                        .filter((user) => user.name !== profile.name)
-                        .map((user) => ({
-                          title: user.name,
-                          image: `${CAL_URL}/${user.username}/avatar.png`,
-                          alt: user.name || undefined,
-                        })),
-                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                  }
+                <UserAvatars
+                  profile={profile}
+                  users={eventType.users}
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
                   size={9}
                   truncateAfter={5}
                 />
@@ -566,20 +555,10 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   "hidden overflow-hidden border-gray-200 p-5 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
                   (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                 }>
-                <AvatarGroup
-                  border="border-2 dark:border-gray-800 border-white"
-                  items={
-                    [
-                      { image: profile.image, alt: profile.name, title: profile.name },
-                      ...eventType.users
-                        .filter((user) => user.name !== profile.name)
-                        .map((user) => ({
-                          title: user.name,
-                          alt: user.name,
-                          image: `${CAL_URL}/${user.username}/avatar.png`,
-                        })),
-                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                  }
+                <UserAvatars
+                  profile={profile}
+                  users={eventType.users}
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
                   size={10}
                   truncateAfter={3}
                 />

apps/web/components/booking/pages/BookingPage.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
+import { SchedulingType } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
@@ -42,7 +43,7 @@ import createRecurringBooking from "@lib/mutations/bookings/create-recurring-boo
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 
-import AvatarGroup from "@components/ui/AvatarGroup";
+import { UserAvatars } from "@components/booking/UserAvatars";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
@@ -499,20 +500,11 @@ const BookingPage = ({
           )}>
           <div className="sm:flex">
             <div className="px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6 sm:dark:border-gray-700">
-              <AvatarGroup
-                border="border-2 border-white dark:border-gray-800"
+              <UserAvatars
+                profile={profile}
+                users={eventType.users}
+                showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
                 size={14}
-                items={[
-                  { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
-                ].concat(
-                  eventType.users
-                    .filter((user) => user.name !== profile.name)
-                    .map((user) => ({
-                      title: user.name || "",
-                      image: user.avatar || "",
-                      alt: user.name || "",
-                    }))
-                )}
               />
               <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
                 {profile.name}

apps/web/package.json

@@ -151,6 +151,7 @@
     "env-cmd": "10.1.0",
     "eslint": "^8.16.0",
     "jest": "^26.0.0",
+    "jest-mock-extended": "^2.0.7",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.2",
     "postcss": "^8.4.13",

apps/web/pages/[user]/book.tsx

@@ -142,6 +142,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       ...e,
       periodStartDate: e.periodStartDate?.toString() ?? null,
       periodEndDate: e.periodEndDate?.toString() ?? null,
+      schedulingType: null,
       users: users.map((u) => ({
         id: u.id,
         name: u.name,