mirror of
https://github.com/hanzoai/calendar.git
synced 2026-09-24 22:42:24 +00:00
sean-brydonandGitHub
a359f0ba01
* wip flow * add tests * WIP migrateing view * push back step * fix tests and logic for adding new members to existing teams * few UI fixes * type fixes * fix nits * few UI + re-route fixes * fix teamId when migrating
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import posthog from "posthog-js";
|
|
|
|
import { useFlagMap } from "@calcom/features/flags/context/provider";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Button } from "@calcom/ui/components/button";
|
|
|
|
import { MailIcon } from "./MailIcon";
|
|
|
|
type CompanyEmailOrganizationBannerProps = {
|
|
onDismissAction: () => void;
|
|
};
|
|
|
|
export const CompanyEmailOrganizationBanner = ({ onDismissAction }: CompanyEmailOrganizationBannerProps) => {
|
|
const { t } = useLocale();
|
|
const router = useRouter();
|
|
const flags = useFlagMap();
|
|
|
|
const handleLearnMore = () => {
|
|
const redirectPath = flags["onboarding-v3"]
|
|
? "/onboarding/organization/details?migrate=true"
|
|
: "/settings/organizations/new";
|
|
|
|
posthog.capture("company_email_banner_upgrade_clicked");
|
|
|
|
router.push(redirectPath);
|
|
};
|
|
|
|
const handleDismiss = () => {
|
|
posthog.capture("company_email_banner_dismissed");
|
|
onDismissAction();
|
|
};
|
|
|
|
if (!flags["onboarding-v3"]) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="border-subtle from-muted relative mb-6 overflow-hidden rounded-lg border bg-gradient-to-r to-transparent p-4">
|
|
{/* Dot grid background with fade */}
|
|
<svg className="pointer-events-none absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
{/* Dot pattern - 12px spacing */}
|
|
<pattern id="banner-dot-pattern" x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse">
|
|
<circle cx="1" cy="1" r="0.8" fill="currentColor" className="text-subtle" opacity="0.3" />
|
|
</pattern>
|
|
{/* Fade mask from left to right */}
|
|
<linearGradient id="banner-fade-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="white" stopOpacity="1" />
|
|
<stop offset="10%" stopColor="white" stopOpacity="0.4" />
|
|
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
|
</linearGradient>
|
|
<mask id="banner-fade-mask">
|
|
<rect x="0" y="0" width="100%" height="100%" fill="url(#banner-fade-gradient)" />
|
|
</mask>
|
|
</defs>
|
|
{/* Apply pattern with mask */}
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="100%"
|
|
height="100%"
|
|
fill="url(#banner-dot-pattern)"
|
|
mask="url(#banner-fade-mask)"
|
|
/>
|
|
</svg>
|
|
|
|
<div className="relative z-10 flex gap-4">
|
|
<div>
|
|
<MailIcon />
|
|
</div>
|
|
<div className="flex flex-1 flex-col gap-2">
|
|
<div className="flex flex-col">
|
|
<h3 className="text-default text-sm font-semibold">
|
|
{t("it_appears_you_are_using_company_email")}
|
|
</h3>
|
|
<p className="text-default text-sm">{t("explore_organizational_plan_description")}</p>
|
|
</div>
|
|
<div className="mt-2 flex gap-2">
|
|
<Button color="secondary" onClick={handleDismiss}>
|
|
{t("dismiss")}
|
|
</Button>
|
|
<Button color="primary" EndIcon="external-link" onClick={handleLearnMore}>
|
|
{t("upgrade")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|