mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-10-16 02:44:59 +03:00
feat(sponsors): drop the sidebar slot and simplify the Sponsors page
The sidebar no longer carries a sponsor card. The backend stops serving the "sidebar" slot, so a sponsors.json entry that still lists it keeps only its other slots and one listing nothing else is dropped. Its rotation, three-sponsor cap and collapsed-rail logo rendering go with it. The Sponsors page now lists only real sponsors: the "Your brand here" card shows only as the empty state instead of sitting in the grid and repeating the header's Become a sponsor button, and the Available placements section and its slot-occupancy helper are removed. Cards are larger, two per row on wide screens. Unused i18n keys are dropped from every locale.
This commit is contained in:
MHSanaei
@@ -184,28 +184,37 @@
|
||||
.sponsor-card-card .sponsor-main {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-logo-fallback {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-title {
|
||||
font-size: 17px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.sponsor-card-card .sponsor-visit {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sponsor-card-icon {
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sponsor-card-icon .sponsor-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
|
||||
@@ -7,7 +7,7 @@ import SponsorCard from './SponsorCard';
|
||||
const sponsor: Sponsor = {
|
||||
id: 'acme-2026-10',
|
||||
name: 'Acme VPS',
|
||||
slots: ['dashboard', 'sidebar', 'page', 'login'],
|
||||
slots: ['dashboard', 'page', 'login'],
|
||||
until: '2099-01-01T00:00:00Z',
|
||||
title: { en: 'Acme VPS — fast NVMe servers', fa: 'سرورهای سریع Acme' },
|
||||
text: { en: 'Deploy 3X-UI in 60 seconds. 20% off for panel users.' },
|
||||
@@ -57,9 +57,8 @@ const meta = {
|
||||
argTypes: {
|
||||
sponsor: { description: 'Sponsor entry from GET /sponsors.' },
|
||||
variant: {
|
||||
description: 'banner (dashboard), compact (sidebar/login) or card (Sponsors page).',
|
||||
description: 'banner (dashboard), compact (login) or card (Sponsors page).',
|
||||
},
|
||||
iconOnly: { description: 'Logo-only rendering for the collapsed sidebar rail.' },
|
||||
onClose: { description: 'When set, shows a close button (temporary dismiss).' },
|
||||
},
|
||||
args: { sponsor },
|
||||
@@ -81,7 +80,7 @@ export const Banner: Story = {
|
||||
export const Compact: Story = {
|
||||
args: { variant: 'compact', onClose: () => {} },
|
||||
render: (args) => (
|
||||
<div style={{ width: 204 }}>
|
||||
<div style={{ width: 334 }}>
|
||||
<SponsorCard {...args} />
|
||||
</div>
|
||||
),
|
||||
@@ -108,23 +107,6 @@ export const BannerLongCopy: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const SidebarLongCopy: Story = {
|
||||
args: { variant: 'compact', sponsor: longSponsor, onClose: () => {} },
|
||||
render: (args) => (
|
||||
<div style={{ width: 204 }}>
|
||||
<SponsorCard {...args} />
|
||||
</div>
|
||||
),
|
||||
play: async ({ canvasElement }) => {
|
||||
await expectNotClipped(canvasElement, '.sponsor-title');
|
||||
await expectInsideCard(canvasElement, '.sponsor-text');
|
||||
await expect(part(canvasElement, '.sponsor-main')).toHaveAttribute(
|
||||
'title',
|
||||
`${longSponsor.title.en}\n${longSponsor.text.en}`,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const LoginLongCopy: Story = {
|
||||
args: { variant: 'compact', sponsor: longSponsor, onClose: () => {} },
|
||||
render: (args) => (
|
||||
@@ -135,6 +117,10 @@ export const LoginLongCopy: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
await expectNotClipped(canvasElement, '.sponsor-title');
|
||||
await expectNotClipped(canvasElement, '.sponsor-text');
|
||||
await expect(part(canvasElement, '.sponsor-main')).toHaveAttribute(
|
||||
'title',
|
||||
`${longSponsor.title.en}\n${longSponsor.text.en}`,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -151,7 +137,3 @@ export const PageLongCopy: Story = {
|
||||
await expectNotClipped(canvasElement, '.sponsor-title');
|
||||
},
|
||||
};
|
||||
|
||||
export const IconOnly: Story = {
|
||||
args: { iconOnly: true },
|
||||
};
|
||||
|
||||
@@ -12,7 +12,6 @@ export type SponsorCardVariant = 'banner' | 'compact' | 'card';
|
||||
export interface SponsorCardProps {
|
||||
sponsor: Sponsor;
|
||||
variant?: SponsorCardVariant;
|
||||
iconOnly?: boolean;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
@@ -36,33 +35,13 @@ function SponsorLogo({ sponsor }: { sponsor: Sponsor }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function SponsorCard({
|
||||
sponsor,
|
||||
variant = 'banner',
|
||||
iconOnly = false,
|
||||
onClose,
|
||||
}: SponsorCardProps) {
|
||||
export default function SponsorCard({ sponsor, variant = 'banner', onClose }: SponsorCardProps) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const lang = i18n.resolvedLanguage || i18n.language || 'en';
|
||||
const title = pickLocale(sponsor.title, lang) || sponsor.name;
|
||||
const text = pickLocale(sponsor.text, lang);
|
||||
const tag = t('pages.sponsors.tag');
|
||||
|
||||
if (iconOnly) {
|
||||
return (
|
||||
<a
|
||||
className="sponsor-card sponsor-card-icon"
|
||||
href={sponsor.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer sponsored"
|
||||
title={`${tag} · ${title}`}
|
||||
aria-label={`${tag}: ${title}`}
|
||||
>
|
||||
<SponsorLogo sponsor={sponsor} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`sponsor-card sponsor-card-${variant}`}>
|
||||
<a
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useSponsorsQuery } from '@/api/queries/useSponsorsQuery';
|
||||
import {
|
||||
@@ -9,47 +9,29 @@ import {
|
||||
} from '@/lib/sponsors';
|
||||
import SponsorCard, { type SponsorCardVariant } from './SponsorCard';
|
||||
|
||||
const ROTATE_MS = 30_000;
|
||||
|
||||
interface SponsorSlotProps {
|
||||
slot: Slot;
|
||||
variant?: SponsorCardVariant;
|
||||
iconOnly?: boolean;
|
||||
rotate?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function SponsorSlot({
|
||||
slot,
|
||||
variant = 'banner',
|
||||
iconOnly,
|
||||
rotate,
|
||||
className,
|
||||
}: SponsorSlotProps) {
|
||||
export default function SponsorSlot({ slot, variant = 'banner', className }: SponsorSlotProps) {
|
||||
const { data } = useSponsorsQuery();
|
||||
const [, setDismissTick] = useState(0);
|
||||
const [index, setIndex] = useState(0);
|
||||
|
||||
// Re-filtered each render so a close (dismissTick bump) re-reads localStorage.
|
||||
const visible = sponsorsForSlot(data.sponsors, slot).filter(
|
||||
(s) => !isSponsorDismissed(s.id, slot),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!rotate || visible.length < 2) return;
|
||||
const timer = window.setInterval(() => setIndex((i) => i + 1), ROTATE_MS);
|
||||
return () => window.clearInterval(timer);
|
||||
}, [rotate, visible.length]);
|
||||
|
||||
if (visible.length === 0) return null;
|
||||
const sponsor = visible[(rotate ? index : 0) % visible.length];
|
||||
const sponsor = visible[0];
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<SponsorCard
|
||||
sponsor={sponsor}
|
||||
variant={variant}
|
||||
iconOnly={iconOnly}
|
||||
onClose={() => {
|
||||
dismissSponsor(sponsor.id, slot);
|
||||
setDismissTick((n) => n + 1);
|
||||
|
||||
@@ -247,10 +247,6 @@
|
||||
padding: 8px 8px 12px;
|
||||
}
|
||||
|
||||
.sider-sponsor {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sidebar-pin {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -44,7 +44,6 @@ import { formatPanelVersion } from '@/lib/panel-version';
|
||||
import { pauseAnimationsUntilLeave, useTheme } from '@/hooks/useTheme';
|
||||
import { useAllSettings } from '@/api/queries/useAllSettings';
|
||||
import { useCommandPalette } from '@/components/command-palette/useCommandPalette';
|
||||
import SponsorSlot from '@/components/sponsor/SponsorSlot';
|
||||
import './AppSidebar.css';
|
||||
|
||||
const DONATE_URL = 'https://donate.sanaei.dev/';
|
||||
@@ -452,13 +451,6 @@ export default function AppSidebar() {
|
||||
onClick={onMenuClick}
|
||||
/>
|
||||
<div className="sider-footer">
|
||||
<SponsorSlot
|
||||
slot="sidebar"
|
||||
variant="compact"
|
||||
iconOnly={railCollapsed}
|
||||
rotate
|
||||
className="sider-sponsor"
|
||||
/>
|
||||
<VersionBadge version={panelVersion} collapsed={railCollapsed} />
|
||||
</div>
|
||||
</Layout.Sider>
|
||||
@@ -544,7 +536,6 @@ export default function AppSidebar() {
|
||||
}}
|
||||
/>
|
||||
<div className="drawer-footer">
|
||||
<SponsorSlot slot="sidebar" variant="compact" rotate className="sider-sponsor" />
|
||||
<VersionBadge version={panelVersion} />
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { Sponsor } from '@/generated/types';
|
||||
|
||||
export type SponsorSlot = 'dashboard' | 'sidebar' | 'page' | 'login';
|
||||
export type SponsorSlot = 'dashboard' | 'page' | 'login';
|
||||
|
||||
const DISMISS_KEY = 'xui.sponsor.dismissed';
|
||||
export const SPONSOR_DISMISS_MS = 24 * 60 * 60 * 1000;
|
||||
@@ -38,25 +38,3 @@ export function dismissSponsor(id: string, slot: SponsorSlot, now = Date.now())
|
||||
localStorage.setItem(DISMISS_KEY, JSON.stringify(next));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// Mirrors the backend: dashboard/login show one sponsor, the sidebar rotates up to three.
|
||||
export const SLOT_CAPACITY: Partial<Record<SponsorSlot, number>> = {
|
||||
dashboard: 1,
|
||||
login: 1,
|
||||
sidebar: 3,
|
||||
};
|
||||
|
||||
export interface PlacementStatus {
|
||||
count: number;
|
||||
capacity?: number;
|
||||
takenUntil?: string;
|
||||
}
|
||||
|
||||
// When full, a place frees up once enough bookings end to drop below capacity.
|
||||
export function placementStatus(sponsors: Sponsor[], slot: SponsorSlot): PlacementStatus {
|
||||
const booked = sponsorsForSlot(sponsors, slot);
|
||||
const capacity = SLOT_CAPACITY[slot];
|
||||
if (!capacity || booked.length < capacity) return { count: booked.length, capacity };
|
||||
const ends = booked.map((s) => s.until).sort((a, b) => Date.parse(a) - Date.parse(b));
|
||||
return { count: booked.length, capacity, takenUntil: ends[booked.length - capacity] };
|
||||
}
|
||||
|
||||
@@ -29,30 +29,14 @@
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.sponsors-page .sponsors-section-title {
|
||||
margin: 32px 0 12px;
|
||||
color: var(--ant-color-text-secondary);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.sponsors-yourbrand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
min-height: 170px;
|
||||
padding: 16px;
|
||||
padding: 40px 24px;
|
||||
border: 1.5px dashed var(--ant-color-border);
|
||||
border-radius: var(--ant-border-radius-lg, 8px);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sponsors-yourbrand.is-large {
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--bg-card, transparent);
|
||||
}
|
||||
@@ -82,58 +66,6 @@
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
.sponsors-yourbrand:not(.is-large) .ant-btn {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sponsors-placement {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-radius: var(--ant-border-radius-lg, 8px);
|
||||
background: var(--bg-card, transparent);
|
||||
}
|
||||
|
||||
.sponsors-placement-icon {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
font-size: 17px;
|
||||
color: var(--ant-color-primary);
|
||||
background: var(--ant-color-primary-bg);
|
||||
}
|
||||
|
||||
.sponsors-placement-title {
|
||||
font-weight: 600;
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
|
||||
.sponsors-placement-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sponsors-placement-status {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sponsors-placement-status .ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sponsors-placement-desc {
|
||||
font-size: 13px;
|
||||
color: var(--ant-color-text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sponsors-page .content-area {
|
||||
padding: 12px;
|
||||
|
||||
@@ -1,22 +1,13 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Col, ConfigProvider, Layout, Row, Spin, Tag, Typography } from 'antd';
|
||||
import {
|
||||
CrownOutlined,
|
||||
DashboardOutlined,
|
||||
LoginOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
PlusOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Col, ConfigProvider, Layout, Row, Spin, Typography } from 'antd';
|
||||
import { CrownOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
import AppSidebar from '@/layouts/AppSidebar';
|
||||
import { useSponsorsQuery } from '@/api/queries/useSponsorsQuery';
|
||||
import SponsorCard from '@/components/sponsor/SponsorCard';
|
||||
import { IntlUtil } from '@/utils';
|
||||
import { useDatepicker } from '@/hooks/useDatepicker';
|
||||
import { placementStatus, sponsorsForSlot, type SponsorSlot } from '@/lib/sponsors';
|
||||
import { sponsorsForSlot } from '@/lib/sponsors';
|
||||
import './SponsorsPage.css';
|
||||
|
||||
function BecomeButton({ contact, block }: { contact?: string; block?: boolean }) {
|
||||
@@ -36,10 +27,10 @@ function BecomeButton({ contact, block }: { contact?: string; block?: boolean })
|
||||
);
|
||||
}
|
||||
|
||||
function YourBrandCard({ contact, large }: { contact?: string; large?: boolean }) {
|
||||
function YourBrandCard({ contact }: { contact?: string }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className={`sponsors-yourbrand${large ? ' is-large' : ''}`}>
|
||||
<div className="sponsors-yourbrand">
|
||||
<span className="sponsors-yourbrand-icon">
|
||||
<PlusOutlined />
|
||||
</span>
|
||||
@@ -56,34 +47,6 @@ export default function SponsorsPage() {
|
||||
const { data, fetched } = useSponsorsQuery();
|
||||
const sponsors = sponsorsForSlot(data.sponsors, 'page');
|
||||
|
||||
const { datepicker } = useDatepicker();
|
||||
const placements: { slot: SponsorSlot; icon: ReactNode; title: string; desc: string }[] = [
|
||||
{
|
||||
slot: 'dashboard',
|
||||
icon: <DashboardOutlined />,
|
||||
title: t('pages.sponsors.placementDashboard'),
|
||||
desc: t('pages.sponsors.placementDashboardDesc'),
|
||||
},
|
||||
{
|
||||
slot: 'sidebar',
|
||||
icon: <MenuUnfoldOutlined />,
|
||||
title: t('pages.sponsors.placementSidebar'),
|
||||
desc: t('pages.sponsors.placementSidebarDesc'),
|
||||
},
|
||||
{
|
||||
slot: 'login',
|
||||
icon: <LoginOutlined />,
|
||||
title: t('pages.sponsors.placementLogin'),
|
||||
desc: t('pages.sponsors.placementLoginDesc'),
|
||||
},
|
||||
{
|
||||
slot: 'page',
|
||||
icon: <CrownOutlined />,
|
||||
title: t('pages.sponsors.placementPage'),
|
||||
desc: t('pages.sponsors.placementPageDesc'),
|
||||
},
|
||||
];
|
||||
|
||||
const pageClass = useMemo(() => {
|
||||
const classes = ['sponsors-page'];
|
||||
if (isDark) classes.push('is-dark');
|
||||
@@ -110,63 +73,17 @@ export default function SponsorsPage() {
|
||||
|
||||
<Spin spinning={!fetched} delay={200}>
|
||||
{sponsors.length === 0 ? (
|
||||
fetched && <YourBrandCard contact={data.contact} large />
|
||||
fetched && <YourBrandCard contact={data.contact} />
|
||||
) : (
|
||||
<Row gutter={[16, 16]}>
|
||||
{sponsors.map((sponsor) => (
|
||||
<Col key={sponsor.id} xs={24} sm={12} xl={8}>
|
||||
<Col key={sponsor.id} xs={24} lg={12}>
|
||||
<SponsorCard sponsor={sponsor} variant="card" />
|
||||
</Col>
|
||||
))}
|
||||
{data.contact && (
|
||||
<Col xs={24} sm={12} xl={8}>
|
||||
<YourBrandCard contact={data.contact} />
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
)}
|
||||
</Spin>
|
||||
|
||||
<Typography.Title level={5} className="sponsors-section-title">
|
||||
{t('pages.sponsors.placements')}
|
||||
</Typography.Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{placements.map((p) => {
|
||||
const status = placementStatus(data.sponsors, p.slot);
|
||||
return (
|
||||
<Col key={p.slot} xs={24} sm={12} xl={6}>
|
||||
<div className="sponsors-placement">
|
||||
<span className="sponsors-placement-icon">{p.icon}</span>
|
||||
<div className="sponsors-placement-body">
|
||||
<div className="sponsors-placement-title">{p.title}</div>
|
||||
<div className="sponsors-placement-desc">{p.desc}</div>
|
||||
<div className="sponsors-placement-status">
|
||||
{status.takenUntil ? (
|
||||
<Tag color="orange">
|
||||
{t('pages.sponsors.takenUntil', {
|
||||
date: IntlUtil.formatDate(status.takenUntil, datepicker),
|
||||
})}
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag color="green">{t('pages.sponsors.available')}</Tag>
|
||||
)}
|
||||
{status.count > 0 && !status.takenUntil && (
|
||||
<Tag>
|
||||
{t('pages.sponsors.activeCount', {
|
||||
count:
|
||||
status.capacity && status.capacity > 1
|
||||
? `${status.count}/${status.capacity}`
|
||||
: status.count,
|
||||
})}
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import { afterEach, describe, expect, test } from 'vitest';
|
||||
|
||||
import {
|
||||
SPONSOR_DISMISS_MS,
|
||||
dismissSponsor,
|
||||
isSponsorDismissed,
|
||||
pickLocale,
|
||||
placementStatus,
|
||||
} from '@/lib/sponsors';
|
||||
import { SPONSOR_DISMISS_MS, dismissSponsor, isSponsorDismissed, pickLocale } from '@/lib/sponsors';
|
||||
|
||||
afterEach(() => {
|
||||
localStorage.clear();
|
||||
@@ -33,10 +27,10 @@ describe('sponsor dismissal', () => {
|
||||
const t0 = 1_800_000_000_000;
|
||||
|
||||
test('hides only the dismissed slot until the window elapses', () => {
|
||||
dismissSponsor('acme', 'sidebar', t0);
|
||||
expect(isSponsorDismissed('acme', 'sidebar', t0 + SPONSOR_DISMISS_MS - 1)).toBe(true);
|
||||
dismissSponsor('acme', 'login', t0);
|
||||
expect(isSponsorDismissed('acme', 'login', t0 + SPONSOR_DISMISS_MS - 1)).toBe(true);
|
||||
expect(isSponsorDismissed('acme', 'dashboard', t0)).toBe(false);
|
||||
expect(isSponsorDismissed('acme', 'sidebar', t0 + SPONSOR_DISMISS_MS)).toBe(false);
|
||||
expect(isSponsorDismissed('acme', 'login', t0 + SPONSOR_DISMISS_MS)).toBe(false);
|
||||
});
|
||||
|
||||
test('prunes expired entries on the next dismiss', () => {
|
||||
@@ -48,51 +42,6 @@ describe('sponsor dismissal', () => {
|
||||
|
||||
test('corrupt storage is treated as nothing dismissed', () => {
|
||||
localStorage.setItem('xui.sponsor.dismissed', 'not json');
|
||||
expect(isSponsorDismissed('acme', 'sidebar', t0)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('placementStatus', () => {
|
||||
const sp = (id: string, slots: string[], until: string) => ({
|
||||
id,
|
||||
name: id,
|
||||
slots,
|
||||
until,
|
||||
title: {},
|
||||
text: {},
|
||||
link: 'https://x.example/',
|
||||
});
|
||||
|
||||
test('exclusive slot is taken until the latest booking ends', () => {
|
||||
const sponsors = [
|
||||
sp('a', ['dashboard'], '2026-11-01T00:00:00Z'),
|
||||
sp('b', ['dashboard'], '2026-12-15T00:00:00Z'),
|
||||
];
|
||||
expect(placementStatus(sponsors, 'dashboard')).toEqual({
|
||||
count: 2,
|
||||
capacity: 1,
|
||||
takenUntil: '2026-12-15T00:00:00Z',
|
||||
});
|
||||
});
|
||||
|
||||
test('sidebar is full at three and frees up when the earliest ends', () => {
|
||||
const sponsors = [
|
||||
sp('a', ['sidebar'], '2026-12-01T00:00:00Z'),
|
||||
sp('b', ['sidebar'], '2026-10-20T00:00:00Z'),
|
||||
sp('c', ['sidebar'], '2026-11-10T00:00:00Z'),
|
||||
];
|
||||
expect(placementStatus(sponsors, 'sidebar')).toEqual({
|
||||
count: 3,
|
||||
capacity: 3,
|
||||
takenUntil: '2026-10-20T00:00:00Z',
|
||||
});
|
||||
expect(placementStatus(sponsors.slice(0, 2), 'sidebar')).toEqual({ count: 2, capacity: 3 });
|
||||
});
|
||||
|
||||
test('uncapped page slot reports only a count', () => {
|
||||
expect(placementStatus([sp('a', ['page'], '2026-12-01T00:00:00Z')], 'page')).toEqual({
|
||||
count: 1,
|
||||
capacity: undefined,
|
||||
});
|
||||
expect(isSponsorDismissed('acme', 'login', t0)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user