diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx index 6fce4901f4..4f28b425d1 100644 --- a/apps/web/pages/settings/my-account/appearance.tsx +++ b/apps/web/pages/settings/my-account/appearance.tsx @@ -7,7 +7,6 @@ import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { - Badge, Button, ColorPicker, Form, @@ -17,6 +16,7 @@ import { SkeletonContainer, SkeletonText, Switch, + UpgradeTeamsBadge, } from "@calcom/ui"; import { ssrInit } from "@server/lib/ssr"; @@ -49,6 +49,7 @@ const AppearanceView = () => { const session = useSession(); const utils = trpc.useContext(); const { data: user, isLoading } = trpc.viewer.me.useQuery(); + const { data: dataHasTeamPlan, isLoading: isLoadingHasTeamPlan } = trpc.viewer.teams.hasTeamPlan.useQuery(); const formMethods = useForm({ defaultValues: { @@ -73,7 +74,8 @@ const AppearanceView = () => { }, }); - if (isLoading) return ; + if (isLoading || isLoadingHasTeamPlan) + return ; if (!user) return null; @@ -180,18 +182,18 @@ const AppearanceView = () => {

{t("disable_cal_branding", { appName: APP_NAME })}

- {t("pro")} + {!dataHasTeamPlan?.hasTeamPlan && }

{t("removes_cal_branding", { appName: APP_NAME })}

formMethods.setValue("hideBranding", checked, { shouldDirty: true }) } - checked={!session.data?.user.belongsToActiveTeam ? false : value} + checked={!dataHasTeamPlan?.hasTeamPlan ? false : value} />
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index b4ed9b7afd..79d73b69f4 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -1509,5 +1509,6 @@ "using_meet_requires_calendar": "Using Google Meet requires a connected Google Calendar", "continue_to_install_google_calendar": "Continue to install Google Calendar", "install_google_meet": "Install Google Meet", - "install_google_calendar": "Install Google Calendar" + "install_google_calendar": "Install Google Calendar", + "no_recordings_found": "No recordings found" } diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx index 24e136ef59..c7d5df8b41 100644 --- a/packages/features/ee/video/ViewRecordingsDialog.tsx +++ b/packages/features/ee/video/ViewRecordingsDialog.tsx @@ -7,7 +7,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RecordingItemSchema } from "@calcom/prisma/zod-utils"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import type { PartialReference } from "@calcom/types/EventManager"; -import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + UpgradeTeamsBadge, +} from "@calcom/ui"; import { Button, showToast, Icon } from "@calcom/ui"; import RecordingListSkeleton from "./components/RecordingListSkeleton"; @@ -58,9 +65,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => { const { t, i18n } = useLocale(); const { isOpenDialog, setIsOpenDialog, booking, timeFormat } = props; const [downloadingRecordingId, setRecordingId] = useState(null); - const session = useSession(); - const belongsToActiveTeam = session?.data?.user?.belongsToActiveTeam ?? false; - const [showUpgradeBanner, setShowUpgradeBanner] = useState(false); + const { data: dataHasTeamPlan, isLoading: isLoadingHasTeamPlan } = trpc.viewer.teams.hasTeamPlan.useQuery(); const roomName = booking?.references?.find((reference: PartialReference) => reference.type === "daily_video")?.meetingId ?? undefined; @@ -103,57 +108,48 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => { - {showUpgradeBanner && } - {!showUpgradeBanner && ( - <> - {isLoading && } - {recordings && "data" in recordings && recordings?.data?.length > 0 && ( -
- {recordings.data.map((recording: RecordingItemSchema, index: number) => { - return ( -
-
-

- {t("recording")} {index + 1} -

-

- {convertSecondsToMs(recording.duration)} -

-
- {belongsToActiveTeam ? ( - - ) : ( - - )} + <> + {isLoading && isLoadingHasTeamPlan && } + {recordings && "data" in recordings && recordings?.data?.length > 0 && ( +
+ {recordings.data.map((recording: RecordingItemSchema, index: number) => { + return ( +
+
+

+ {t("recording")} {index + 1} +

+

+ {convertSecondsToMs(recording.duration)} +

- ); - })} -
+ {dataHasTeamPlan?.hasTeamPlan ? ( + + ) : ( + + )} +
+ ); + })} +
+ )} + {!isLoading && + (!recordings || + (recordings && "total_count" in recordings && recordings?.total_count === 0)) && ( +

{t("no_recordings_found")}

)} - {!isLoading && - (!recordings || - (recordings && "total_count" in recordings && recordings?.total_count === 0)) && ( -

No Recordings Found

- )} - - )} + - setShowUpgradeBanner(false)} className="border" /> + diff --git a/packages/ui/components/badge/UpgradeTeamsBadge.tsx b/packages/ui/components/badge/UpgradeTeamsBadge.tsx new file mode 100644 index 0000000000..253befb400 --- /dev/null +++ b/packages/ui/components/badge/UpgradeTeamsBadge.tsx @@ -0,0 +1,18 @@ +import Link from "next/link"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; + +import { Tooltip } from "../tooltip"; +import { Badge } from "./Badge"; + +export const UpgradeTeamsBadge = function UpgradeTeamsBadge() { + const { t } = useLocale(); + + return ( + + + {t("upgrade")} + + + ); +}; diff --git a/packages/ui/components/badge/index.ts b/packages/ui/components/badge/index.ts index d172dc35c8..bd0decbf3d 100644 --- a/packages/ui/components/badge/index.ts +++ b/packages/ui/components/badge/index.ts @@ -1,2 +1,4 @@ export { Badge } from "./Badge"; +export { UpgradeTeamsBadge } from "./UpgradeTeamsBadge"; + export type { BadgeProps } from "./Badge"; diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx index cff98754ae..a770fbb9b4 100644 --- a/packages/ui/components/form/select/components.tsx +++ b/packages/ui/components/form/select/components.tsx @@ -1,4 +1,3 @@ -import { useRouter } from "next/router"; import { components as reactSelectComponents, ControlProps, @@ -13,11 +12,9 @@ import { } from "react-select"; import { classNames } from "@calcom/lib"; -import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Icon } from "../../../components/icon"; -import { Badge } from "../../badge"; -import { Tooltip } from "../../tooltip"; +import { UpgradeTeamsBadge } from "../../badge"; export const InputComponent = < Option, @@ -53,9 +50,6 @@ export const OptionComponent = < className, ...props }: OptionProps) => { - const { t } = useLocale(); - const router = useRouter(); - return ( <> {props.label} - {(props.data as unknown as ExtendedOption).needsUpgrade && ( - - - - )} + {(props.data as unknown as ExtendedOption).needsUpgrade && } {props.isSelected && } diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index 3ffa299366..aef616439a 100644 --- a/packages/ui/components/index.ts +++ b/packages/ui/components/index.ts @@ -1,6 +1,6 @@ export { Avatar, AvatarGroup } from "./avatar"; export type { AvatarProps, AvatarGroupProps } from "./avatar"; -export { Badge } from "./badge"; +export { Badge, UpgradeTeamsBadge } from "./badge"; export type { BadgeProps } from "./badge"; export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./breadcrumb"; export { Button, LinkIconButton } from "./button"; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 0f219eabcc..e0676f86b1 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -2,6 +2,7 @@ export { Avatar, AvatarGroup, Badge, + UpgradeTeamsBadge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem,