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;
|
className?: string;
|
||||||
role?: AriaRole | undefined;
|
role?: AriaRole | undefined;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
toHide?: boolean; // if true, the component will be hidden instead of showing the empty screen
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) => {
|
||||||
* 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 session = useSession();
|
const session = useSession();
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const Component = as || Fragment;
|
const Component = as || Fragment;
|
||||||
|
@ -28,8 +22,6 @@ const LicenseRequired = ({ children, as = "", toHide = false, ...rest }: License
|
||||||
return (
|
return (
|
||||||
<Component {...rest}>
|
<Component {...rest}>
|
||||||
{hasValidLicense === null || hasValidLicense ? (
|
{hasValidLicense === null || hasValidLicense ? (
|
||||||
!toHide && children
|
|
||||||
) : toHide ? (
|
|
||||||
children
|
children
|
||||||
) : (
|
) : (
|
||||||
<EmptyScreen
|
<EmptyScreen
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
import { WEBAPP_URL } from "@calcom/lib/constants";
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
||||||
|
import { APP_NAME } from "@calcom/lib/constants";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import isCalcom from "@calcom/lib/isCalcom";
|
import isCalcom from "@calcom/lib/isCalcom";
|
||||||
import { trpc } from "@calcom/trpc/react";
|
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 SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
|
||||||
import TeamList from "./TeamList";
|
import TeamList from "./TeamList";
|
||||||
|
@ -38,6 +39,21 @@ export function TeamsListing() {
|
||||||
title: t("fixed_round_robin"),
|
title: t("fixed_round_robin"),
|
||||||
description: t("add_one_fixed_attendee"),
|
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 (
|
return (
|
||||||
|
@ -52,8 +68,8 @@ export function TeamsListing() {
|
||||||
{isLoading && <SkeletonLoaderTeamList />}
|
{isLoading && <SkeletonLoaderTeamList />}
|
||||||
{!teams.length && !isLoading && (
|
{!teams.length && !isLoading && (
|
||||||
<>
|
<>
|
||||||
{isCalcom ? (
|
{!isCalcom ? (
|
||||||
<div className="max-w-[1118px]">
|
<div className="-mt-6 rtl:ml-4 md:rtl:ml-0">
|
||||||
<div
|
<div
|
||||||
className="flex w-full justify-between overflow-hidden rounded-lg pt-4 pb-10 md:min-h-[295px] md:pt-10"
|
className="flex w-full justify-between overflow-hidden rounded-lg pt-4 pb-10 md:min-h-[295px] md:pt-10"
|
||||||
style={{
|
style={{
|
||||||
|
@ -61,22 +77,26 @@ export function TeamsListing() {
|
||||||
backgroundSize: "cover",
|
backgroundSize: "cover",
|
||||||
backgroundRepeat: "no-repeat",
|
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>
|
<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>
|
<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">
|
<div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
|
||||||
|
<ButtonGroup>
|
||||||
<Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
|
<Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
|
||||||
{t("create_team")}
|
{t("create_team")}
|
||||||
</Button>
|
</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")}
|
{t("learn_more")}
|
||||||
</Button>
|
</Button>
|
||||||
|
</ButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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) => (
|
{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}
|
{feature.icon}
|
||||||
<h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
|
<h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
|
||||||
<p className="text-gray-700">{feature.description}</p>
|
<p className="text-gray-700">{feature.description}</p>
|
||||||
|
|
|
@ -731,9 +731,7 @@ function SideBar() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<LicenseRequired toHide>
|
|
||||||
<Tips />
|
<Tips />
|
||||||
</LicenseRequired>
|
|
||||||
<div data-testid="user-dropdown-trigger">
|
<div data-testid="user-dropdown-trigger">
|
||||||
<span className="hidden lg:inline">
|
<span className="hidden lg:inline">
|
||||||
<UserDropdown />
|
<UserDropdown />
|
||||||
|
@ -754,7 +752,7 @@ export function ShellMain(props: LayoutProps) {
|
||||||
const { isLocaleReady } = useLocale();
|
const { isLocaleReady } = useLocale();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-baseline sm:mt-0">
|
<div className="mb-6 flex sm:mt-0 lg:mb-10">
|
||||||
{!!props.backPath && (
|
{!!props.backPath && (
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
|
@ -768,11 +766,11 @@ export function ShellMain(props: LayoutProps) {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{props.heading && (
|
{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>}
|
{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)}>
|
<div className={classNames("w-full ltr:mr-4 rtl:ml-4 sm:block", props.headerClassName)}>
|
||||||
{props.heading && (
|
{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}
|
{!isLocaleReady ? <SkeletonText invisible /> : props.heading}
|
||||||
</h1>
|
</h1>
|
||||||
)}
|
)}
|
||||||
|
@ -785,7 +783,9 @@ export function ShellMain(props: LayoutProps) {
|
||||||
{props.CTA && (
|
{props.CTA && (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
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"
|
"flex-shrink-0 sm:relative sm:bottom-auto sm:right-auto"
|
||||||
)}>
|
)}>
|
||||||
{props.CTA}
|
{props.CTA}
|
||||||
|
@ -795,7 +795,7 @@ export function ShellMain(props: LayoutProps) {
|
||||||
</header>
|
</header>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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}
|
{props.children}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user