111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
import { FC, useState } from "react";
|
|
import { CheckCircle } from "lucide-react";
|
|
import { Tab } from "@headlessui/react";
|
|
// helpers
|
|
import { cn } from "@/helpers/common.helper";
|
|
|
|
export type ProPlanUpgradeProps = {
|
|
basePlan: "Free" | "One";
|
|
features: string[];
|
|
verticalFeatureList?: boolean;
|
|
extraFeatures?: string | React.ReactNode;
|
|
};
|
|
|
|
type TProPiceFrequency = "month" | "year";
|
|
|
|
type TProPlanPrice = {
|
|
key: string;
|
|
price: string;
|
|
recurring: TProPiceFrequency;
|
|
};
|
|
|
|
const PRO_PLAN_PRICES: TProPlanPrice[] = [
|
|
{ key: "monthly", price: "$7", recurring: "month" },
|
|
{ key: "yearly", price: "$5", recurring: "year" },
|
|
];
|
|
|
|
export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
|
|
const { basePlan, features, verticalFeatureList = false, extraFeatures } = props;
|
|
// states
|
|
const [selectedPlan, setSelectedPlan] = useState<TProPiceFrequency>("month");
|
|
// env
|
|
const PRO_PLAN_MONTHLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_MONTHLY_PAYMENT_URL ?? "https://plane.so/pro";
|
|
const PRO_PLAN_YEARLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_YEARLY_PAYMENT_URL ?? "https://plane.so/pro";
|
|
|
|
return (
|
|
<div className="py-4 px-2 border border-custom-primary-200/30 rounded-xl bg-custom-primary-200/5">
|
|
<Tab.Group>
|
|
<div className="flex w-full justify-center h-10">
|
|
<Tab.List className="flex space-x-1 rounded-lg bg-custom-primary-200/10 p-1 w-60">
|
|
{PRO_PLAN_PRICES.map((price: TProPlanPrice) => (
|
|
<Tab
|
|
key={price.key}
|
|
className={({ selected }) =>
|
|
cn(
|
|
"w-full rounded-lg py-1.5 text-sm font-medium leading-5",
|
|
selected
|
|
? "bg-custom-background-100 text-custom-primary-300 shadow"
|
|
: "hover:bg-custom-primary-100/5 text-custom-text-300 hover:text-custom-text-200"
|
|
)
|
|
}
|
|
onClick={() => setSelectedPlan(price.recurring)}
|
|
>
|
|
<>
|
|
{price.recurring === "month" && ("Monthly" as string)}
|
|
{price.recurring === "year" && ("Yearly" as string)}
|
|
{price.recurring === "year" && (
|
|
<span className="bg-gradient-to-r from-[#C78401] to-[#896828] text-white rounded-full px-2 py-1 ml-1 text-xs">
|
|
-28%
|
|
</span>
|
|
)}
|
|
</>
|
|
</Tab>
|
|
))}
|
|
</Tab.List>
|
|
</div>
|
|
<Tab.Panels>
|
|
{PRO_PLAN_PRICES.map((price: TProPlanPrice) => (
|
|
<Tab.Panel key={price.key}>
|
|
<div className="pt-6 pb-4 text-center font-semibold">
|
|
<div className="text-2xl">Plane Pro</div>
|
|
<div className="text-3xl">
|
|
{price.recurring === "month" && "$7"}
|
|
{price.recurring === "year" && "$5"}
|
|
</div>
|
|
<div className="text-sm text-custom-text-300">a user per month</div>
|
|
</div>
|
|
<div className="flex justify-center w-full">
|
|
<a
|
|
href={selectedPlan === "month" ? PRO_PLAN_MONTHLY_PAYMENT_URL : PRO_PLAN_YEARLY_PAYMENT_URL}
|
|
target="_blank"
|
|
className="relative inline-flex items-center justify-center w-56 px-4 py-2.5 text-white text-sm font-medium border border-[#E9DBBF99]/60 bg-gradient-to-r from-[#C78401] to-[#896828] rounded-lg focus:outline-none"
|
|
>
|
|
Upgrade to Pro
|
|
</a>
|
|
</div>
|
|
<div className="px-2 pt-6 pb-2">
|
|
<div className="p-2 text-sm font-semibold">{`Everything in ${basePlan} +`}</div>
|
|
<ul className="grid grid-cols-12 gap-x-4">
|
|
{features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className={cn("col-span-12 relative rounded-md p-2 flex", {
|
|
"sm:col-span-6": !verticalFeatureList,
|
|
})}
|
|
>
|
|
<p className="w-full text-sm font-medium leading-5 flex items-center line-clamp-1">
|
|
<CheckCircle className="h-4 w-4 mr-4 text-custom-text-300 flex-shrink-0" />
|
|
<span className="text-custom-text-200 truncate">{feature}</span>
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{extraFeatures && <div>{extraFeatures}</div>}
|
|
</div>
|
|
</Tab.Panel>
|
|
))}
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
);
|
|
};
|