From efdca50ddc9bd5dd4a87e664ccf384ece822ee97 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Fri, 26 May 2023 18:44:07 +0530
Subject: [PATCH] fix: upgrade btn bug (#9104)

* fix: upgrade btn bug

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: use border-subtle

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../ee/video/ViewRecordingsDialog.tsx         | 20 ++++++------
 .../components/UpgradeRecordingBanner.tsx     | 31 -------------------
 2 files changed, 10 insertions(+), 41 deletions(-)
 delete mode 100644 packages/features/ee/video/components/UpgradeRecordingBanner.tsx

diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index 15f14556f1..74563b35fd 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from "next/navigation";
 import { useState, Suspense } from "react";
 
 import dayjs from "@calcom/dayjs";
@@ -8,14 +9,7 @@ import type { RecordingItemSchema } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { PartialReference } from "@calcom/types/EventManager";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  UpgradeTeamsBadge,
-} from "@calcom/ui";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
 import { Button } from "@calcom/ui";
 import { Download } from "@calcom/ui/components/icon";
 
@@ -101,6 +95,7 @@ const useRecordingDownload = () => {
 const ViewRecordingsList = ({ roomName, hasTeamPlan }: { roomName: string; hasTeamPlan: boolean }) => {
   const { t } = useLocale();
   const { setRecordingId, isFetching, recordingId } = useRecordingDownload();
+  const router = useRouter();
 
   const { data: recordings } = trpc.viewer.getCalVideoRecordings.useQuery(
     { roomName },
@@ -121,7 +116,7 @@ const ViewRecordingsList = ({ roomName, hasTeamPlan }: { roomName: string; hasTe
           {recordings.data.map((recording: RecordingItemSchema, index: number) => {
             return (
               <div
-                className="flex w-full items-center justify-between rounded-md border px-4 py-2"
+                className="border-subtle flex w-full items-center justify-between rounded-md border px-4 py-2"
                 key={recording.id}>
                 <div className="flex flex-col">
                   <h1 className="text-sm font-semibold">
@@ -138,7 +133,12 @@ const ViewRecordingsList = ({ roomName, hasTeamPlan }: { roomName: string; hasTe
                     {t("download")}
                   </Button>
                 ) : (
-                  <UpgradeTeamsBadge />
+                  <Button
+                    tooltip={t("upgrade_to_access_recordings_description")}
+                    className="ml-4 lg:ml-0"
+                    onClick={() => router.push("/teams")}>
+                    {t("upgrade")}
+                  </Button>
                 )}
               </div>
             );
diff --git a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
deleted file mode 100644
index 83ac8d5100..0000000000
--- a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useRouter } from "next/router";
-
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
-import { Users } from "@calcom/ui/components/icon";
-
-export default function UpgradeRecordingBanner() {
-  const { t } = useLocale();
-  const router = useRouter();
-
-  return (
-    <div className="bg-subtle flex items-start gap-2 rounded-md p-4">
-      <Users className="dark:bg-gray-90 inline-block h-5 w-5" />
-      <div className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-sm font-semibold">{t("upgrade_to_access_recordings_title")}</h2>
-          <p className="text-sm font-normal">{t("upgrade_to_access_recordings_description")}</p>
-        </div>
-        <div>
-          <Button
-            onClick={() => {
-              router.push(`${WEBAPP_URL}/teams`);
-            }}>
-            {t("upgrade_now")}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}