Added lookup for cloud account. Added SessionModal component.

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -1,5 +1,14 @@
 import { Text } from '@umami/react-zen';
-import { Eye, User, Clock, Ungroup, Tag, ChartPie, UserPlus, GitCompare } from '@/components/icons';
+import {
+  Eye,
+  User,
+  Clock,
+  Sheet,
+  Tag,
+  ChartPie,
+  UserPlus,
+  AlignEndHorizontal,
+} from '@/components/icons';
 import { Lightning, Path, Money, Target, Funnel, Magnet, Network } from '@/components/svg';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -47,13 +56,13 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'compare',
           label: formatMessage(labels.compare),
-          icon: <GitCompare />,
+          icon: <AlignEndHorizontal />,
           path: renderPath('/compare'),
         },
         {
           id: 'breakdown',
           label: formatMessage(labels.breakdown),
-          icon: <Ungroup />,
+          icon: <Sheet />,
           path: renderPath('/breakdown'),
         },
       ],

src/app/(main)/websites/[websiteId]/events/EventsPage.tsx

@@ -9,6 +9,7 @@ import { useMessages } from '@/components/hooks';
 import { EventProperties } from './EventProperties';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { getItem, setItem } from '@/lib/storage';
+import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
 
 const KEY_NAME = 'umami.events.tab';
 
@@ -52,6 +53,7 @@ export function EventsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
+      <SessionModal websiteId={websiteId} />
     </Column>
   );
 }

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -10,7 +10,7 @@ import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function EventsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { renderUrl } = useNavigation();
+  const { updateParams } = useNavigation();
   const { formatValue } = useFormat();
 
   if (data.length === 0) {
@@ -23,7 +23,7 @@ export function EventsTable({ data = [] }) {
         {(row: any) => {
           return (
             <Row alignItems="center" gap="2">
-              <Link href={renderUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
+              <Link href={updateParams({ session: row.sessionId })}>
                 <Avatar seed={row.sessionId} size={32} />
               </Link>
               <Icon>{row.eventName ? <Lightning /> : <Eye />}</Icon>

src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx

@@ -0,0 +1,49 @@
+import { Dialog, Modal, ModalProps } from '@umami/react-zen';
+import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
+import { useNavigation } from '@/components/hooks';
+
+export interface SessionModalProps extends ModalProps {
+  websiteId: string;
+}
+
+export function SessionModal({ websiteId, ...props }: SessionModalProps) {
+  const {
+    router,
+    query: { session },
+    updateParams,
+  } = useNavigation();
+
+  const handleClose = (close: () => void) => {
+    router.push(updateParams({ session: undefined }));
+    close();
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      router.push(updateParams({ session: undefined }));
+    }
+  };
+
+  return (
+    <Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable {...props}>
+      <Dialog
+        style={{
+          maxWidth: 1320,
+          width: '100vw',
+          minHeight: '300px',
+          height: 'calc(100vh - 40px)',
+        }}
+      >
+        {({ close }) => {
+          return (
+            <SessionProfile
+              websiteId={websiteId}
+              sessionId={session}
+              onClose={() => handleClose(close)}
+            />
+          );
+        }}
+      </Dialog>
+    </Modal>
+  );
+}

src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx

@@ -1,35 +1,19 @@
 'use client';
 import { Key, useState } from 'react';
-import { TabList, Tab, Tabs, TabPanel, Column, Modal, Dialog } from '@umami/react-zen';
+import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
 import { SessionsDataTable } from './SessionsDataTable';
 import { SessionProperties } from './SessionProperties';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useMessages } from '@/components/hooks';
 import { Panel } from '@/components/common/Panel';
 import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { getItem, setItem } from '@/lib/storage';
-import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
+import { SessionModal } from '@/app/(main)/websites/[websiteId]/sessions/SessionModal';
 
 const KEY_NAME = 'umami.sessions.tab';
 
 export function SessionsPage({ websiteId }) {
   const [tab, setTab] = useState(getItem(KEY_NAME) || 'activity');
   const { formatMessage, labels } = useMessages();
-  const {
-    router,
-    query: { session },
-    updateParams,
-  } = useNavigation();
-
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ session: undefined }));
-    close();
-  };
-
-  const handleOpenChange = (isOpen: boolean) => {
-    if (!isOpen) {
-      router.push(updateParams({ session: undefined }));
-    }
-  };
 
   const handleSelect = (value: Key) => {
     setItem(KEY_NAME, value);
@@ -53,26 +37,7 @@ export function SessionsPage({ websiteId }) {
           </TabPanel>
         </Tabs>
       </Panel>
-      <Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable>
+      <SessionModal websiteId={websiteId} />
-        <Dialog
-          style={{
-            maxWidth: 1320,
-            width: '100vw',
-            minHeight: '300px',
-            height: 'calc(100vh - 40px)',
-          }}
-        >
-          {({ close }) => {
-            return (
-              <SessionProfile
-                websiteId={websiteId}
-                sessionId={session}
-                onClose={() => handleClose(close)}
-              />
-            );
-          }}
-        </Dialog>
-      </Modal>
     </Column>
   );
 }

src/app/api/websites/route.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import redis from '@/lib/redis';
 import { canCreateTeamWebsite, canCreateWebsite } from '@/permissions';
 import { json, unauthorized } from '@/lib/response';
 import { uuid } from '@/lib/crypto';
@@ -50,13 +51,17 @@ export async function POST(request: Request) {
 
   const { id, name, domain, shareId, teamId } = body;
 
-  if (process.env.CLOUD_MODE && !teamId && !auth.user.hasSubscription) {
+  if (process.env.CLOUD_MODE && !teamId) {
+    const account = await redis.client.get(`account:${auth.user.id}`);
+
+    if (!account?.hasSubscription) {
       const count = await getWebsiteCount(auth.user.id);
 
       if (count >= CLOUD_WEBSITE_LIMIT) {
         return unauthorized({ message: 'Website limit reached.' });
       }
     }
+  }
 
   if ((teamId && !(await canCreateTeamWebsite(auth, teamId))) || !(await canCreateWebsite(auth))) {
     return unauthorized();

src/queries/prisma/website.ts

@@ -208,6 +208,7 @@ export async function getWebsiteCount(userId: string) {
   return prisma.client.website.count({
     where: {
       userId,
+      deletedAt: null,
     },
   });
 }