Merge branch 'dev' of https://github.com/umami-software/umami into dev

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 (
       <Column gap="3">
         <Panel>
           <Column gap="4" alignItems="center" padding="10">
-            <Text>{t(messages.upgradeRequired, { plan: 'Business' })}</Text>
-            <Button variant="primary" onPress={() => window.open(`${process.env.cloudUrl}/settings/billing`, '_blank')}>
+            <Icon size="xl">
+              <Video />
+            </Icon>
+            <Text className="py-4">{t(messages.upgradeRequired, { plan: 'Business' })}</Text>
+            <Button
+              variant="primary"
+              onPress={() => window.open(`${process.env.cloudUrl}/settings/billing`, '_blank')}
+            >
               {t(labels.upgrade)}
             </Button>
           </Column>