diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx index adfde5bac..217908a4a 100644 --- a/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx +++ b/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx @@ -1,10 +1,11 @@ 'use client'; -import { Button, Column, Tab, TabList, TabPanel, Tabs, Text } from '@umami/react-zen'; +import { Button, Column, Icon, Tab, TabList, TabPanel, Tabs, Text } from '@umami/react-zen'; import { type Key, useState } from 'react'; import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal'; import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls'; import { Panel } from '@/components/common/Panel'; import { useMessages, useSubscription } from '@/components/hooks'; +import { Video } from '@/components/icons'; import { getItem, setItem } from '@/lib/storage'; import { ReplayModal } from './ReplayModal'; import { ReplaysDataTable } from './ReplaysDataTable'; @@ -15,20 +16,26 @@ const KEY_NAME = 'umami.replays.tab'; export function ReplaysPage({ websiteId }: { websiteId: string }) { const [tab, setTab] = useState(getItem(KEY_NAME) || 'replays'); const { t, labels, messages } = useMessages(); - const { hasFeature, cloudMode } = useSubscription(); + const { hasFeature, hasSubscription, cloudMode } = useSubscription(); const handleSelect = (value: Key) => { setItem(KEY_NAME, value); setTab(value); }; - if (cloudMode && !hasFeature('replays')) { + if (cloudMode && hasSubscription && !hasFeature('replays')) { return ( - {t(messages.upgradeRequired, { plan: 'Business' })} -