microboard-ui-temp 0.0.3

package/src/features/UserPanel/UserPic/UserPic.tsx

@@ -0,0 +1,171 @@
+import { useAccount } from "App/useAccount";
+import { PresenceUser } from "microboard-temp";
+import { useCommentsPanelContext } from "entities/comments/CommentsPanel/CommentsPanelContext";
+import { useAppContext } from "features/AppContext";
+import {
+	FollowingUsersCount,
+	User,
+} from "features/Presence/PresenceUsers/PresenceUsers";
+import { PROFILE_SETTINGS_MODAL_ID } from "features/ProfileSettingsModal";
+import { USER_PLAN_MODAL_ID } from "features/UserPlan";
+import React, { MouseEventHandler, RefObject, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { Logout } from "../icons/Logout";
+import { UserAvatar } from "../UserAvatar/UserAvatar";
+import { UserDropDown } from "../UserDropdown/UserDropdown";
+import styles from "../UserPanel.module.css";
+
+interface UserDropDownProps extends React.HTMLAttributes<HTMLDivElement> {
+	email?: string;
+	isOpen: boolean;
+	setIsDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	buttons: React.ReactNode[];
+	openerRef?: RefObject<HTMLDivElement>;
+	customTop?: number;
+}
+
+interface UserPicProps extends React.HTMLAttributes<HTMLDivElement> {
+	avatar?: string;
+	followers: PresenceUser[];
+	presenceUsers: User[];
+	isDropdownOpen: boolean;
+	setIsDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+type TUserPicProps = UserPicProps &
+	Omit<
+		UserDropDownProps,
+		"isOpen" | "setIsDropdownOpen" | "buttons" | "openerRef" | "customTop"
+	>;
+
+export const UserPic: React.FC<TUserPicProps> = ({ ...props }) => {
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const { setIsPanelOpen } = useCommentsPanelContext();
+	const userPanelRef = useRef<HTMLDivElement>(null);
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+	const navigate = useNavigate();
+	const boardId = board.getBoardId();
+	const isOwner = account.permissions.checkPermissions(
+		"owns",
+		"boards",
+		boardId,
+	);
+
+	const handleOpenProfileSettings: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		openModal(PROFILE_SETTINGS_MODAL_ID);
+	};
+
+	const handlePlanModalOpen: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		openModal(USER_PLAN_MODAL_ID);
+	};
+
+	const handleLogout: MouseEventHandler = async ev => {
+		ev.stopPropagation();
+		await account.logout();
+		navigate("/");
+	};
+
+	const handleOpenSupport: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		window.open("https://x.com/Microboard_io", "_blank");
+	};
+
+	return (
+		<>
+			<div
+				className={styles.userPicWrapper}
+				{...props}
+				ref={userPanelRef}
+				onClick={event => {
+					event.stopPropagation();
+					if (!props.isDropdownOpen) {
+						props.setIsDropdownOpen(true);
+						setIsPanelOpen(false);
+					} else {
+						props.setIsDropdownOpen(false);
+						setIsPanelOpen(false);
+					}
+				}}
+			>
+				<UserAvatar
+					src={account.info?.avatar}
+					isOwner={isOwner}
+					tooltip={!props.isDropdownOpen}
+					name={account.info?.name}
+				/>
+				<FollowingUsersCount followers={props.followers} />
+			</div>
+
+			<UserDropDown
+				openerRef={userPanelRef}
+				isOpen={props.isDropdownOpen}
+				setIsDropdownOpen={props.setIsDropdownOpen}
+				email={props.email}
+				followers={props.followers}
+				presenceUsers={props.presenceUsers}
+				buttons={[
+					<UiButton
+						type="button"
+						key="userDropDown1"
+						onClick={handlePlanModalOpen}
+						variant="ghost"
+						size="lg"
+					>
+						<Icon iconName="ArrowUpCircle" width={20} height={20} />{" "}
+						<span className={styles.userDropDownButton}>
+							{t("userPlan.upgradePlan")}
+						</span>
+					</UiButton>,
+					<UiButton
+						type="button"
+						key="userDropDown2"
+						onClick={handleOpenProfileSettings}
+						variant="ghost"
+						size="lg"
+					>
+						<Icon width={20} height={20} iconName="human" />{" "}
+						<span className={styles.userDropDownButton}>
+							{t("profile.title")}
+						</span>
+					</UiButton>,
+					<UiButton
+						type="button"
+						key="userDropDown2"
+						onClick={handleOpenSupport}
+						variant="ghost"
+						size="lg"
+					>
+						<Icon width={20} height={20} iconName="support" />{" "}
+						<span className={styles.userDropDownButton}>
+							{t("profile.support")}
+						</span>
+					</UiButton>,
+					<UiButton
+						type="button"
+						key="userDropDown3"
+						onClick={handleLogout}
+						variant="ghost"
+						size="lg"
+					>
+						<Logout />
+						<span className={styles.userDropDownButton}>
+							{t("profile.logout")}
+						</span>
+					</UiButton>,
+				]}
+			/>
+		</>
+	);
+};

