Type fixes for API

apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts

@@ -1,15 +0,0 @@
-declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
-  import { CalendarProps } from "react-calendar";
-  export type DateRangePickerCalendarProps = Omit<
-    CalendarProps,
-    "calendarClassName" | "onChange" | "value"
-  > & {
-    calendarClassName?: string;
-    onChange: (value: [Date, Date]) => void;
-    value: [Date, Date];
-    clearIcon: JSX.Element | null;
-    calendarIcon: JSX.Element | null;
-    rangeDivider: JSX.Element | null;
-  };
-  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
-}

apps/web/components/ui/form/DateRangePicker.tsx

@@ -1,28 +0,0 @@
-// @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
-import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
-import React from "react";
-import "react-calendar/dist/Calendar.css";
-
-import { Icon } from "@calcom/ui";
-
-type Props = {
-  startDate: Date;
-  endDate: Date;
-  onDatesChange?: ((arg: { startDate: Date; endDate: Date }) => void) | undefined;
-};
-
-export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
-  return (
-    <PrimitiveDateRangePicker
-      className="rounded-sm border-gray-300 text-sm"
-      clearIcon={null}
-      calendarIcon={<Icon.FiCalendar className="h-5 w-5 text-gray-500" />}
-      rangeDivider={<Icon.FiArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
-      value={[startDate, endDate]}
-      onChange={([startDate, endDate]) => {
-        if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
-      }}
-    />
-  );
-};

apps/web/package.json

@@ -62,7 +62,6 @@
     "@tanstack/react-query": "^4.3.9",
     "@vercel/edge-functions-ui": "^0.2.1",
     "@vercel/og": "^0.0.19",
-    "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "bcryptjs": "^2.4.3",

apps/web/pages/api/book/event.ts

@@ -6,8 +6,8 @@ import { defaultResponder } from "@calcom/lib/server";
 
 async function handler(req: NextApiRequest & { userId?: number }) {
   const session = await getSession({ req });
-  /* To mimic API behavior */
-  req.userId = session?.user?.id;
+  /* To mimic API behavior and comply with types */
+  req.userId = session?.user?.id || -1;
   const booking = await handleNewBooking(req);
   return booking;
 }

apps/web/pages/api/cancel.ts

@@ -6,8 +6,8 @@ import { defaultResponder, defaultHandler } from "@calcom/lib/server";
 
 async function handler(req: NextApiRequest & { userId?: number }) {
   const session = await getSession({ req });
-  /* To mimic API behavior */
-  req.userId = session?.user?.id;
+  /* To mimic API behavior and comply with types */
+  req.userId = session?.user?.id || -1;
   return await handleCancelBooking(req);
 }
 

packages/types/next.d.ts

@@ -1,6 +1,8 @@
 import type { IncomingMessage } from "http";
 import type { Session } from "next-auth";
 
+import type { PrismaClient } from "@calcom/prisma/client";
+
 import "./next-auth";
 
 export declare module "next" {
@@ -8,5 +10,15 @@ export declare module "next" {
     // args is defined by /integrations/[...args] endpoint
     query: Partial<{ [key: string]: string | string[] }> & { args: string[] };
     session?: Session | null;
+    // ⬇ These are needed by @calcom/api
+    body: unkown;
+    userId: number;
+    method: string;
+    prisma: PrismaClient;
+    // session: { user: { id: number } };
+    // query: Partial<{ [key: string]: string | string[] }>;
+    isAdmin: boolean;
+    isCustomPrisma: boolean;
+    pagination: { take: number; skip: number };
   }
 }

packages/ui/index.tsx

@@ -86,7 +86,7 @@ export {
 } from "./v2/core/Dropdown";
 export { RadioGroup } from "./v2/core/form";
 export { BooleanToggleGroupField } from "./v2/core/form/BooleanToggleGroup";
-export { default as DateRangePicker } from "./v2/core/form/date-range-picker/DateRangePicker";
+export { DateRangePickerLazy as DateRangePicker } from "./v2/core/form/date-range-picker";
 export { default as DatePickerField } from "./v2/core/form/DatePicker";
 export { default as FormCard } from "./v2/core/form/FormCard";
 export { default as MultiSelectCheckboxes } from "./v2/core/form/MultiSelectCheckboxes";

packages/ui/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-portal": "^1.0.0",
     "@radix-ui/react-select": "^0.1.1",
     "@tanstack/react-query": "^4.3.9",
+    "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.3.0",
     "downshift": "^6.1.9",
     "next": "^12.3.1",

packages/ui/v2/core/form/date-range-picker/index.ts

@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic";
+
+export const DateRangePickerLazy = dynamic(
+  () => import("./DateRangePicker")
+) as unknown as typeof import("./DateRangePicker").default;