From e3e464abfaa98bb854008be29439139987b14589 Mon Sep 17 00:00:00 2001
From: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
Date: Tue, 16 Apr 2024 21:37:24 +0300
Subject: [PATCH] fix: booker atoms using next/router (#14612)

* fix: booker OOO using next/router

* fixup! fix: booker OOO using next/router
---
 .../organizations/platform/oauth-clients/create.tsx         | 6 +++---
 packages/features/bookings/components/AvailableTimes.tsx    | 3 +++
 packages/platform/atoms/package.json                        | 2 +-
 packages/platform/examples/base/src/pages/[bookingUid].tsx  | 3 ++-
 packages/platform/examples/base/src/pages/booking.tsx       | 3 ++-
 packages/platform/examples/base/src/pages/bookings.tsx      | 3 ++-
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/web/pages/settings/organizations/platform/oauth-clients/create.tsx b/apps/web/pages/settings/organizations/platform/oauth-clients/create.tsx
index 842c72b60c..3d26f40440 100644
--- a/apps/web/pages/settings/organizations/platform/oauth-clients/create.tsx
+++ b/apps/web/pages/settings/organizations/platform/oauth-clients/create.tsx
@@ -1,14 +1,14 @@
-import { useRouter } from "next/router";
 import React from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
 import PageWrapper from "@components/PageWrapper";
 import { OAuthClientForm } from "@components/settings/organizations/platform/oauth-clients/OAuthClientForm";
 
 export const CreateOAuthClient = () => {
-  const router = useRouter();
-  const clientId = router.query.clientId as string | undefined;
+  const searchParams = useCompatSearchParams();
+  const clientId = searchParams?.get("clientId") || "";
   return (
     <div>
       <OAuthClientForm clientId={clientId} />
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index fe636b3ece..5d29fa8e60 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -3,6 +3,7 @@ import * as HoverCard from "@radix-ui/react-hover-card";
 import { AnimatePresence, m } from "framer-motion";
 import { useCallback, useState } from "react";
 
+import { useIsPlatform } from "@calcom/atoms/monorepo";
 import type { IOutOfOfficeData } from "@calcom/core/getUserAvailability";
 import dayjs from "@calcom/dayjs";
 import { OutOfOfficeInSlots } from "@calcom/features/bookings/Booker/components/OutOfOfficeInSlots";
@@ -255,8 +256,10 @@ interface IOOOSlotProps {
 }
 
 const OOOSlot: React.FC<IOOOSlotProps> = (props) => {
+  const isPlatform = useIsPlatform();
   const { fromUser, toUser, reason, emoji, time, className = "" } = props;
 
+  if (isPlatform) return <></>;
   return (
     <OutOfOfficeInSlots
       fromUser={fromUser}
diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json
index 82ecde5d15..5ccfb7acc0 100644
--- a/packages/platform/atoms/package.json
+++ b/packages/platform/atoms/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "description": "Customizable UI components to integrate scheduling into your product.",
   "authors": "Cal.com, Inc.",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "scripts": {
     "dev": "yarn vite build --watch & npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify --watch",
     "build": "yarn vite build && npx tailwindcss -i ./globals.css -o ./globals.min.css --postcss --minify",
diff --git a/packages/platform/examples/base/src/pages/[bookingUid].tsx b/packages/platform/examples/base/src/pages/[bookingUid].tsx
index 3c85817162..09b87a55d6 100644
--- a/packages/platform/examples/base/src/pages/[bookingUid].tsx
+++ b/packages/platform/examples/base/src/pages/[bookingUid].tsx
@@ -2,7 +2,8 @@ import { Navbar } from "@/components/Navbar";
 import { CheckCircle2Icon } from "lucide-react";
 import { X } from "lucide-react";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/navigation";
+// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
+import { useRouter } from "next/router";
 
 import { useGetBooking, useCancelBooking } from "@calcom/atoms";
 import dayjs from "@calcom/dayjs";
diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx
index e796616841..aa6028dfc6 100644
--- a/packages/platform/examples/base/src/pages/booking.tsx
+++ b/packages/platform/examples/base/src/pages/booking.tsx
@@ -1,6 +1,7 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/navigation";
+// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
+import { useRouter } from "next/router";
 import { useState } from "react";
 
 import { Booker, useEventTypesPublic } from "@calcom/atoms";
diff --git a/packages/platform/examples/base/src/pages/bookings.tsx b/packages/platform/examples/base/src/pages/bookings.tsx
index ee4e0aed19..65b4b49da7 100644
--- a/packages/platform/examples/base/src/pages/bookings.tsx
+++ b/packages/platform/examples/base/src/pages/bookings.tsx
@@ -1,6 +1,7 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-import { useRouter } from "next/navigation";
+// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
+import { useRouter } from "next/router";
 
 import { useGetBookings } from "@calcom/atoms";
 import dayjs from "@calcom/dayjs";