shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cloud): show pro features (#169)

Browse Source 
* feat(cloud): show pro workspace features

* feat: allow multiple subscriptions

* chore: translations
This commit is contained in:
Henry
2025-09-08 23:22:12 +01:00
committed by GitHub
parent 99459415d5
commit 6c04a10b1f
19 changed files with 556 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
apps/web/src/views/settings/components/CustomURLConfirmation.tsx
View File

@@ -1,61 +0,0 @@
import { t } from "@lingui/core/macro";
import { authClient } from "@kan/auth/client";
import Button from "~/components/Button";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
export function CustomURLConfirmation({
userId,
workspacePublicId,
}: {
userId: string;
workspacePublicId: string;
}) {
const { closeModal, entityId } = useModal();
const { showPopup } = usePopup();
const handleUpgrade = async () => {
const { data, error } = await authClient.subscription.upgrade({
plan: "pro",
referenceId: workspacePublicId,
metadata: { userId, workspacePublicId, workspaceSlug: entityId },
successUrl: "/settings",
cancelUrl: "/settings",
returnUrl: "/settings",
disableRedirect: true,
});
if (data?.url) {
window.location.href = data.url;
}
if (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-medium text-neutral-900 dark:text-dark-1000">
{t`Confirm URL change`}
</h2>
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{t`Custom URLs are a premium feature. You'll be directed to upgrade your account.`}
</p>
</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}>{t`Upgrade`}</Button>
</div>
</div>
);
}

2
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -98,7 +98,7 @@ const UpdateWorkspaceUrlForm = ({
if (!isWorkspaceSlugAvailable?.isAvailable) return;
if (workspacePlan !== "pro" && env("NEXT_PUBLIC_KAN_ENV") === "cloud")
return openModal("UPDATE_WORKSPACE_URL", data.slug);
return openModal("UPGRADE_TO_PRO", data.slug);
updateWorkspaceSlug.mutate({
workspacePublicId,

103
apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx Normal file
View File

@@ -0,0 +1,103 @@
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 && { workspaceSlug: 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>
);
}