infisical/frontend/components/billing/Plan.js

import React from "react";

import StripeRedirect from "~/pages/api/organization/StripeRedirect";

export default function Plan({ plan }) {
	return (
		<div
			className={`relative flex flex-col justify-between border border-2 min-w-fit w-96 rounded-lg h-68 mr-4 bg-mineshaft-800 ${
				(plan.name != "Starter") & (plan.current == true)
					? "border-primary"
					: "border-chicago-700"
			}
			`}
		>
			<div className="flex flex-col">
				<div className="flex flex-row justify-between items-center relative z-10">
					<p
						className={`px-6 py-4 text-3xl font-semibold text-gray-400`}
					>
						{plan.name}
					</p>
				</div>
				<div className="flex flwx-row items-end justify-start mb-4">
					<p className="pl-6 text-3xl font-semibold text-primary">
						{plan.price}
					</p>
					<p className="pl-3 mb-1 text-lg text-gray-400">
						{plan.priceExplanation}
					</p>
				</div>
				<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
					{plan.text}
				</p>
				<p className="relative z-10 max-w-fit px-6 text-base text-gray-400">
					{plan.subtext}
				</p>
			</div>
			<div className="flex flex-row items-center">
				{plan.current == false ? (
					<>
						{plan.buttonTextMain == "Schedule a Demo" ? (
							<a
								href="/scheduledemo"
								target='_blank rel="noopener"'
							>
								<div className="relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 hover:text-black hover:border-primary text-gray-400 font-semibold hover:bg-primary bg-bunker duration-200 cursor-pointer rounded-md flex w-max">
									{plan.buttonTextMain}
								</div>
							</a>
						) : (
							<div
								className={`relative z-10 mx-5 mt-3 mb-4 py-2 px-4 border border-1 border-gray-600 text-gray-400 font-semibold ${
									plan.buttonTextMain == "Downgrade"
										? "hover:bg-red hover:text-white hover:border-red"
										: "hover:bg-primary hover:text-black hover:border-primary"
								} bg-bunker duration-200 cursor-pointer rounded-md flex w-max`}
							>
								<button
									onClick={() =>
										StripeRedirect({
											orgId: localStorage.getItem(
												"orgData.id"
											),
										})
									}
								>
									{plan.buttonTextMain}
								</button>
							</div>
						)}
						<a href="/pricing" target='_blank rel="noopener"'>
							<div className="relative z-10 text-gray-400 font-semibold hover:text-primary duration-200 cursor-pointer mb-0.5">
								{plan.buttonTextSecondary}
							</div>
						</a>
					</>
				) : (
					<div
						className={`h-8 w-full rounded-b-md flex justify-center items-center z-10 ${
							(plan.name != "Starter") & (plan.current == true)
								? "bg-primary"
								: "bg-chicago-700"
						}`}
					>
						<p className="text-xs text-black font-semibold">
							CURRENT PLAN
						</p>
					</div>
				)}
			</div>
		</div>
	);
}