readding sidebar tips for everyone, added 3 more features to teams empty screen (#6475)
* readding sidebar tips for everyone * added 3 more features to teams plan * responsive fixes * responsive fixes * small responsive fix * CTA alignment fixed * Minor alignment fixes to Shell for event-types/[type] Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
parent
636e88d467
commit
e05bcf98c2
|
@ -11,15 +11,9 @@ type LicenseRequiredProps = {
|
|||
className?: string;
|
||||
role?: AriaRole | undefined;
|
||||
children: React.ReactNode;
|
||||
toHide?: boolean; // if true, the component will be hidden instead of showing the empty screen
|
||||
};
|
||||
|
||||
/**
|
||||
* This component will only render it's children if the installation has a valid
|
||||
* license.
|
||||
* @param toHide - will hide the component with a license instead of showing the empty screen
|
||||
*/
|
||||
const LicenseRequired = ({ children, as = "", toHide = false, ...rest }: LicenseRequiredProps) => {
|
||||
const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) => {
|
||||
const session = useSession();
|
||||
const { t } = useLocale();
|
||||
const Component = as || Fragment;
|
||||
|
@ -28,8 +22,6 @@ const LicenseRequired = ({ children, as = "", toHide = false, ...rest }: License
|
|||
return (
|
||||
<Component {...rest}>
|
||||
{hasValidLicense === null || hasValidLicense ? (
|
||||
!toHide && children
|
||||
) : toHide ? (
|
||||
children
|
||||
) : (
|
||||
<EmptyScreen
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import { useState } from "react";
|
||||
|
||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { APP_NAME } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import isCalcom from "@calcom/lib/isCalcom";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
|
||||
import { Alert, Button, ButtonGroup, EmptyScreen, Icon } from "@calcom/ui";
|
||||
|
||||
import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
|
||||
import TeamList from "./TeamList";
|
||||
|
@ -38,6 +39,21 @@ export function TeamsListing() {
|
|||
title: t("fixed_round_robin"),
|
||||
description: t("add_one_fixed_attendee"),
|
||||
},
|
||||
{
|
||||
icon: <Icon.FiMail className="h-5 w-5 text-gray-700" />,
|
||||
title: t("sms_attendee_action"),
|
||||
description: t("make_it_easy_to_book"),
|
||||
},
|
||||
{
|
||||
icon: <Icon.FiVideo className="h-5 w-5 text-gray-700" />,
|
||||
title: "Cal Video" + " " + t("recordings_title"),
|
||||
description: t("upgrade_to_access_recordings_description"),
|
||||
},
|
||||
{
|
||||
icon: <Icon.FiEyeOff className="h-5 w-5 text-gray-700" />,
|
||||
title: t("disable_cal_branding", { appName: APP_NAME }),
|
||||
description: t("disable_cal_branding_description", { appName: APP_NAME }),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
@ -52,8 +68,8 @@ export function TeamsListing() {
|
|||
{isLoading && <SkeletonLoaderTeamList />}
|
||||
{!teams.length && !isLoading && (
|
||||
<>
|
||||
{isCalcom ? (
|
||||
<div className="max-w-[1118px]">
|
||||
{!isCalcom ? (
|
||||
<div className="-mt-6 rtl:ml-4 md:rtl:ml-0">
|
||||
<div
|
||||
className="flex w-full justify-between overflow-hidden rounded-lg pt-4 pb-10 md:min-h-[295px] md:pt-10"
|
||||
style={{
|
||||
|
@ -61,22 +77,26 @@ export function TeamsListing() {
|
|||
backgroundSize: "cover",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<div className="mt-3 px-14">
|
||||
<div className="mt-3 px-8 sm:px-14">
|
||||
<h1 className="font-cal text-3xl">{t("calcom_is_better_with_team")}</h1>
|
||||
<p className="my-4 max-w-sm text-gray-600">{t("add_your_team_members")}</p>
|
||||
<div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
|
||||
<ButtonGroup>
|
||||
<Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
|
||||
{t("create_team")}
|
||||
</Button>
|
||||
<Button href="https://go.cal.com/teams-video" target="_blank" color="secondary">
|
||||
<Button color="secondary" href="https://go.cal.com/teams-video" target="_blank">
|
||||
{t("learn_more")}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 grid-cols-3 md:grid md:gap-6">
|
||||
<div className="mt-4 grid-cols-3 md:grid md:gap-4">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.title} className="mb-6 min-h-[180px] w-full rounded-md bg-gray-50 p-8">
|
||||
<div
|
||||
key={feature.title}
|
||||
className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
|
||||
{feature.icon}
|
||||
<h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
|
||||
<p className="text-gray-700">{feature.description}</p>
|
||||
|
|
|
@ -731,9 +731,7 @@ function SideBar() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<LicenseRequired toHide>
|
||||
<Tips />
|
||||
</LicenseRequired>
|
||||
<div data-testid="user-dropdown-trigger">
|
||||
<span className="hidden lg:inline">
|
||||
<UserDropdown />
|
||||
|
@ -754,7 +752,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
const { isLocaleReady } = useLocale();
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-baseline sm:mt-0">
|
||||
<div className="mb-6 flex sm:mt-0 lg:mb-10">
|
||||
{!!props.backPath && (
|
||||
<Button
|
||||
size="icon"
|
||||
|
@ -768,11 +766,11 @@ export function ShellMain(props: LayoutProps) {
|
|||
/>
|
||||
)}
|
||||
{props.heading && (
|
||||
<header className={classNames(props.large && "py-8", " flex w-full max-w-full items-center")}>
|
||||
<header className={classNames(props.large && "py-8", "flex w-full max-w-full")}>
|
||||
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
|
||||
<div className={classNames("w-full ltr:mr-4 rtl:ml-4 sm:block", props.headerClassName)}>
|
||||
{props.heading && (
|
||||
<h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mb-1 hidden truncate text-2xl font-semibold tracking-wide text-black sm:block xl:max-w-full">
|
||||
<h1 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 mt-1 hidden truncate text-2xl font-semibold tracking-wide text-black sm:block xl:max-w-full">
|
||||
{!isLocaleReady ? <SkeletonText invisible /> : props.heading}
|
||||
</h1>
|
||||
)}
|
||||
|
@ -785,7 +783,9 @@ export function ShellMain(props: LayoutProps) {
|
|||
{props.CTA && (
|
||||
<div
|
||||
className={classNames(
|
||||
props.backPath ? "relative" : " fixed bottom-[88px] z-40 ltr:right-4 rtl:left-4 sm:z-auto",
|
||||
props.backPath
|
||||
? "relative"
|
||||
: "fixed bottom-[88px] z-40 ltr:right-4 rtl:left-4 sm:z-auto md:ltr:right-0 md:rtl:left-0",
|
||||
"flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto"
|
||||
)}>
|
||||
{props.CTA}
|
||||
|
@ -795,7 +795,7 @@ export function ShellMain(props: LayoutProps) {
|
|||
</header>
|
||||
)}
|
||||
</div>
|
||||
<div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col ", "pt-10")}>
|
||||
<div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
|
||||
{props.children}
|
||||
</div>
|
||||
</>
|
||||
|
|
Loading…
Reference in New Issue
Block a user