microboard-ui-temp 0.0.3

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

@@ -0,0 +1,145 @@
+.wrapper {
+	padding: 32px 64px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	align-items: center;
+}
+
+.tables {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 20px;
+}
+
+.heading {
+	font-size: 48px;
+	font-weight: 600;
+}
+
+.cards {
+	display: flex;
+	gap: 16px;
+	align-items: stretch;
+}
+
+.cardsScroll {
+	display: block;
+	overflow-x: auto;
+	scrollbar-gutter: stable;
+	width: 85vw;
+	padding-bottom: 4px;
+}
+
+.cardsScroll::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+	height: 6px;
+}
+
+.cardsScroll::-webkit-scrollbar-button {
+	display: none;
+}
+
+.cardsScroll::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.back {
+	align-self: flex-start;
+	flex: 1 1;
+	width: auto;
+	padding: 12px 16px;
+	color: rgba(20, 21, 26, 1);
+	font-size: 16px;
+	font-weight: 500;
+}
+
+.plansBtn {
+	color: rgba(15, 19, 36, 0.6);
+	display: flex;
+	align-items: center;
+	font-size: 14px;
+	font-weight: 500;
+	gap: 8px;
+	align-self: flex-start;
+	cursor: pointer;
+}
+
+@media screen and (max-width: 1028px) {
+	.heading {
+		font-size: 30px;
+		font-weight: 600;
+		align-self: flex-start;
+	}
+
+	.wrapper {
+		padding: 20px 16px;
+	}
+
+	.cardsScroll {
+		width: 100%;
+		padding-bottom: 0;
+	}
+
+	.cards {
+		align-self: stretch;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 16px;
+	}
+
+	.back {
+		align-self: flex-start;
+		flex: 1 1;
+		width: auto;
+		padding: 12px 16px;
+	}
+}
+
+.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;
+}
+
+.annualPayment {
+	display: flex;
+	align-items: center;
+	align-self: flex-start;
+	gap: 8px;
+	cursor: pointer;
+}
+
+.badge {
+	padding: 2px 6px;
+	background-color: rgba(10, 15, 41, 0.04);
+	border-radius: 8px;
+	transition: 0.3s;
+}
+
+.active {
+	background-color: rgba(236, 223, 251, 1);
+}
+
+.switchBtn {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}

package/src/features/UserPlan/UserPlanModal.tsx

@@ -0,0 +1,124 @@
+import type { OpenAIModels } from "App/Connection";
+import { useAccount } from "App/useAccount";
+import { PROFILE_SETTINGS_MODAL_ID } from "features/ProfileSettingsModal";
+import { UiSwitch } from "shared/ui-lib/UiSwitch";
+import clsx from "clsx";
+import React, { useEffect, type MouseEventHandler } from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import {
+	BasicPlanCard,
+	PlusAIPlanCard,
+	PlusPlanCard,
+	ProPlanCard,
+} from "./PlanCards";
+import styles from "./UserPlanModal.module.css";
+import { UserPlanUsage } from "./UserPlanUsage";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { conf } from "microboard-temp";
+
+export const USER_PLAN_MODAL_ID = "USER_PLAN_MODAL_ID";
+
+export function UserPlanModal() {
+	const { openModal } = useUiModalContext();
+	const { t, i18n } = useTranslation();
+	const account = useAccount();
+
+	const currentModelId: OpenAIModels =
+		account.billingInfo?.plan.name === "plusAI" ? "gpt-4o" : "gpt-4o-mini";
+	const currentModel = account.billingInfo?.models.find(
+		({ id }) => id === currentModelId,
+	);
+
+	const handleOpenProfileSettings: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		openModal(PROFILE_SETTINGS_MODAL_ID);
+	};
+
+	useEffect(() => {
+		account.fetchBillingInfo();
+	}, []);
+
+	return (
+		<UiModal modalId={USER_PLAN_MODAL_ID} closeByBgClick={false}>
+			<div className={styles.wrapper}>
+				<h1 className={styles.heading}>{t("userPlan.upgradePlan")}</h1>
+				<UserPlanUsage
+					isFree={account.billingInfo?.plan.name === "basic"}
+					planName={
+						conf.planNames[
+							account.billingInfo?.plan.name ?? "basic"
+						]
+					}
+					status={account.billingInfo?.plan.status ?? "active"}
+					cancellationDate={account.billingInfo?.plan.endDate}
+				/>
+				<UiSwitch
+					options={[
+						{ label: "Monthly", value: false },
+						{
+							label: ({
+								handleClick,
+								btnClass,
+								textClass,
+								activeClass,
+								isActive,
+								value,
+								ref: optionsRefs,
+							}) => (
+								<button
+									key={value.toString()}
+									onClick={handleClick}
+									className={clsx(
+										btnClass,
+										isActive && activeClass,
+									)}
+									ref={ref => optionsRefs.current?.push(ref)}
+								>
+									<span
+										className={clsx(
+											textClass,
+											styles.switchBtn,
+										)}
+									>
+										<span>Annual</span>
+										<span
+											className={clsx(
+												styles.badge,
+												isActive && styles.active,
+											)}
+										>
+											Save 30%
+										</span>
+									</span>
+								</button>
+							),
+							value: true,
+						},
+					]}
+					onChange={val => account.setIsAnnualPayment(val as boolean)}
+					value={account.getIsAnnualPayment()}
+				/>
+				<div className={styles.cardsScroll}>
+					<div className={styles.cards}>
+						<BasicPlanCard />
+						<PlusPlanCard />
+						<PlusAIPlanCard />
+						<ProPlanCard />
+					</div>
+				</div>
+				<UiButton
+					variant="ghostFilled"
+					className={styles.back}
+					onClick={handleOpenProfileSettings}
+					size="lg"
+				>
+					{t("userPlan.backToProfile")}
+				</UiButton>
+			</div>
+		</UiModal>
+	);
+}

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