package/src/features/UserPanel/icons/ChangePassword.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const ChangePassword = () => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M18.5563 9.3525C18.2415 9.03769 17.7415 9.03769 17.4452 9.3525L16.6674 10.1303V10.0007C16.6674 6.31547 13.6674 3.33398 10.0007 3.33398C8.24147 3.33398 6.5748 4.01917 5.31554 5.25991C5.00072 5.57472 5.00072 6.07473 5.31554 6.37102C5.63035 6.68584 6.13035 6.68584 6.42665 6.37102C7.38961 5.42658 8.64887 4.90806 10.0007 4.90806C12.797 4.90806 15.0933 7.18584 15.0933 10.0007V10.1303L14.3155 9.3525C14.0007 9.03769 13.5007 9.03769 13.2044 9.3525C12.9081 9.66732 12.8896 10.1673 13.2044 10.4636L15.3155 12.5932C15.4637 12.7414 15.6674 12.834 15.8711 12.834C16.0748 12.834 16.2785 12.7599 16.4267 12.5932L18.5563 10.4636C18.8711 10.1488 18.8711 9.6488 18.5563 9.3525Z"
+				fill="#696B76"
+			/>
+			<path
+				d="M13.5747 13.6117C12.6118 14.5561 11.3525 15.0747 10.0007 15.0747C7.20436 15.0747 4.90806 12.7969 4.90806 9.98206V9.85243L5.68584 10.6302C5.83399 10.7784 6.03769 10.8709 6.24139 10.8709C6.4451 10.8709 6.6488 10.7969 6.79695 10.6302C7.11176 10.3154 7.11176 9.81539 6.79695 9.5191L4.68584 7.40799C4.37102 7.09317 3.87102 7.09317 3.57473 7.40799L1.4451 9.53762C1.13028 9.85243 1.13028 10.3524 1.4451 10.6487C1.75991 10.945 2.25991 10.9635 2.55621 10.6487L3.33398 9.87095V10.0006C3.33398 13.6858 6.33399 16.6672 10.0007 16.6672C11.7599 16.6672 13.4266 15.9821 14.6858 14.7413C15.0007 14.4265 15.0007 13.9265 14.6858 13.6302C14.3895 13.3154 13.8895 13.3154 13.5747 13.6117Z"
+				fill="#696B76"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/Click.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const Click = () => {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M3.28421 4.30174C3.55182 4.02741 3.95268 3.93015 4.31625 4.05135L20.3163 9.38468C20.7064 9.51472 20.9771 9.8703 20.9987 10.2809C21.0202 10.6916 20.7882 11.0736 20.4138 11.2437L20.36 11.2682L20.2042 11.3396C20.069 11.4015 19.8742 11.4912 19.636 11.6017C19.1595 11.8227 18.5109 12.1262 17.8216 12.4571C16.4106 13.1344 14.9278 13.8797 14.3325 14.2765C14.3325 14.2765 14.3258 14.2809 14.308 14.2965C14.2906 14.3118 14.2673 14.3339 14.2382 14.3646C14.1791 14.4267 14.1072 14.5123 14.0231 14.6243C13.8542 14.8496 13.6622 15.1471 13.4541 15.5039C13.0384 16.2164 12.5946 17.1024 12.1833 17.98C11.7735 18.8541 11.4038 19.7031 11.136 20.3348C11.0023 20.6502 10.8944 20.9105 10.8201 21.0915C10.783 21.182 10.7543 21.2525 10.735 21.3002L10.7132 21.3542L10.7066 21.3707C10.5524 21.7561 10.1759 22.0069 9.76082 21.9999C9.34577 21.9928 8.97824 21.7301 8.83725 21.3397L3.05947 5.33967C2.92931 4.97922 3.0166 4.57607 3.28421 4.30174ZM9.85395 18.2666C10.0153 17.9043 10.1898 17.5206 10.3723 17.1312C10.7943 16.231 11.2672 15.2836 11.7265 14.4962C11.9559 14.103 12.191 13.7338 12.4231 13.4243C12.6416 13.133 12.9114 12.8202 13.2231 12.6124C13.9612 12.1204 15.5894 11.3101 16.9562 10.6541C17.0731 10.5979 17.1888 10.5426 17.3027 10.4883L5.64145 6.60126L9.85395 18.2666Z"
+				fill="#14151A"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/Logout.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const Logout = () => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M4.15951 18.3327C3.93849 18.3327 3.72653 18.2449 3.57025 18.0886C3.41397 17.9323 3.32617 17.7204 3.32617 17.4993V2.49935C3.32617 2.27834 3.41397 2.06637 3.57025 1.91009C3.72653 1.75381 3.93849 1.66602 4.15951 1.66602H15.8262C16.0472 1.66602 16.2591 1.75381 16.4154 1.91009C16.5717 2.06637 16.6595 2.27834 16.6595 2.49935V4.99935H14.9928V3.33268H4.99284V16.666H14.9928V14.9993H16.6595V17.4993C16.6595 17.7204 16.5717 17.9323 16.4154 18.0886C16.2591 18.2449 16.0472 18.3327 15.8262 18.3327H4.15951Z"
+				fill="#696B76"
+			/>
+			<path
+				d="M18.9487 10.4904C19.0837 10.3602 19.1595 10.1835 19.1595 9.99936C19.1595 9.81519 19.0837 9.63856 18.9487 9.50832L16.4298 7.07776C16.1487 6.80655 15.693 6.80655 15.412 7.07776C15.1309 7.34894 15.1309 7.78866 15.412 8.05984L16.7023 9.30491H11.9436C11.5461 9.30491 11.2239 9.61582 11.2239 9.99936C11.2239 10.3829 11.5461 10.6938 11.9436 10.6938H16.7023L15.412 11.9389C15.1309 12.2101 15.1309 12.6498 15.412 12.921C15.693 13.1922 16.1487 13.1922 16.4298 12.921L18.9487 10.4904Z"
+				fill="#696B76"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/Ring.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const Ring = () => {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M18 10C18 8.4087 17.3679 6.88258 16.2426 5.75736C15.1174 4.63214 13.5913 4 12 4C10.4087 4 8.88258 4.63214 7.75736 5.75736C6.63214 6.88258 6 8.4087 6 10V18H18V10ZM20 18.667L20.4 19.2C20.4557 19.2743 20.4896 19.3626 20.498 19.4551C20.5063 19.5476 20.4887 19.6406 20.4472 19.7236C20.4057 19.8067 20.3419 19.8765 20.2629 19.9253C20.1839 19.9741 20.0929 20 20 20H4C3.90714 20 3.81612 19.9741 3.73713 19.9253C3.65815 19.8765 3.59431 19.8067 3.55279 19.7236C3.51126 19.6406 3.49368 19.5476 3.50202 19.4551C3.51036 19.3626 3.54429 19.2743 3.6 19.2L4 18.667V10C4 7.87827 4.84286 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10V18.667ZM9.5 21H14.5C14.5 21.663 14.2366 22.2989 13.7678 22.7678C13.2989 23.2366 12.663 23.5 12 23.5C11.337 23.5 10.7011 23.2366 10.2322 22.7678C9.76339 22.2989 9.5 21.663 9.5 21Z"
+				fill="#14151A"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/Thumb.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const Thumb = () => {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M14.6 8.00039H21C21.5304 8.00039 22.0391 8.21111 22.4142 8.58618C22.7893 8.96125 23 9.46996 23 10.0004V12.1044C23.0003 12.3658 22.9493 12.6246 22.85 12.8664L19.755 20.3814C19.6795 20.5646 19.5513 20.7213 19.3866 20.8315C19.2219 20.9417 19.0282 21.0005 18.83 21.0004H2C1.73478 21.0004 1.48043 20.895 1.29289 20.7075C1.10536 20.52 1 20.2656 1 20.0004V10.0004C1 9.73518 1.10536 9.48082 1.29289 9.29329C1.48043 9.10575 1.73478 9.00039 2 9.00039H5.482C5.6421 9.00043 5.79986 8.96203 5.94203 8.88843C6.0842 8.81482 6.20662 8.70815 6.299 8.57739L11.752 0.850392C11.8209 0.752705 11.9226 0.682953 12.0385 0.653782C12.1545 0.624612 12.277 0.637955 12.384 0.691392L14.198 1.59839C14.7085 1.85355 15.1163 2.27571 15.3537 2.79471C15.5911 3.31371 15.6438 3.89831 15.503 4.45139L14.6 8.00039ZM7 10.5884V19.0004H18.16L21 12.1044V10.0004H14.6C14.2954 10.0003 13.9948 9.93073 13.7212 9.79685C13.4476 9.66297 13.2082 9.46836 13.0213 9.22788C12.8343 8.98739 12.7048 8.70739 12.6425 8.40922C12.5803 8.11105 12.5869 7.80259 12.662 7.50739L13.565 3.95939C13.5933 3.84872 13.5828 3.73171 13.5353 3.62782C13.4878 3.52393 13.4062 3.43944 13.304 3.38839L12.643 3.05839L7.933 9.73039C7.683 10.0844 7.363 10.3744 7 10.5884ZM5 11.0004H3V19.0004H5V11.0004Z"
+				fill="#14151A"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/Upgrade.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const Upgrade = () => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M18.3327 9.99935C18.3327 5.39935 14.5993 1.66602 9.99935 1.66602C5.39935 1.66602 1.66602 5.39935 1.66602 9.99935C1.66602 14.5993 5.39935 18.3327 9.99935 18.3327C14.5993 18.3327 18.3327 14.5993 18.3327 9.99935ZM16.666 9.99935C16.666 13.6827 13.6827 16.666 9.99935 16.666C6.31602 16.666 3.33268 13.6827 3.33268 9.99935C3.33268 6.31602 6.31602 3.33268 9.99935 3.33268C13.6827 3.33268 16.666 6.31602 16.666 9.99935ZM9.99936 6.03166C10.1835 6.03166 10.3602 6.10748 10.4904 6.24246L12.921 8.7614C13.1922 9.04244 13.1922 9.49815 12.921 9.77919C12.6498 10.0603 12.2101 10.0603 11.9389 9.77919L10.6938 8.48885V13.2476C10.6938 13.6451 10.3829 13.9673 9.99936 13.9673C9.61582 13.9673 9.30491 13.6451 9.30491 13.2476V8.48885L8.05984 9.77919C7.78866 10.0603 7.34894 10.0603 7.07776 9.77919C6.80655 9.49815 6.80655 9.04244 7.07776 8.7614L9.50832 6.24246C9.63856 6.10748 9.81519 6.03166 9.99936 6.03166Z"
+				fill="#696B76"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPanel/icons/UserShare.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export const UserShare = () => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.00065 14.666C1.63246 14.666 1.32968 14.3664 1.37558 14.0011C1.52249 12.8318 2.05392 11.7369 2.89608 10.8948C3.89628 9.89459 5.25283 9.33268 6.66732 9.33268C8.08181 9.33268 9.43836 9.89459 10.4386 10.8948C11.2807 11.7369 11.8121 12.8318 11.9591 14.0011C12.005 14.3664 11.7022 14.666 11.334 14.666C10.9658 14.666 10.673 14.3655 10.6119 14.0024C10.4748 13.1877 10.0876 12.4295 9.49574 11.8376C8.7456 11.0874 7.72818 10.666 6.66732 10.666C5.60645 10.666 4.58904 11.0874 3.83889 11.8376C3.24702 12.4295 2.85979 13.1877 2.72273 14.0024C2.66165 14.3655 2.36884 14.666 2.00065 14.666ZM6.66732 8.66602C4.45732 8.66602 2.66732 6.87602 2.66732 4.66602C2.66732 2.45602 4.45732 0.666016 6.66732 0.666016C8.87732 0.666016 10.6673 2.45602 10.6673 4.66602C10.6673 6.87602 8.87732 8.66602 6.66732 8.66602ZM6.66732 7.33268C8.14065 7.33268 9.33398 6.13935 9.33398 4.66602C9.33398 3.19268 8.14065 1.99935 6.66732 1.99935C5.19398 1.99935 4.00065 3.19268 4.00065 4.66602C4.00065 6.13935 5.19398 7.33268 6.66732 7.33268ZM11.9163 10.4095C12.0674 10.0736 12.4651 9.92052 12.7794 10.1124C13.461 10.5287 14.0431 11.0943 14.4797 11.7698C14.9164 12.4455 15.193 13.2086 15.2925 14.0012C15.3383 14.3664 15.0356 14.666 14.6674 14.666C14.2992 14.666 14.0064 14.3654 13.9453 14.0023C13.8554 13.4671 13.6571 12.9534 13.36 12.4937C13.0629 12.034 12.676 11.6422 12.2249 11.3403C11.919 11.1356 11.7651 10.7452 11.9163 10.4095ZM11.5196 3.01573C11.6325 2.62069 12.0691 2.40846 12.4079 2.64084C12.79 2.90295 13.121 3.23649 13.3813 3.6255C13.7854 4.2293 14.0009 4.93951 14.0007 5.66602C14.0009 6.5809 13.6591 7.46283 13.0423 8.13857C12.5952 8.62842 12.0271 8.98425 11.4012 9.17457C11.0164 9.2916 10.6673 8.97117 10.6673 8.56895C10.6673 8.2287 10.9235 7.95004 11.2374 7.81867C11.5106 7.70429 11.7613 7.53821 11.9749 7.32765C12.3302 6.97728 12.5638 6.52223 12.6414 6.02931C12.7191 5.53638 12.6366 5.03155 12.4062 4.58892C12.2652 4.31799 12.0733 4.07911 11.8428 3.88428C11.5881 3.66895 11.428 3.33645 11.5196 3.01573Z"
+				fill="white"
+			/>
+		</svg>
+	);
+};

package/src/features/UserPlan/HistoryModal.tsx

@@ -0,0 +1,30 @@
+import { HistoryTable } from "features/UserPlan/HistoryTable";
+import { LIMITS_MODAL_ID } from "features/UserPlan/LimitsModal";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import styles from "./UserPlanModal.module.css";
+export const HISTORY_MODAL_ID = Symbol("historyModal");
+
+export function HistoryModal() {
+	const { t } = useTranslation();
+	const { openModal } = useUiModalContext();
+	const handleBackButton = () => openModal(LIMITS_MODAL_ID);
+
+	return (
+		<UiModal modalId={HISTORY_MODAL_ID} closeByBgClick={false}>
+			<div className={styles.wrapper}>
+				<h1 className={styles.heading}>
+					{t("userPlan.paymentHistoryHeading")}
+				</h1>
+				<HistoryTable />
+				<button className={styles.plansBtn} onClick={handleBackButton}>
+					<Icon iconName="ArrowLeft1" />
+					{t("userPlan.backToCurrentPlan")}
+				</button>
+			</div>
+		</UiModal>
+	);
+}

package/src/features/UserPlan/HistoryTable.tsx

@@ -0,0 +1,114 @@
+import { useAccount } from "App/useAccount";
+import React from "react";
+import styles from "./LimitsTable.module.css";
+import { useTranslation } from "react-i18next";
+import { conf } from "microboard-temp";
+const { i18n } = conf;
+
+const PAYMENT_TYPE_DISPLAYNAME = {
+	card: "Card",
+	crypto: "Crypto",
+};
+
+// Plan display name mapping
+const PLAN_DISPLAYNAME = {
+	plus: "Plus Subscription",
+	"Token Purchase": "Token Purchase",
+};
+
+export function HistoryTable() {
+	const account = useAccount();
+	const historyRecords = account.billingHistory.filter(
+		entry => entry.planId !== "basic",
+	);
+	const { t } = useTranslation();
+
+	return (
+		<table className={styles.table}>
+			<thead>
+				<tr className={styles.header}>
+					<th className={styles.modelsHeading}>
+						{t("userPlan.historyTable.plan")}
+					</th>
+					<th>{t("userPlan.historyTable.paymentDate")}</th>
+					<th>{t("userPlan.historyTable.price")}</th>
+					<th>{t("userPlan.historyTable.paymentType")}</th>
+				</tr>
+			</thead>
+			{historyRecords?.map(
+				({
+					id,
+					startDate,
+					endDate,
+					planName,
+					price,
+					symbol,
+					paymentType,
+				}) => (
+					<ModelRow
+						key={id}
+						name={planName}
+						startDate={startDate}
+						endDate={endDate}
+						price={price}
+						paymentType={paymentType}
+						symbol={symbol}
+					/>
+				),
+			)}
+		</table>
+	);
+}
+
+const centToUsd = (cents: number) => cents / 100;
+
+const formatDate = (date: string) =>
+	new Intl.DateTimeFormat(i18n.language, {
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+	}).format(new Date(date ?? Date.now()));
+
+type ModelRowProps = {
+	name: string;
+	startDate: string;
+	endDate: string;
+	price: number;
+	paymentType: "card" | "crypto";
+	symbol?: string;
+};
+
+function ModelRow({
+	endDate,
+	name,
+	startDate,
+	price,
+	paymentType,
+	symbol,
+}: ModelRowProps) {
+	const { t } = useTranslation();
+
+	const getPlanDisplayName = (planName: string) => {
+		return i18n.language === "ru"
+			? t(`userPlan.historyTable.planDisplayName.${planName}`, planName)
+			: PLAN_DISPLAYNAME[planName] || planName;
+	};
+
+	return (
+		<tr>
+			<td className={styles.model}>
+				<p className={styles.modelName}>{getPlanDisplayName(name)}</p>
+				<p className={styles.modelDescription}>
+					{formatDate(startDate)} - {formatDate(endDate)}
+				</p>
+			</td>
+			<td>{formatDate(startDate)}</td>
+			<td>
+				{paymentType === "card"
+					? `$${centToUsd(price)}`
+					: `${price} ${symbol}`}
+			</td>
+			<td>{PAYMENT_TYPE_DISPLAYNAME[paymentType]}</td>
+		</tr>
+	);
+}

package/src/features/UserPlan/LimitsModal.tsx

@@ -0,0 +1,102 @@
+import { useAccount } from "App/useAccount";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import { useConfirmModalContext } from "features/Modal/ConfirmModal";
+import { notify } from "shared/ui-lib/Toast";
+import { LimitsTable } from "features/UserPlan/LimitsTable";
+import { USER_PLAN_MODAL_ID } from "features/UserPlan/UserPlanModal";
+import { UserPlanUsage } from "features/UserPlan/UserPlanUsage";
+import styles from "./UserPlanModal.module.css";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { conf } from "microboard-temp";
+
+export const LIMITS_MODAL_ID = Symbol("limitsModal");
+
+export function LimitsModal() {
+	const { t, i18n } = useTranslation();
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+	const handleBackButton = () => openModal(USER_PLAN_MODAL_ID);
+	const { openModalConfirm } = useConfirmModalContext();
+
+	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: "Автоматическое продление отменено",
+				});
+				Promise.resolve();
+			},
+			async () => {},
+			t("userPlan.downgradeModal.confirm", {
+				planName:
+					conf.planNames[account.billingInfo?.plan.name ?? "basic"],
+			}),
+			t("userPlan.downgradeModal.cancel"),
+			styles.downgradeConfirmation,
+		);
+	};
+
+	return (
+		<UiModal modalId={LIMITS_MODAL_ID} closeByBgClick={false}>
+			<div className={styles.wrapper}>
+				<h1 className={styles.heading}>
+					{t("userPlan.currentPlanHeading")}
+				</h1>
+				<UserPlanUsage
+					cancellationDate={account.billingInfo?.plan.endDate}
+					planName={
+						conf.planNames[
+							account.billingInfo?.plan.name ?? "basic"
+						]
+					}
+					isFree={account.billingInfo?.plan.name === "basic"}
+					history
+					hasHistory={
+						account.billingHistory.filter(
+							entry => entry.planId !== "basic",
+						).length > 0
+					}
+					onCancel={
+						account.billingInfo?.plan.name !== "basic"
+							? onDowngrade
+							: undefined
+					}
+					status={account.billingInfo?.plan.status ?? "active"}
+				/>
+				<main className={styles.tables}>
+					<LimitsTable />
+				</main>
+				<button className={styles.plansBtn} onClick={handleBackButton}>
+					<Icon iconName="ArrowLeft1" />
+					{t("userPlan.backToPlans")}
+				</button>
+			</div>
+		</UiModal>
+	);
+}