55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
|
import { InformationCircleIcon } from "@heroicons/react/outline";
|
||
|
|
import { Trans } from "next-i18next";
|
||
|
|
|
||
|
|
import Button from "@calcom/ui/Button";
|
||
|
|
import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
|
||
|
|
|
||
|
|
import { useLocale } from "@lib/hooks/useLocale";
|
||
|
|
|
||
|
|
export function UpgradeToProDialog({
|
||
|
|
modalOpen,
|
||
|
|
setModalOpen,
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
modalOpen: boolean;
|
||
|
|
setModalOpen: (open: boolean) => void;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}) {
|
||
|
|
const { t } = useLocale();
|
||
|
|
return (
|
||
|
|
<Dialog open={modalOpen}>
|
||
|
|
<DialogContent>
|
||
|
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
|
||
|
|
<InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
|
||
|
|
</div>
|
||
|
|
<div className="mb-4 sm:flex sm:items-start">
|
||
|
|
<div className="mt-3 sm:mt-0 sm:text-left">
|
||
|
|
<h3 className="font-cal text-lg font-bold leading-6 text-gray-900" id="modal-title">
|
||
|
|
{t("only_available_on_pro_plan")}
|
||
|
|
</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col space-y-3">
|
||
|
|
<p>{children}</p>
|
||
|
|
<p>
|
||
|
|
<Trans i18nKey="plan_upgrade_instructions">
|
||
|
|
You can
|
||
|
|
<a href="/api/upgrade" className="underline">
|
||
|
|
upgrade here
|
||
|
|
</a>
|
||
|
|
.
|
||
|
|
</Trans>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||
|
|
<DialogClose asChild>
|
||
|
|
<Button className="btn-wide table-cell text-center" onClick={() => setModalOpen(false)}>
|
||
|
|
{t("dismiss")}
|
||
|
|
</Button>
|
||
|
|
</DialogClose>
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|