@@ -0,0 +1,101 @@
+.planUsage {
+	font-size: 16px;
+	color: rgba(15, 19, 36, 0.6);
+	text-align: left;
+	width: 100%;
+}
+
+.planHighlight {
+	font-weight: 600;
+}
+
+.basicPlan {
+	color: #14151a;
+}
+
+.plusPlan {
+	color: #b78af0;
+}
+
+.proPlan {
+	color: #7ccba1;
+}
+
+.planUsageText {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	width: 100%;
+}
+
+.paymentActions {
+	font-size: 16px;
+	color: rgba(15, 19, 36, 0.6);
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	gap: 12px;
+	align-items: center;
+}
+
+@media screen and (max-width: 748px) {
+	.planUsage {
+		font-size: 16px;
+	}
+}
+
+.link {
+	font-family: "Manrope", Arial;
+	font-size: 16px;
+
+	position: relative;
+	color: rgba(15, 19, 36, 0.6);
+	text-decoration: none;
+}
+
+.link:hover {
+	color: #b78af0;
+}
+
+.link::after {
+	content: "";
+	position: absolute;
+	bottom: -3px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: rgba(10, 15, 41, 0.08);
+}
+
+.link:hover::after {
+	content: "";
+	position: absolute;
+	bottom: -3px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: rgba(200, 178, 255, 0.5);
+}
+
+@media screen and (max-width: 640px) {
+	.link::after {
+		content: none;
+	}
+}
+
+.limitsBtn {
+	color: #4778f5;
+	font-size: inherit;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: flex-end;
+	gap: 4px;
+}
+
+.cancel {
+	font-size: 16px;
+	color: rgba(15, 19, 36, 0.6);
+	cursor: pointer;
+	text-decoration: underline;
+}

package/src/features/UserPlan/UserPlanUsage.tsx

