microboard-ui-temp 0.0.3

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

@@ -0,0 +1,26 @@
+.downgradeHeading {
+	font-size: 30px;
+	font-weight: 600;
+}
+
+.downgradeDesc {
+	font-size: 16px;
+}
+
+.downgradeConfirmation {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	color: rgba(20, 21, 26, 1);
+	align-items: flex-start;
+	text-align: left;
+	padding: 32px 64px;
+}
+
+.tooltip {
+	display: none;
+	position: absolute;
+	top: -35px;
+	left: 50%;
+	transform: translateX(-50%);
+}

package/src/features/UserPlan/PlanCards.tsx

@@ -0,0 +1,476 @@
+import { useAccount } from "App/useAccount";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { billingApi } from "shared/api";
+import { useConfirmModalContext } from "features/Modal/ConfirmModal";
+import { notify } from "shared/ui-lib/Toast";
+import { PlanCard, type PlanState } from "./PlanCard";
+import styles from "./PlanCards.module.css";
+import { SELECT_PAYMENT_MODAL_ID } from "./SelectPaymentModal";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { conf } from "microboard-temp";
+const { i18n } = conf;
+import { setModalData } from "shared/ui-lib/UiModal/UiModalContext";
+
+const annualToMonthlyPrice = (price?: number) =>
+	price ? Math.round(price / 12) : 0;
+
+export function BasicPlanCard() {
+	const { t } = useTranslation();
+	const account = useAccount();
+	const { openModalConfirm } = useConfirmModalContext();
+	const [plan, setPlan] = useState<billingApi.Plan | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		billingApi
+			.getPlans()
+			.then(({ data }) => {
+				const basicPlan = data?.find(({ id }) => id === "basic");
+
+				setPlan(basicPlan ?? null);
+			})
+			.finally(() => setIsLoading(false));
+	}, [account.isLoggedIn]);
+
+	const getBasicSubState = (): PlanState => {
+		if (
+			!account.billingInfo ||
+			account.billingInfo?.plan.name === plan?.name
+		) {
+			return "current";
+		}
+
+		if (
+			account.billingInfo.plan.name === "pro" ||
+			account.billingInfo.plan.name === "plus" ||
+			account.billingInfo.plan.name === "plusAI"
+		) {
+			if (account.billingInfo.plan.status === "pending_cancellation") {
+				return "pending";
+			}
+
+			return "downgrade";
+		}
+
+		return "current";
+	};
+
+	const onDowngrade = () => {
+		openModalConfirm(
+			<h2 className={styles.downgradeHeading}>
+				{t("userPlan.downgradeModal.heading", {
+					planName:
+						conf.planNames[
+							account.billingInfo?.plan.name ?? "basic"
+						],
+				})}
+			</h2>,
+			<p className={styles.downgradeDesc}>
+				{t("userPlan.downgradeModal.description", {
+					planName:
+						conf.planNames[
+							account.billingInfo?.plan.name ?? "basic"
+						],
+					currentPeriodEnd: new Intl.DateTimeFormat(i18n.language, {
+						year: "numeric",
+						month: "numeric",
+						day: "numeric",
+					}).format(new Date(account.billingInfo?.plan.endDate ?? 0)),
+				})}
+			</p>,
+			async () => {
+				await account.unsubscribe();
+				notify({
+					header: "Тариф обновлен",
+					body: t("userPlan.downgradeModal.description", {
+						planName:
+							conf.planNames[
+								account.billingInfo?.plan.name ?? "basic"
+							],
+						currentPeriodEnd: new Intl.DateTimeFormat(
+							i18n.language,
+							{
+								year: "numeric",
+								month: "numeric",
+								day: "numeric",
+							},
+						).format(
+							new Date(account.billingInfo?.plan.endDate ?? 0),
+						),
+					}),
+				});
+				Promise.resolve();
+			},
+			async () => {},
+			t("userPlan.downgradeModal.confirm", {
+				planName:
+					conf.planNames[account.billingInfo?.plan.name ?? "basic"],
+			}),
+			t("userPlan.downgradeModal.cancel"),
+			styles.downgradeConfirmation,
+		);
+	};
+
+	return (
+		<PlanCard
+			onDowngrade={onDowngrade}
+			name={t("userPlan.plans.basic.name")}
+			// description={t("userPlan.plans.basic.description")}
+			features={t("userPlan.plans.basic.features", {
+				returnObjects: true,
+			})}
+			additionalFeature={t("userPlan.plans.basic.tokensFeature")}
+			additionalFeatureTooltip={t("userPlan.tokensTooltip")}
+			activationDate={new Intl.DateTimeFormat(i18n.language, {
+				year: "numeric",
+				month: "numeric",
+				day: "numeric",
+			}).format(
+				new Date(account.billingInfo?.plan.endDate ?? 0).getTime() +
+					24 * 60 * 60 * 1000,
+			)}
+			price={t("userPlan.free")}
+			variant="basic"
+			state={getBasicSubState()}
+			isLoading={isLoading}
+		/>
+	);
+}
+
+export function PlusAIPlanCard(): JSX.Element {
+	const { t } = useTranslation();
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+	const { openModalConfirm } = useConfirmModalContext();
+
+	const [plan, setPlan] = useState<billingApi.Plan | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		billingApi
+			.getPlans()
+			.then(({ data }) => {
+				const plusAIPlan = data?.find(({ id }) => id === "plusAI");
+
+				setPlan(plusAIPlan ?? null);
+			})
+			.finally(() => setIsLoading(false));
+	}, [account.isLoggedIn]);
+
+	const getPlusSubState = (): PlanState => {
+		if (
+			!account.billingInfo ||
+			account.billingInfo?.plan.name === "basic"
+		) {
+			return "available";
+		}
+
+		if (account.billingInfo.plan.name === plan?.name) {
+			return "current";
+		}
+
+		if (account.billingInfo.plan.name === "pro") {
+			if (account.billingInfo.plan.status === "pending_cancellation") {
+				return "pending";
+			}
+			return "downgrade";
+		}
+
+		return "available";
+	};
+
+	const onDowngrade = () => {
+		openModalConfirm(
+			<h2 className={styles.downgradeHeading}>
+				{t("userPlan.downgradeModal.heading", {
+					planName: conf.planNames["plusAI"],
+				})}
+			</h2>,
+			<p className={styles.downgradeDesc}>
+				{t("userPlan.downgradeModal.description", {
+					planName: conf.planNames["plusAI"],
+					currentPeriodEnd: new Intl.DateTimeFormat(i18n.language, {
+						year: "numeric",
+						month: "numeric",
+						day: "numeric",
+					}).format(new Date(account.billingInfo?.plan.endDate ?? 0)),
+				})}
+			</p>,
+			async () => {
+				await account.unsubscribe();
+				notify({
+					header: "Тариф обновлен",
+					body: t("userPlan.downgradeModal.description", {
+						planName: conf.planNames["plusAI"],
+						currentPeriodEnd: new Intl.DateTimeFormat(
+							i18n.language,
+							{
+								year: "numeric",
+								month: "numeric",
+								day: "numeric",
+							},
+						).format(
+							new Date(account.billingInfo?.plan.endDate ?? 0),
+						),
+					}),
+				});
+				Promise.resolve();
+			},
+			async () => {},
+			t("userPlan.downgradeModal.confirm", {
+				planName: conf.planNames["plusAI"],
+			}),
+			t("userPlan.downgradeModal.cancel"),
+			styles.downgradeConfirmation,
+		);
+	};
+
+	const handleOpenPaymentModal = async (ev): Promise<void> => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		setModalData({ planName: plan?.name });
+		openModal(SELECT_PAYMENT_MODAL_ID);
+		return;
+	};
+
+	const handleBuyTokens = async (ev): Promise<void> => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		setModalData({
+			mode: "tokens",
+			amount: 1000,
+		});
+
+		openModal(SELECT_PAYMENT_MODAL_ID);
+		return;
+	};
+
+	const isPlusAIPlan = account.billingInfo?.plan.name === plan?.name;
+	const planState = getPlusSubState();
+
+	return (
+		<PlanCard
+			name={t("userPlan.plans.plusAI.name")}
+			// description={t("userPlan.plans.plus.description")}
+			features={t("userPlan.plans.plusAI.features", {
+				returnObjects: true,
+			})}
+			additionalFeature={t("userPlan.plans.plusAI.tokensFeature")}
+			additionalFeatureTooltip={t("userPlan.tokensTooltip")}
+			variant="plus"
+			price={
+				isPlusAIPlan
+					? 8
+					: account.getIsAnnualPayment()
+						? annualToMonthlyPrice(plan?.annualPrice)
+						: plan?.price
+			}
+			isTokenPrice={isPlusAIPlan}
+			oldPrice={
+				!isPlusAIPlan && account.getIsAnnualPayment()
+					? typeof plan?.price === "number"
+						? plan.price
+						: null
+					: null
+			}
+			state={planState}
+			onSubscribe={
+				isPlusAIPlan ? handleBuyTokens : handleOpenPaymentModal
+			}
+			onDowngrade={onDowngrade}
+			isLoading={isLoading}
+			buttonText={isPlusAIPlan ? t("userPlan.buyTokens") : undefined}
+		/>
+	);
+}
+
+export function PlusPlanCard(): JSX.Element {
+	const { t } = useTranslation();
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+	const { openModalConfirm } = useConfirmModalContext();
+
+	const [plan, setPlan] = useState<billingApi.Plan | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		billingApi
+			.getPlans()
+			.then(({ data }) => {
+				const plusPlan = data?.find(({ id }) => id === "plus");
+
+				setPlan(plusPlan ?? null);
+			})
+			.finally(() => setIsLoading(false));
+	}, [account.isLoggedIn]);
+
+	const getPlusSubState = (): PlanState => {
+		if (
+			!account.billingInfo ||
+			account.billingInfo?.plan.name === "basic"
+		) {
+			return "available";
+		}
+
+		if (account.billingInfo.plan.name === plan?.name) {
+			return "current";
+		}
+
+		if (account.billingInfo.plan.name === "pro") {
+			if (account.billingInfo.plan.status === "pending_cancellation") {
+				return "pending";
+			}
+			return "downgrade";
+		}
+
+		return "available";
+	};
+
+	const onDowngrade = () => {
+		openModalConfirm(
+			<h2 className={styles.downgradeHeading}>
+				{t("userPlan.downgradeModal.heading", {
+					planName: conf.planNames["plus"],
+				})}
+			</h2>,
+			<p className={styles.downgradeDesc}>
+				{t("userPlan.downgradeModal.description", {
+					planName: conf.planNames["plus"],
+					currentPeriodEnd: new Intl.DateTimeFormat(i18n.language, {
+						year: "numeric",
+						month: "numeric",
+						day: "numeric",
+					}).format(new Date(account.billingInfo?.plan.endDate ?? 0)),
+				})}
+			</p>,
+			async () => {
+				await account.unsubscribe();
+				notify({
+					header: "Тариф обновлен",
+					body: t("userPlan.downgradeModal.description", {
+						planName: conf.planNames["plus"],
+						currentPeriodEnd: new Intl.DateTimeFormat(
+							i18n.language,
+							{
+								year: "numeric",
+								month: "numeric",
+								day: "numeric",
+							},
+						).format(
+							new Date(account.billingInfo?.plan.endDate ?? 0),
+						),
+					}),
+				});
+				Promise.resolve();
+			},
+			async () => {},
+			t("userPlan.downgradeModal.confirm", {
+				planName: conf.planNames["plus"],
+			}),
+			t("userPlan.downgradeModal.cancel"),
+			styles.downgradeConfirmation,
+		);
+	};
+
+	const handleOpenPaymentModal = async (ev): Promise<void> => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		setModalData({ planName: plan?.name });
+		openModal(SELECT_PAYMENT_MODAL_ID);
+		return;
+	};
+
+	const handleBuyTokens = async (ev): Promise<void> => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		setModalData({
+			mode: "tokens",
+			amount: 1000,
+		});
+
+		openModal(SELECT_PAYMENT_MODAL_ID);
+		return;
+	};
+
+	const isPlusPlan = account.billingInfo?.plan.name === plan?.name;
+	const planState = getPlusSubState();
+
+	return (
+		<PlanCard
+			name={t("userPlan.plans.plus.name")}
+			// description={t("userPlan.plans.plus.description")}
+			features={t("userPlan.plans.plus.features", {
+				returnObjects: true,
+			})}
+			variant="basic"
+			price={
+				isPlusPlan
+					? 6
+					: account.getIsAnnualPayment()
+						? annualToMonthlyPrice(plan?.annualPrice)
+						: plan?.price
+			}
+			additionalFeature={t("userPlan.plans.plus.tokensFeature")}
+			additionalFeatureTooltip={t("userPlan.tokensTooltip")}
+			isTokenPrice={isPlusPlan}
+			oldPrice={
+				!isPlusPlan && account.getIsAnnualPayment()
+					? typeof plan?.price === "number"
+						? plan.price
+						: null
+					: null
+			}
+			state={planState}
+			onSubscribe={handleOpenPaymentModal}
+			onDowngrade={onDowngrade}
+			isLoading={isLoading}
+			buttonText={isPlusPlan ? t("userPlan.buyTokens") : undefined}
+		/>
+	);
+}
+
+export function ProPlanCard() {
+	const { t } = useTranslation();
+	const account = useAccount();
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		billingApi.getPlans().finally(() => setIsLoading(false));
+	}, [account.isLoggedIn]);
+
+	const getProSubState = (): PlanState => {
+		if (
+			!account.billingInfo ||
+			account.billingInfo?.plan.name === "basic" ||
+			account.billingInfo?.plan.name === "plus"
+		) {
+			return "available";
+		}
+
+		if (account.billingInfo.plan.name === "pro") {
+			return "current";
+		}
+
+		return "available";
+	};
+
+	return (
+		<PlanCard
+			name={t("userPlan.plans.pro.name")}
+			// description={t("userPlan.plans.pro.description")}
+			features={t("userPlan.plans.pro.features", {
+				returnObjects: true,
+			})}
+			additionalFeature={t("userPlan.plans.pro.tokensFeature")}
+			price={t("userPlan.customPrice")}
+			variant="pro"
+			contact
+			unlimited
+			isLoading={isLoading}
+			state={getProSubState()}
+		/>
+	);
+}

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

