113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import { FC } from "react";
|
|
// types
|
|
import { CircleX } from "lucide-react";
|
|
// services
|
|
import { EModalWidth, ModalCore } from "@plane/ui";
|
|
// plane web components
|
|
import { cn } from "@/helpers/common.helper";
|
|
// local components
|
|
import { OnePlanUpgrade } from "./one-plan-upgrade";
|
|
import { ProPlanUpgrade } from "./pro-plan-upgrade";
|
|
|
|
const PRO_PLAN_FEATURES = [
|
|
"More Cycles features",
|
|
"Full Time Tracking + Bulk Ops",
|
|
"Workflow manager",
|
|
"Automations",
|
|
"Popular integrations",
|
|
"Plane AI",
|
|
];
|
|
|
|
const ONE_PLAN_FEATURES = [
|
|
"OIDC + SAML for SSO",
|
|
"Active Cycles",
|
|
"Real-time collab + public views and page",
|
|
"Link pages in issues and vice-versa",
|
|
"Time-tracking + limited bulk ops",
|
|
"Docker, Kubernetes and more",
|
|
];
|
|
|
|
const FREE_PLAN_UPGRADE_FEATURES = [
|
|
"OIDC + SAML for SSO",
|
|
"Time tracking and bulk ops",
|
|
"Integrations",
|
|
"Public views and pages",
|
|
];
|
|
|
|
export type PaidPlanUpgradeModalProps = {
|
|
isOpen: boolean;
|
|
handleClose: () => void;
|
|
};
|
|
|
|
export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = (props) => {
|
|
const { isOpen, handleClose } = props;
|
|
|
|
return (
|
|
<ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIXL} className="rounded-2xl">
|
|
<div className="p-10 max-h-[90vh] overflow-auto">
|
|
<div className="grid grid-cols-12 gap-6">
|
|
<div className="col-span-12 md:col-span-4">
|
|
<div className="text-3xl font-bold leading-8 flex">Upgrade to a paid plan and unlock missing features.</div>
|
|
<div className="mt-4 mb-12">
|
|
<p className="text-sm mb-4 pr-8 text-custom-text-100">
|
|
Active Cycles, time tracking, bulk ops, and other features are waiting for you on one of our paid plans.
|
|
Upgrade today to unlock features your teams need yesterday.
|
|
</p>
|
|
</div>
|
|
{/* Free plan details */}
|
|
<div className="py-4 px-2 border border-custom-border-90 rounded-xl">
|
|
<div className="py-2 px-3">
|
|
<span className="px-2 py-1 bg-custom-background-90 text-sm text-custom-text-300 font-medium rounded">
|
|
Your plan
|
|
</span>
|
|
</div>
|
|
<div className="px-4 py-2 font-semibold">
|
|
<div className="text-3xl">Free</div>
|
|
<div className="text-sm text-custom-text-300">$0 a user per month</div>
|
|
</div>
|
|
<div className="px-2 pt-2 pb-3">
|
|
<ul className="w-full grid grid-cols-12 gap-x-4">
|
|
{FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
|
|
<li key={feature} className={cn("col-span-12 relative rounded-md p-2 flex")}>
|
|
<p className="w-full text-sm font-medium leading-5 flex items-center">
|
|
<CircleX className="h-4 w-4 mr-4 text-red-500 flex-shrink-0" />
|
|
<span className="text-custom-text-200 truncate">{feature}</span>
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-4">
|
|
<ProPlanUpgrade
|
|
basePlan="One"
|
|
features={PRO_PLAN_FEATURES}
|
|
verticalFeatureList
|
|
extraFeatures={
|
|
<p className="pt-1.5 text-center text-xs text-custom-primary-200 font-semibold underline">
|
|
<a href="https://plane.so/pro" target="_blank">
|
|
See full features list
|
|
</a>
|
|
</p>
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="col-span-12 md:col-span-4">
|
|
<OnePlanUpgrade
|
|
features={ONE_PLAN_FEATURES}
|
|
verticalFeatureList
|
|
extraFeatures={
|
|
<p className="pt-1.5 text-center text-xs text-custom-primary-200 font-semibold underline">
|
|
<a href="https://plane.so/one" target="_blank">
|
|
See full features list
|
|
</a>
|
|
</p>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ModalCore>
|
|
);
|
|
};
|