mirror of
https://github.com/makeplane/plane.git
synced 2025-12-29 00:24:56 +01:00
4e8bfe0024
* dev: initialize feature flagging * dev: feature flagging workspace active cycles * dev: update feature flag implementation * dev: add `FEATURE_FLAG_SERVER_AUTH_TOKEN` env * dev: add feature flagging for backend apis * dev: setup feature flags store and hooks. (#558) * dev: setup feature flags store and hooks. * minor improvements for swr key and flags enum. * dev: workspace active cycles feature flag. (#562) * dev: add task for cancelling the workspace subscription when the workspace is deleted * dev: rename feaure flagging component * dev: update feature flagging function for spaces * dev: add feature flags for bulk ops, issue embeds and page publish. (#589) * dev: add logging for member sync task * dev: restrict workspace from deleting if the subscription is active * dev: workspace delete check endpoint * dev: subscription endpoint check * dev: update subscriptions * chore: plane pro billing and plans page updates. * dev: update pro pill display logic. * dev: fix feature flagging * chore: minor improvement in cloud-badge to avoid API calls to `products` endpoint if user has PRO subscription. --------- Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import { FC } from "react";
|
|
import { BadgeCheck } from "lucide-react";
|
|
// helpers
|
|
import { cn } from "@/helpers/common.helper";
|
|
|
|
type TPlaneCardVariant = "free" | "one" | "pro" | "enterprise";
|
|
|
|
type TButtonCallToAction = {
|
|
variant: "button";
|
|
label: string;
|
|
onClick: () => void;
|
|
};
|
|
|
|
type TLinkCallToAction = {
|
|
variant: "link";
|
|
label: string;
|
|
url: string;
|
|
};
|
|
|
|
export type TPlanCard = {
|
|
variant: TPlaneCardVariant;
|
|
planName: string;
|
|
isActive: boolean;
|
|
priceDetails: {
|
|
price: string;
|
|
user?: string;
|
|
duration?: string;
|
|
};
|
|
callToAction: TButtonCallToAction | TLinkCallToAction;
|
|
baseFeature?: string;
|
|
features: string[];
|
|
};
|
|
|
|
export const PlanCard: FC<TPlanCard> = (props) => {
|
|
const { variant, planName, isActive, priceDetails, callToAction, baseFeature, features } = props;
|
|
|
|
return (
|
|
<div className="py-2 px-4">
|
|
<div className="p-4 border border-custom-border-200 rounded-xl">
|
|
<div className="flex gap-4 items-center justify-between">
|
|
<div className="text-xl font-bold">{planName}</div>
|
|
{isActive && (
|
|
<div className="border-[0.5px] border-custom-primary-100 p-0.5 bg-custom-primary-100/10 text-custom-primary-300 text-xs font-medium rounded">
|
|
Current plan
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-4 items-center my-4">
|
|
<div className="text-2xl font-semibold">{priceDetails.price}</div>
|
|
<div className="flex flex-col w-full text-xs text-custom-text-300 font-medium">
|
|
<span className="line-clamp-1">{priceDetails.user}</span>
|
|
<span className="line-clamp-2">{priceDetails.duration}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
{callToAction.variant === "button" ? (
|
|
<button
|
|
onClick={callToAction.onClick}
|
|
className={cn(
|
|
"w-full text-center px-4 py-2 text-base font-semibold text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100 rounded-lg"
|
|
)}
|
|
>
|
|
{callToAction.label}
|
|
</button>
|
|
) : (
|
|
<a
|
|
href={callToAction.url}
|
|
target="_blank"
|
|
className={cn(
|
|
"block w-full text-center px-4 py-2 text-base font-semibold text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100 rounded-lg"
|
|
)}
|
|
>
|
|
{callToAction.label}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="py-4">
|
|
<div className="text-sm font-semibold pt-2 h-8">{baseFeature}</div>
|
|
<ul className="text-sm font-medium">
|
|
{features.map((feature) => (
|
|
<li key={feature} className="flex gap-2 items-start py-3 w-full h-12">
|
|
<span className="flex-shrink-0 pt-0.5">
|
|
<BadgeCheck size={14} />
|
|
</span>
|
|
<span className="line-clamp-2">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|