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>
This commit is contained in:
Udit Takkar 2023-05-26 18:44:07 +05:30 committed by GitHub
parent 711959048b
commit efdca50ddc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 41 deletions

View File

@ -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>
);

View File

@ -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>
);
}