#8701 CAL-1621 new booker dialog grow in height (#8774)

* increase scrollable height

* Fix react-select version - import esm error

* Increase booking form modal height

* Update packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

* Match design specs

* nit change

* Trying to fix type errors

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import type { UseMutationResult } from "@tanstack/react-query";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import type { FieldError } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type { TFunction } from "react-i18next";
@@ -61,6 +61,8 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
   const router = useRouter();
   const { t, i18n } = useLocale();
   const { timezone } = useTimePreferences();
+  const errorRef = useRef<HTMLDivElement>(null);
+
   const rescheduleUid = useBookerStore((state) => state.rescheduleUid);
   const rescheduleBooking = useBookerStore((state) => state.rescheduleBooking);
   const eventSlug = useBookerStore((state) => state.eventSlug);
@@ -185,6 +187,10 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
         })
       );
     },
+    onError: () => {
+
+      errorRef && errorRef.current?.scrollIntoView({ behavior: "smooth" });
+    },
   });
 
   const createRecurringBookingMutation = useMutation(createRecurringBooking, {
@@ -282,7 +288,24 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
           locations={eventType.locations}
           rescheduleUid={rescheduleUid || undefined}
         />
-
+        {(createBookingMutation.isError ||
+          createRecurringBookingMutation.isError ||
+          bookingForm.formState.errors["globalError"]) && (
+          <div data-testid="booking-fail">
+            <Alert
+              ref={errorRef}
+              className="mt-2"
+              severity="info"
+              title={rescheduleUid ? t("reschedule_fail") : t("booking_fail")}
+              message={getError(
+                bookingForm.formState.errors["globalError"],
+                createBookingMutation,
+                createRecurringBookingMutation,
+                t
+              )}
+            />
+          </div>
+        )}
         <div className="modalsticky mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
           {!!onCancel && (
             <Button color="minimal" type="button" onClick={onCancel}>
@@ -298,23 +321,6 @@ export const BookEventForm = ({ onCancel }: BookEventFormProps) => {
           </Button>
         </div>
       </Form>
-      {(createBookingMutation.isError ||
-        createRecurringBookingMutation.isError ||
-        bookingForm.formState.errors["globalError"]) && (
-        <div data-testid="booking-fail">
-          <Alert
-            className="mt-2"
-            severity="info"
-            title={rescheduleUid ? t("reschedule_fail") : t("booking_fail")}
-            message={getError(
-              bookingForm.formState.errors["globalError"],
-              createBookingMutation,
-              createRecurringBookingMutation,
-              t
-            )}
-          />
-        </div>
-      )}
     </div>
   );
 };

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

@@ -20,9 +20,9 @@ export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCan
       <DialogContent
         type={undefined}
         enableOverflow
-        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[45vh] pt-4 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
-        <h1 className="font-cal text-emphasis text-lg leading-5">{t("confirm_your_details")} </h1>
-        <div className="mt-6 flex space-x-2 rounded-md leading-none">
+        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
+        <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
+        <div className="mt-4 flex space-x-2 rounded-md leading-none">
           <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
             <span>{parsedSelectedTimeslot.format("LLL")}</span>
           </Badge>

packages/features/package.json

@@ -14,6 +14,7 @@
     "dompurify": "^2.4.1",
     "framer-motion": "^10.12.8",
     "lexical": "^0.5.0",
+    "react-select": "^5.7.0",
     "react-sticky-box": "^2.0.4",
     "zustand": "^4.3.2"
   },

packages/features/shell/Shell.tsx

@@ -307,11 +307,11 @@ function UserDropdown({ small }: { small?: boolean }) {
             </span>
             {!small && (
               <span className="flex flex-grow items-center truncate">
-                <span className="flex-grow truncate text-sm">
-                  <span className="text-emphasis mb-1 block truncate pb-1 font-medium leading-none">
+                <span className="flex-grow truncate text-sm leading-none">
+                  <span className="text-emphasis mb-1 block truncate font-medium leading-none">
                     {user.name || "Nameless User"}
                   </span>
-                  <span className="text-default truncate pb-1 font-normal leading-none">
+                  <span className="text-default truncate font-normal leading-none">
                     {user.username
                       ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
                         ? `cal.com/${user.username}`

packages/ui/components/alert/Alert.tsx

@@ -1,6 +1,7 @@
 import { CheckCircleIcon, ExclamationIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import type { ReactNode } from "react";
+import { forwardRef } from "react";
 
 import { Info } from "../icon";
 
@@ -15,11 +16,12 @@ export interface AlertProps {
   // @TODO: Success and info shouldn't exist as per design?
   severity: "success" | "warning" | "error" | "info" | "neutral";
 }
-export function Alert(props: AlertProps) {
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
   const { severity, iconClassName } = props;
 
   return (
     <div
+      ref={ref}
       className={classNames(
         "rounded-md border border-opacity-20 p-3",
         props.className,
@@ -62,4 +64,6 @@ export function Alert(props: AlertProps) {
       </div>
     </div>
   );
-}
+});
+
+Alert.displayName = "Alert";