104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import { t } from "@lingui/core/macro";
|
|
import { HiBolt, HiCheckBadge } from "react-icons/hi2";
|
|
|
|
import Button from "~/components/Button";
|
|
import { useModal } from "~/providers/modal";
|
|
import { usePopup } from "~/providers/popup";
|
|
|
|
export function UpgradeToProConfirmation({
|
|
workspacePublicId,
|
|
}: {
|
|
userId: string;
|
|
workspacePublicId: string;
|
|
}) {
|
|
const { closeModal, entityId } = useModal();
|
|
const { showPopup } = usePopup();
|
|
|
|
const handleUpgrade = async () => {
|
|
try {
|
|
const response = await fetch("/api/stripe/create_checkout_session", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
...(entityId && { slug: entityId }),
|
|
workspacePublicId: workspacePublicId,
|
|
cancelUrl: "/settings",
|
|
successUrl: "/settings",
|
|
}),
|
|
});
|
|
|
|
const { url } = (await response.json()) as { url: string };
|
|
|
|
if (url) {
|
|
window.location.href = url;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error creating checkout session:", error);
|
|
|
|
showPopup({
|
|
header: t`Error upgrading subscription`,
|
|
message: t`Please try again later, or contact customer support.`,
|
|
icon: "error",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-5">
|
|
<div className="flex w-full flex-col justify-between pb-4">
|
|
<h2 className="text-md pb-4 font-bold text-neutral-900 dark:text-dark-1000">
|
|
{t`Upgrade to Pro`}
|
|
</h2>
|
|
<p className="mb-4 text-sm font-medium text-light-900 dark:text-dark-900">
|
|
{t`Supercharge your workspace for just $29/month. Here's what you'll get:`}
|
|
</p>
|
|
|
|
<div className="rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-3">
|
|
<HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-sm text-neutral-900 dark:text-dark-1000">
|
|
{t`Unlimited members`}
|
|
</span>
|
|
<span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 ring-1 ring-inset ring-emerald-500/20 dark:text-emerald-400 sm:text-[10px]">
|
|
{t`Launch offer`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
|
|
<span className="text-sm text-neutral-900 dark:text-dark-1000">
|
|
{t`Custom workspace URL`}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
|
|
<span className="text-sm text-neutral-900 dark:text-dark-1000">
|
|
{t`Board analytics (coming soon)`}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
<HiCheckBadge className="h-5 w-5 flex-shrink-0 text-light-1000 dark:text-dark-950" />
|
|
<span className="text-sm text-neutral-900 dark:text-dark-1000">
|
|
{t`Priority email support`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 flex justify-end space-x-2 sm:mt-6">
|
|
<Button onClick={() => closeModal()} variant="secondary">
|
|
{t`Cancel`}
|
|
</Button>
|
|
<Button
|
|
onClick={handleUpgrade}
|
|
iconRight={<HiBolt />}
|
|
>{t`Upgrade`}</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|