diff --git a/apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts b/apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts deleted file mode 100644 index 8383940892..0000000000 --- a/apps/web/@types/@wojtekmaj__react-daterange-picker.d.ts +++ /dev/null @@ -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; -} diff --git a/apps/web/components/ui/form/DateRangePicker.tsx b/apps/web/components/ui/form/DateRangePicker.tsx deleted file mode 100644 index fa36cba002..0000000000 --- a/apps/web/components/ui/form/DateRangePicker.tsx +++ /dev/null @@ -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 ( - } - rangeDivider={} - value={[startDate, endDate]} - onChange={([startDate, endDate]) => { - if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate }); - }} - /> - ); -}; diff --git a/apps/web/package.json b/apps/web/package.json index fc7d70d14f..94f689a211 100644 --- a/apps/web/package.json +++ b/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", diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts index 93fc963904..c3bfa9812c 100644 --- a/apps/web/pages/api/book/event.ts +++ b/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; } diff --git a/apps/web/pages/api/cancel.ts b/apps/web/pages/api/cancel.ts index 15b47c7112..8fd2631758 100644 --- a/apps/web/pages/api/cancel.ts +++ b/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); } diff --git a/packages/types/next.d.ts b/packages/types/next.d.ts index 865eacefbf..81d073bf5a 100644 --- a/packages/types/next.d.ts +++ b/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 }; } } diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index ee7b108100..76eee0b507 100644 --- a/packages/ui/index.tsx +++ b/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"; diff --git a/packages/ui/package.json b/packages/ui/package.json index 3ccafa4fa2..a5c1632915 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/v2/core/form/date-range-picker/index.ts b/packages/ui/v2/core/form/date-range-picker/index.ts new file mode 100644 index 0000000000..3099d9937a --- /dev/null +++ b/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;