@@ -0,0 +1,206 @@
+.wrapper {
+	padding: 32px 64px;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	align-items: center;
+}
+
+.heading {
+	font-size: 56px;
+	font-weight: 600;
+}
+
+.cards {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+	align-items: stretch;
+	width: 50vw;
+}
+
+@media (max-width: 600px) {
+	.cards {
+		width: 85vw;
+	}
+}
+
+.card {
+	cursor: pointer;
+	width: 100%;
+	height: 100%;
+
+	font-weight: 500;
+	font-size: 18px;
+	line-height: 26px;
+	color: #14151a;
+	background: #ffffff;
+	border: 1px solid #dee0e3;
+	box-shadow:
+		0px 10px 16px -3px rgba(20, 21, 26, 0.08),
+		0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	border-radius: 16px;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 24px;
+	gap: 8px;
+	isolation: isolate;
+
+	> div {
+		text-align: left;
+	}
+
+	.title {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: row;
+		padding: 0px;
+		gap: 12px;
+		width: 100%;
+		.icons {
+			display: flex;
+			padding-top: 4px;
+			gap: 4px;
+		}
+		.text {
+			display: flex;
+			justify-content: space-between;
+		}
+		.main-content {
+			width: 100%;
+		}
+	}
+}
+
+.footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 12px;
+	button {
+		padding: 6px 10px;
+		display: flex;
+		font-family: Manrope;
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.5%;
+		text-align: center;
+		white-space: nowrap;
+		flex: 0 0 auto;
+		width: auto;
+	}
+}
+
+.inline-buttons {
+	width: 100%;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.description {
+	font-family: "Manrope", sans-serif;
+	font-weight: 400;
+	font-size: 16px;
+	color: #0f132499;
+}
+
+.paddingTop {
+	padding-top: 8px;
+}
+
+.back {
+	align-self: flex-start;
+	flex: 1 1;
+	width: auto;
+	padding: 12px 16px;
+}
+
+.cardEnter {
+	overflow: hidden;
+}
+.cardEnterActive {
+	transition: height 400ms ease-in-out;
+}
+.cardExit {
+	overflow: hidden;
+}
+.cardExitActive {
+	transition: height 400ms ease-in-out;
+}
+
+.coins {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	align-content: flex-start;
+	padding: 0px;
+	gap: 12px;
+	padding-bottom: 16px;
+	width: 100%;
+}
+
+.coin {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 9px;
+	gap: 9px;
+	width: 26%;
+
+	background: #ffffff;
+	border: 1px solid #dee0e3;
+	border-radius: 10px;
+
+	flex: none;
+	order: 1;
+	flex-grow: 0;
+}
+
+.coin-title {
+	align-items: flex-start;
+	display: flex;
+	flex-direction: column;
+	padding: 0px;
+	gap: 9px;
+	width: 100%;
+	.main-content {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		width: 100%;
+	}
+}
+
+.active {
+	background: #ecdffb;
+}
+
+.coin.active:hover {
+	background-color: #ecdffb;
+}
+
+.tokenAmountWrapper {
+	margin-bottom: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.tokenAmountInput {
+	width: 100%;
+	max-width: 200px;
+}
+
+.tokenPrice {
+	margin-top: 8px;
+	font-size: 14px;
+	color: var(--text-secondary);
+}