microboard-ui-temp 0.0.3

package/src/features/UserPlan/LimitsTable.module.css

@@ -0,0 +1,131 @@
+.table {
+	font-size: 14px;
+	font-weight: 400;
+	border-collapse: collapse;
+	width: 100%;
+}
+
+.row {
+	border-bottom: 1px solid #e9eaec;
+}
+
+.limit {
+	text-align: left;
+}
+
+.unlimited {
+	color: rgba(38, 189, 108, 1);
+}
+
+.table td,
+.table th {
+	padding: 8px 12px;
+}
+
+.table th {
+	font-weight: 400;
+	text-align: left;
+	border-right: 1px solid #e9eaec;
+}
+
+.table th:last-child {
+	border-right: none;
+}
+
+.header {
+	background-color: rgb(247, 247, 248);
+}
+
+td.currentTariff {
+	background-color: rgba(245, 242, 251, 1);
+	color: rgba(114, 86, 171, 1);
+}
+
+.modelsHeading {
+	text-align: left;
+}
+
+.model {
+	gap: 2px;
+	text-align: left;
+}
+
+.modelName {
+	font-weight: 500;
+	color: rgba(20, 21, 26, 1);
+}
+
+.modelDescription {
+	font-size: 12px;
+	font-weight: 400;
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.modelDisabled {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.modelDisabled.currentTariff {
+	color: rgba(197, 178, 234, 1);
+}
+
+.modelLimitReached {
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.limits {
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.tip-container {
+	display: none;
+	position: absolute;
+	user-select: none;
+	pointer-events: none;
+	justify-items: center;
+	z-index: 2000;
+}
+
+.tip {
+	padding: 8px 12px;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 1.4rem;
+	font-weight: 400;
+	background-color: rgb(11, 12, 14);
+	color: rgb(247, 247, 247);
+	position: relative;
+}
+
+.tip::before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-left: 0.7rem solid transparent;
+	border-right: 0.7rem solid transparent;
+	border-bottom: 0.8rem solid rgb(11, 12, 14);
+	border-radius: 8px;
+}
+
+.tip-container.bottom-right .tip::before {
+	left: 2.5rem;
+	margin-right: -0.7rem;
+	top: -0.6rem;
+}
+
+/* .tip-container.bottom-right {
+	top: calc(100% + 1.2rem);
+	right: -1rem;
+} */
+
+.tip-text.center {
+	text-align: center;
+}
+
+.tip-container.visible {
+	display: flex;
+}

package/src/features/UserPlan/LimitsTable.tsx

@@ -0,0 +1,171 @@
+import { useAccount } from "App/useAccount";
+import clsx from "clsx";
+import React from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useBoundingClientRect } from "shared/lib/useClientRect";
+import { useHoverState } from "shared/lib/useHoverState";
+import styles from "./LimitsTable.module.css";
+
+// Smells
+const DISPLAYNAME_MAP = {
+	"gpt-4o-mini": "GPT-4o mini",
+	"gpt-4o": "GPT-4o",
+	"deepseek-reasoner": "DeepSeek",
+	"flux-schnell": "Flux.1 schnell",
+	"flux-pro": "Flux pro",
+	"tts-1-hd": "Text to speech HD",
+	"sonar-deep-research": "Perplexity AI",
+};
+
+const MODELS_ORDER = [
+	"gpt-4o-mini",
+	"deepseek-reasoner",
+	"gpt-4o",
+	"sonar-deep-research",
+	"flux-schnell",
+	"flux-pro",
+	"tts-1-hd",
+];
+
+export function LimitsTable() {
+	const account = useAccount();
+	const models = account.billingInfo?.models;
+	const { t } = useTranslation();
+	const currentPlanName = account.billingInfo?.plan.name || "basic";
+	const isPlusAI = currentPlanName.toLowerCase() === "plusai";
+
+	const sortedModels = models
+		?.filter(({ id }) => MODELS_ORDER.includes(id))
+		.sort(
+			(model1, model2) =>
+				MODELS_ORDER.indexOf(model1.id) -
+				MODELS_ORDER.indexOf(model2.id),
+		);
+
+	return (
+		<table className={styles.table}>
+			<thead>
+				<tr className={styles.header}>
+					<th className={styles.modelsHeading}>
+						{t("userPlan.limitsTable.modelName")}
+					</th>
+					<th className={clsx(!isPlusAI && styles.currentTariff)}>
+						{t("userPlan.plans.basic.name") +
+							"/" +
+							t("userPlan.plans.plus.name")}
+						<div>{t("userPlan.limitsTable.costPerRequest")}</div>
+					</th>
+					<th className={clsx(isPlusAI && styles.currentTariff)}>
+						{t("userPlan.plans.plusAI.name")}
+						<div>{t("userPlan.limitsTable.costPerRequest")}</div>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				{sortedModels?.map(model => (
+					<ModelRow
+						key={model.id}
+						name={DISPLAYNAME_MAP[model.id] || model.displayName}
+						description={t(`models.descriptions.${model.id}`, "")}
+						tokenCost={model.tokenCost}
+						id={model.id}
+						isPlus={isPlusAI}
+					/>
+				))}
+			</tbody>
+		</table>
+	);
+}
+
+type ModelRowProps = {
+	name: string;
+	description: string;
+	tokenCost: number;
+	id: string;
+	isPlus: boolean;
+};
+
+function ModelRow({ description, name, tokenCost, id, isPlus }: ModelRowProps) {
+	const { t } = useTranslation();
+	const { elementRef, rect } = useBoundingClientRect<HTMLTableCellElement>();
+	const { handlePointerEnter, handlePointerLeave, isHover } = useHoverState();
+
+	const isAvailableInBasic =
+		id === "gpt-4o-mini" || id === "deepseek-reasoner";
+	console.log(id, isAvailableInBasic);
+	const isAvailableInPlus = tokenCost > 0;
+
+	const basicCost = isAvailableInBasic ? tokenCost : null;
+
+	return (
+		<tr className={styles.row}>
+			<td className={styles.model}>
+				<p className={styles.modelName}>{name}</p>
+				<p className={styles.modelDescription}>{description}</p>
+			</td>
+			<td
+				className={clsx(
+					styles.limit,
+					!isAvailableInBasic && styles.modelDisabled,
+					!isPlus && styles.currentTariff,
+				)}
+			>
+				{isAvailableInBasic
+					? basicCost
+					: t("userPlan.limitsTable.unavailable")}
+			</td>
+			<td
+				onPointerEnter={
+					!isAvailableInPlus ? handlePointerEnter : undefined
+				}
+				onPointerLeave={
+					!isAvailableInPlus ? handlePointerLeave : undefined
+				}
+				ref={elementRef}
+				className={clsx(styles.limit, isPlus && styles.currentTariff)}
+			>
+				{isAvailableInPlus ? (
+					tokenCost
+				) : (
+					<>
+						{t("userPlan.limitsTable.unavailable")}
+						<Tooltip
+							text={t("userPlan.limitsTable.availableOnPlus")}
+							x={(rect?.left ?? 0) + (rect?.width ?? 0) - 55}
+							y={(rect?.top ?? 0) + (rect?.height ?? 0) + 12}
+							visible={isHover}
+						/>
+					</>
+				)}
+			</td>
+		</tr>
+	);
+}
+
+type TooltipProps = {
+	text: string;
+	x?: number;
+	y?: number;
+	visible?: boolean;
+};
+
+function Tooltip({ text, x, y, visible }: TooltipProps) {
+	return createPortal(
+		<div
+			className={clsx(
+				styles.tipContainer,
+				styles.bottomRight,
+				visible && styles.visible,
+			)}
+			style={{ left: x, top: y }}
+		>
+			<div className={clsx(styles.tip)}>
+				<span className={clsx(styles.tipText, styles.center)}>
+					{text}
+				</span>
+			</div>
+		</div>,
+		document.getElementById("tooltip")!,
+	);
+}

package/src/features/UserPlan/PlanCard.module.css

@@ -0,0 +1,184 @@
+.card {
+	background-color: var(--bg-color);
+	padding: 20px;
+	border-radius: 24px;
+	border: 1px solid rgba(10, 15, 41, 0.08);
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 20px;
+	min-height: 430px;
+	max-width: 360px;
+	min-width: 320px;
+}
+
+.current {
+	/* box-shadow: 0px 0px 0px 2px #9117f0; */
+}
+
+.basic {
+	--bg-color: rgb(255, 255, 255);
+}
+
+.plus {
+	--bg-color: rgb(236, 223, 251);
+}
+
+.pro {
+	--bg-color: rgb(209, 250, 228);
+}
+
+.name {
+	font-size: 20px;
+	font-weight: 500;
+}
+
+.heading {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.price {
+	font-size: 36px;
+	font-weight: 500;
+	color: rgba(20, 21, 26, 1);
+}
+
+.models {
+	font-size: 16px;
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.features {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	flex: 1 0;
+	gap: 6px;
+}
+
+.feature {
+	margin: 0;
+	padding: 0;
+	padding-left: 36px;
+	color: rgba(20, 21, 26, 1);
+	font-size: 16px;
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.tokenFeature {
+	padding-left: 0;
+	margin-top: -12px;
+}
+
+.markIcon {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.top {
+	display: flex;
+	justify-content: space-between;
+}
+
+.unlimited {
+	background-color: rgb(255, 255, 255);
+	padding: 2px 8px;
+	border-radius: 360px;
+	display: flex;
+	gap: 4px;
+	align-items: center;
+	color: rgba(20, 21, 26, 1);
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.button:disabled,
+.button:disabled:hover {
+	background: none;
+}
+
+.priceWrapper {
+	display: flex;
+	align-items: flex-end;
+	color: rgba(13, 17, 38, 0.4);
+	font-size: 36px;
+	font-weight: 500;
+}
+
+.priceValue {
+	color: rgba(20, 21, 26, 1);
+}
+
+.priceWrapper2 {
+	display: flex;
+	align-items: flex-end;
+	flex-direction: column;
+	color: rgba(13, 17, 38, 0.4);
+	font-size: 36px;
+	font-weight: 500;
+}
+
+.oldPrice {
+	font-size: 14px;
+	text-decoration: line-through;
+	color: #9ea0a8;
+	align-self: flex-start;
+	transform: translateY(-6px);
+}
+
+.perMonth {
+	font-size: 14px;
+	align-self: flex-end;
+	transform: translateY(-6px);
+}
+
+.slash {
+	margin: 0 4px;
+}
+
+.tooltipContainer {
+	margin-left: 8px;
+	position: relative;
+	display: inline-flex;
+	cursor: pointer;
+}
+
+.tooltipIcon {
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.tooltip {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 100%;
+	margin-right: 8px;
+	z-index: 100;
+	width: 232px;
+}
+
+@media screen and (hover: hover) {
+	.tooltipContainer:hover .tooltip {
+		display: flex;
+		width: 232px;
+	}
+
+	.tooltipContainer:hover .tooltip span {
+		width: 232px;
+	}
+}
+
+@media screen and (max-width: 1028px) {
+	.card {
+		grid-column: 1 / -1;
+		max-width: unset;
+		min-width: 240px;
+	}
+}

package/src/features/UserPlan/PlanCard.tsx

@@ -0,0 +1,245 @@
+import React, { type MouseEventHandler } from "react";
+import styles from "./PlanCard.module.css";
+import clsx from "clsx";
+import { Icon } from "shared/ui-lib/Icon";
+import { Button } from "shared/ui-lib/Button";
+import { useTranslation } from "react-i18next";
+import { UiSkeleton } from "shared/ui-lib/UiSkeleton";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+import { Tooltip } from "shared/ui-lib/Tooltip";
+
+export type PlanState = "current" | "downgrade" | "available" | "pending";
+
+const centToUsd = (price: number) => price / 100;
+
+type Props = {
+	variant?: "basic" | "pro" | "plus" | "plusAI";
+	state?: PlanState;
+	contact?: boolean;
+	unlimited?: boolean;
+	name: string;
+	price?: string | number | null;
+	oldPrice?: number | null;
+	description?: string;
+	features: string[];
+	additionalFeature?: string;
+	additionalFeatureTooltip?: string;
+	onDowngrade?: MouseEventHandler;
+	onSubscribe?: MouseEventHandler;
+	activationDate?: string | Date;
+	isLoading?: boolean;
+	buttonText?: string;
+	isTokenPrice?: boolean;
+};
+
+export function PlanCard({
+	variant = "basic",
+	state = "available",
+	contact,
+	unlimited,
+	name,
+	price = 0,
+	oldPrice,
+	description,
+	features,
+	onDowngrade,
+	onSubscribe,
+	activationDate,
+	isLoading = false,
+	buttonText,
+	isTokenPrice = false,
+	additionalFeature,
+	additionalFeatureTooltip,
+}: Props) {
+	const { t } = useTranslation();
+	const getButtonLabel = () => {
+		if (buttonText && state === "current") {
+			return buttonText;
+		}
+
+		switch (state) {
+			case "available":
+				return contact
+					? t("userPlan.subscribe.contact")
+					: t("userPlan.subscribe.getPlan", { plan: name });
+			case "current":
+				return t("userPlan.subscribe.current");
+			case "downgrade":
+				return t("userPlan.subscribe.downgrade");
+			case "pending":
+				return t("userPlan.pendingBtn", { activationDate });
+		}
+	};
+
+	const handleMailTo = () => {
+		const elem = document.createElement("a");
+		elem.href = "mailto:ceo@microboard.io";
+		elem.target = "_blank";
+		elem.click();
+	};
+
+	const getHandler = () => {
+		if (state === "available" && contact) {
+			return handleMailTo;
+		}
+
+		if (state === "available" && !contact) {
+			return onSubscribe;
+		}
+
+		if (state === "current" && buttonText) {
+			return onSubscribe;
+		}
+
+		if (state === "downgrade") {
+			return onDowngrade;
+		}
+	};
+
+	if (isLoading) {
+		return <UiSkeleton className={styles.card} />;
+	}
+
+	return (
+		<div
+			className={clsx(
+				styles.card,
+				styles[variant],
+				state === "current" && styles.current,
+			)}
+		>
+			<div className={styles.heading}>
+				<div className={styles.top}>
+					<h3 className={styles.name}>{name}</h3>
+					{unlimited && (
+						<div className={styles.unlimited}>
+							<span>{t("userPlan.unlimited")}</span>
+							<Icon iconName="ai" width={16} height={16} />
+						</div>
+					)}
+				</div>
+
+				<div className={styles.price}>
+					{typeof price === "string" && !isTokenPrice ? (
+						price
+					) : (
+						<p className={styles.priceWrapper}>
+							<span>$</span>
+							<span className={styles.priceValue}>
+								{isTokenPrice
+									? "8"
+									: centToUsd(
+											typeof price === "number"
+												? price
+												: 0,
+										)}
+							</span>
+
+							<span
+								className={clsx(styles.slash, styles.perMonth)}
+							>
+								/
+							</span>
+							<div className={styles.priceWrapper2}>
+								{oldPrice && !isTokenPrice && (
+									<span className={styles.oldPrice}>
+										${centToUsd(oldPrice)}
+									</span>
+								)}
+								<span className={styles.perMonth}>
+									{isTokenPrice
+										? t("userPlan.perThousandTokens")
+										: t("userPlan.perMonth")}
+								</span>
+							</div>
+						</p>
+					)}
+				</div>
+				{state === "downgrade" && (
+					<>
+						{/* <UiSeparator /> */}
+						<Button
+							onClick={getHandler()}
+							className={styles.button}
+							pattern="tertiary"
+						>
+							{getButtonLabel()}
+						</Button>
+					</>
+				)}
+				{description && (
+					<div className={styles.models}>{description}</div>
+				)}
+			</div>
+			{state !== "downgrade" && (
+				<>
+					{/* <UiSeparator /> */}
+					<Button
+						onClick={getHandler()}
+						className={styles.button}
+						disabled={
+							(state === "current" && !buttonText) ||
+							state === "pending"
+						}
+						pattern={state === "pending" ? "tertiary" : "primary"}
+					>
+						{getButtonLabel()}
+					</Button>
+				</>
+			)}
+			{additionalFeature && (
+				<div className={clsx(styles.feature, styles.tokenFeature)}>
+					<span>{additionalFeature}</span>
+					{additionalFeatureTooltip && (
+						<div className={styles.tooltipContainer}>
+							<Icon
+								iconName="InformationLine"
+								width={24}
+								height={24}
+								className={styles.tooltipIcon}
+							/>
+							<Tooltip
+								id={`${name}-${additionalFeature}-tooltip`}
+								tooltip={additionalFeatureTooltip}
+								tooltipPosition="right"
+								tooltipAlign="left"
+								className={styles.tooltip}
+								allowTextWrap={true}
+								width="232px"
+							/>
+						</div>
+					)}
+				</div>
+			)}
+			<UiSeparator />
+			<ul className={styles.features}>
+				{features.map(feature => (
+					<li className={styles.feature} key={feature}>
+						<Icon
+							className={styles.markIcon}
+							width={24}
+							height={24}
+							iconName="checkMark"
+						/>
+						<span>{feature}</span>
+					</li>
+				))}
+			</ul>
+
+			{/* {state !== "downgrade" && (
+				<>
+					<UiSeparator />
+					<UiButton
+						onClick={getHandler()}
+						className={styles.button}
+						disabled={state === "current" || state === "pending"}
+						variant={state === "pending" ? "tertiary" : "primary"}
+						size="lg"
+					>
+						{getButtonLabel()}
+					</UiButton>
+				</>
+			)} */}
+		</div>
+	);
+}