From a6b27520f2b1a7346e41b4594e72daac5753aebe Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Thu, 19 Mar 2026 17:16:05 -0700
Subject: [PATCH 1/2] Added icon to upgrade component.

---
 .../websites/[websiteId]/replays/ReplaysPage.tsx    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx
index adfde5bac..ecd1b52e7 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';
@@ -27,8 +28,14 @@ export function ReplaysPage({ websiteId }: { websiteId: string }) {
       <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>

From 3659c66161a5ddcc30a0cd1687c17f52b2108660 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@umami.is>
Date: Thu, 19 Mar 2026 17:38:10 -0700
Subject: [PATCH 2/2] Allow replays access for users without billing
 subscription

---
 src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx b/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx
index ecd1b52e7..217908a4a 100644
--- a/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/replays/ReplaysPage.tsx
@@ -16,14 +16,14 @@ 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>