@@ -0,0 +1,186 @@
+import { useAccount } from "App/useAccount";
+import clsx from "clsx";
+import { HISTORY_MODAL_ID } from "features/UserPlan/HistoryModal";
+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 styles from "./UserPlanUsage.module.css";
+
+type Props = {
+	cancellationDate?: string | Date;
+	status: "active" | "pending_cancellation";
+	planName: string;
+	isFree: boolean;
+	onCancel?: () => void;
+	history?: boolean;
+	hasHistory?: boolean;
+};
+
+const isTomorrow = (date: Date): boolean => {
+	const today = new Date();
+	const tomorrow = new Date(today);
+	tomorrow.setDate(today.getDate() + 1);
+	return (
+		date.getDate() === tomorrow.getDate() &&
+		date.getMonth() === tomorrow.getMonth() &&
+		date.getFullYear() === tomorrow.getFullYear()
+	);
+};
+
+export function UserPlanUsage({
+	cancellationDate,
+	status,
+	planName,
+	isFree = true,
+	onCancel,
+	history,
+	hasHistory,
+}: Props) {
+	const { t, i18n } = useTranslation();
+	const { openModal } = useUiModalContext();
+	const account = useAccount();
+
+	const handleOpenLimitsModal = () => openModal(LIMITS_MODAL_ID);
+	const handleOpenHistoryModal = () => openModal(HISTORY_MODAL_ID);
+
+	const formattedCancellationDate = new Intl.DateTimeFormat(i18n.language, {
+		year: "numeric",
+		month: "numeric",
+		day: "numeric",
+	}).format(new Date(cancellationDate ?? Date.now()));
+	const previousCancellationDate = new Date(
+		new Date(cancellationDate ?? Date.now()).setDate(
+			new Date(cancellationDate ?? Date.now()).getDate() - 1,
+		),
+	);
+
+	const formattedPreviousCancellationDate = new Intl.DateTimeFormat(
+		i18n.language,
+		{
+			year: "numeric",
+			month: "numeric",
+			day: "numeric",
+		},
+	).format(previousCancellationDate);
+
+	const tokensBalance = account.billingInfo?.tokens.totalTokensBalance || 0;
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.planUsageText}>
+				<p className={styles.planUsage}>
+					{isFree ? (
+						<>
+							{t("userPlan.currentPlanFree.part1")}
+							<span
+								className={clsx(
+									styles.planHighlight,
+									styles.basicPlan,
+								)}
+							>
+								{t("userPlan.plans.basic.name")}
+							</span>
+							{t("userPlan.currentPlanFree.part2", {
+								tokensBalance,
+							})}{" "}
+							{!history && (
+								<span
+									className={styles.limitsBtn}
+									onClick={handleOpenLimitsModal}
+								>
+									{" "}
+									{t("userPlan.limits")}{" "}
+									<Icon
+										width={24}
+										height={24}
+										iconName="ArrowRightSm"
+									/>
+								</span>
+							)}
+						</>
+					) : (
+						<>
+							{status === "pending_cancellation" ? (
+								<>
+									{t("userPlan.currentPlanPending.part1")}
+									<span
+										className={clsx(styles.planHighlight, {
+											[styles.plusPlan]:
+												planName === "Plus",
+											[styles.proPlan]:
+												planName === "Pro",
+										})}
+									>
+										{planName}
+									</span>
+									{t("userPlan.currentPlanPending.part2", {
+										cancellationDate:
+											formattedCancellationDate,
+										tokensBalance,
+									})}
+								</>
+							) : (
+								<>
+									{t("userPlan.currentPlanActive.part1")}
+									<span
+										className={clsx(styles.planHighlight, {
+											[styles.plusPlan]:
+												planName === "Plus",
+											[styles.proPlan]:
+												planName === "Pro",
+										})}
+									>
+										{planName}
+									</span>
+									{t("userPlan.currentPlanActive.part2", {
+										cancellationDate:
+											formattedPreviousCancellationDate,
+										tokensBalance,
+									})}
+								</>
+							)}
+						</>
+					)}{" "}
+					{history
+						? hasHistory && (
+								<span
+									onClick={handleOpenHistoryModal}
+									className={styles.limitsBtn}
+								>
+									{t("userPlan.paymentHistoryHeading")}
+									{!isFree && "."}
+								</span>
+							)
+						: !isFree && (
+								<span
+									className={styles.limitsBtn}
+									onClick={handleOpenLimitsModal}
+								>
+									{status === "active"
+										? t("userPlan.nextPayment", {
+												paymentDate:
+													formattedCancellationDate,
+											})
+										: t("userPlan.limits")}
+									<Icon
+										width={24}
+										height={24}
+										iconName="ArrowRightSm"
+									/>
+								</span>
+							)}
+				</p>
+
+				<p className={styles.paymentActions}>
+					{status === "active" && onCancel && (
+						<span onClick={onCancel} className={styles.cancel}>
+							{t("userPlan.cancelPayment")}
+						</span>
+					)}{" "}
+				</p>
+			</div>
+		</div>
+	);
+}

package/src/features/UserPlan/index.ts

@@ -0,0 +1 @@
+export { USER_PLAN_MODAL_ID, UserPlanModal } from "./UserPlanModal";

package/src/features/VideoPlayer/VideoCanvasControls.tsx

@@ -0,0 +1,59 @@
+import React, { useRef } from "react";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useAppContext } from "features/AppContext";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { createPortal } from "react-dom";
+
+export const VideoCanvasControls = () => {
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["pointer"],
+		observer: () => forceUpdate(),
+	});
+	const playBtnRef = useRef<HTMLDivElement>(null);
+	const hoveredItem = board.items.getUnderPointer().pop();
+	const getCanvasPlayBtnMbr = () => {
+		if (
+			hoveredItem &&
+			hoveredItem.itemType === "Video" &&
+			hoveredItem.getShouldShowControls() &&
+			hoveredItem.getPreviewUrl()
+		) {
+			return hoveredItem
+				.getPlayBtnMbr()
+				.getTransformed(board.camera.getMatrix());
+		}
+		return undefined;
+	};
+	const mbr = getCanvasPlayBtnMbr();
+
+	const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
+		event.stopPropagation();
+		if (hoveredItem && hoveredItem.itemType === "Video") {
+			hoveredItem.setIsPlaying(true);
+		}
+	};
+
+	if (!mbr) {
+		return null;
+	}
+
+	return createPortal(
+		<div
+			ref={playBtnRef}
+			style={{
+				position: "fixed",
+				cursor: "pointer",
+				top: mbr.top,
+				left: mbr.left,
+				width: mbr.getWidth(),
+				height: mbr.getHeight(),
+				zIndex: 3,
+			}}
+			onClick={onClick}
+		></div>,
+		document.body,
+	);
+};

package/src/features/VideoPlayer/VideoPlayer.module.css

@@ -0,0 +1,3 @@
+.container {
+	position: absolute;
+}