first commit
This commit is contained in:
122
calcom/packages/features/tips/Tips.tsx
Normal file
122
calcom/packages/features/tips/Tips.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import shuffle from "lodash/shuffle";
|
||||
import { useState, memo } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { localStorage } from "@calcom/lib/webstorage";
|
||||
import { Card } from "@calcom/ui";
|
||||
|
||||
export const tips = [
|
||||
{
|
||||
id: 4,
|
||||
thumbnailUrl: "https://assets.blsmedia.de/cal/webai.jpg",
|
||||
mediaLink: "https://bls.media/webai",
|
||||
title: "BLS webai",
|
||||
description: "Deine eigene individuelle KI",
|
||||
href: "https://bls.media/webai",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
thumbnailUrl: "https://assets.blsmedia.de/cal/bot.jpg",
|
||||
mediaLink: "https://bls.media/bot",
|
||||
title: "BLS bot",
|
||||
description: "Sag Tschüss zu unpersönlichen Kontaktformularen!",
|
||||
href: "https://bls.media/bot",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
thumbnailUrl: "https://assets.blsmedia.de/cal/teams.jpg",
|
||||
mediaLink: "https://bls.media/cal#teams",
|
||||
title: "Besser im Team",
|
||||
description: "Volles Potential von BLS cal",
|
||||
href: "https://bls.media/cal#teams",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
thumbnailUrl: "https://assets.blsmedia.de/cal/media.jpg",
|
||||
mediaLink: "https://bls.media",
|
||||
title: "BLS media",
|
||||
description: "Lerne alle unsere Tools kennen",
|
||||
href: "https://bls.media",
|
||||
},
|
||||
];
|
||||
|
||||
const reversedTips = shuffle(tips).slice(0).reverse();
|
||||
|
||||
function Tips() {
|
||||
const { t } = useLocale();
|
||||
|
||||
const [list, setList] = useState<typeof tips>(() => {
|
||||
if (typeof window === "undefined") {
|
||||
return reversedTips;
|
||||
}
|
||||
try {
|
||||
const removedTipsString = localStorage.getItem("removedTipsIds");
|
||||
if (removedTipsString !== null) {
|
||||
const removedTipsIds = removedTipsString.split(",").map((id) => parseInt(id, 10));
|
||||
const filteredTips = reversedTips.filter((tip) => removedTipsIds.indexOf(tip.id) === -1);
|
||||
return filteredTips;
|
||||
} else {
|
||||
return reversedTips;
|
||||
}
|
||||
} catch {
|
||||
return reversedTips;
|
||||
}
|
||||
});
|
||||
|
||||
const handleRemoveItem = (id: number) => {
|
||||
setList((currentItems) => {
|
||||
const items = localStorage.getItem("removedTipsIds") || "";
|
||||
const itemToRemoveIndex = currentItems.findIndex((item) => item.id === id);
|
||||
|
||||
localStorage.setItem(
|
||||
"removedTipsIds",
|
||||
`${currentItems[itemToRemoveIndex].id.toString()}${items.length > 0 ? `,${items.split(",")}` : ""}`
|
||||
);
|
||||
currentItems.splice(itemToRemoveIndex, 1);
|
||||
return [...currentItems];
|
||||
});
|
||||
};
|
||||
|
||||
const baseOriginalList = list.slice(0).reverse();
|
||||
return (
|
||||
<div
|
||||
className="hidden pb-4 pt-8 lg:grid"
|
||||
/* ref={animationRef} */
|
||||
style={{
|
||||
gridTemplateColumns: "1fr",
|
||||
}}>
|
||||
{list.map((tip) => {
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
gridRowStart: 1,
|
||||
gridColumnStart: 1,
|
||||
}}
|
||||
key={tip.id}>
|
||||
<div
|
||||
className="relative"
|
||||
style={{
|
||||
transform: `scale(${1 - baseOriginalList.indexOf(tip) / 20})`,
|
||||
top: -baseOriginalList.indexOf(tip) * 10,
|
||||
opacity: `${1 - baseOriginalList.indexOf(tip) / 7}`,
|
||||
}}>
|
||||
<Card
|
||||
variant="SidebarCard"
|
||||
thumbnailUrl={tip.thumbnailUrl}
|
||||
mediaLink={tip.mediaLink}
|
||||
title={tip.title}
|
||||
description={tip.description}
|
||||
learnMore={{ href: tip.href, text: t("learn_more") }}
|
||||
actionButton={{ onClick: () => handleRemoveItem(tip.id), child: t("dismiss") }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(Tips);
|
||||
77
calcom/packages/features/tips/UpgradeTip.tsx
Normal file
77
calcom/packages/features/tips/UpgradeTip.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { classNames } from "@calcom/lib";
|
||||
import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { useGetTheme } from "@calcom/lib/hooks/useTheme";
|
||||
import { trpc } from "@calcom/trpc";
|
||||
|
||||
export function UpgradeTip({
|
||||
title,
|
||||
description,
|
||||
background,
|
||||
features,
|
||||
buttons,
|
||||
isParentLoading,
|
||||
children,
|
||||
plan,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
/* overwrite EmptyScreen text */
|
||||
background: string;
|
||||
features: Array<{ icon: JSX.Element; title: string; description: string }>;
|
||||
buttons?: JSX.Element;
|
||||
/**Chldren renders when the user is in a team */
|
||||
children: JSX.Element;
|
||||
isParentLoading?: ReactNode;
|
||||
plan: "team" | "enterprise";
|
||||
}) {
|
||||
const { activeTheme } = useGetTheme();
|
||||
const { t } = useLocale();
|
||||
const { isPending, hasTeamPlan } = useHasTeamPlan();
|
||||
const { data } = trpc.viewer.teams.getUpgradeable.useQuery();
|
||||
const imageSrc = `${background}${activeTheme === "dark" ? "-dark" : ""}.jpg`;
|
||||
|
||||
const hasEnterprisePlan = false;
|
||||
//const { isPending , hasEnterprisePlan } = useHasEnterprisePlan();
|
||||
|
||||
const hasUnpublishedTeam = !!data?.[0];
|
||||
|
||||
if (plan === "team" && (hasTeamPlan || hasUnpublishedTeam)) return children;
|
||||
|
||||
if (plan === "enterprise" && hasEnterprisePlan) return children;
|
||||
|
||||
if (isPending) return <>{isParentLoading}</>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10">
|
||||
<picture className="absolute min-h-[295px] w-full rounded-lg object-cover">
|
||||
<source srcSet={imageSrc} media="(prefers-color-scheme: dark)" />
|
||||
<img
|
||||
className="absolute min-h-[295px] w-full select-none rounded-lg object-cover object-left md:object-center"
|
||||
src={imageSrc}
|
||||
loading="lazy"
|
||||
alt={title}
|
||||
/>
|
||||
</picture>
|
||||
<div className="relative my-4 px-8 sm:px-14">
|
||||
<h1 className={classNames("font-cal text-3xl")}>{t(title)}</h1>
|
||||
<p className={classNames("mb-8 mt-4 max-w-sm")}>{t(description)}</p>
|
||||
{buttons}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid-cols-3 md:grid md:gap-4">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.title} className="bg-muted mb-4 min-h-[180px] w-full rounded-md p-8 md:mb-0">
|
||||
{feature.icon}
|
||||
<h2 className="font-cal text-emphasis mt-4 text-lg">{feature.title}</h2>
|
||||
<p className="text-default">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
2
calcom/packages/features/tips/index.ts
Normal file
2
calcom/packages/features/tips/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { default as Tips } from "./Tips";
|
||||
export { UpgradeTip } from "./UpgradeTip";
|
||||
Reference in New Issue
Block a user