fix: hide billing on self-hosted

This commit is contained in:
Carl-Gerhard Lindesvärd
2026-01-20 17:41:58 +01:00
parent 5b29f7502c
commit 3e573ae27f

View File

@@ -7,11 +7,12 @@ import {
} from 'lucide-react'; } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useAppContext } from '@/hooks/use-app-context';
import { useAppParams } from '@/hooks/use-app-params'; import { useAppParams } from '@/hooks/use-app-params';
import { pushModal } from '@/modals'; import { pushModal } from '@/modals';
import type { RouterOutputs } from '@/trpc/client'; import type { RouterOutputs } from '@/trpc/client';
import { cn } from '@/utils/cn'; import { cn } from '@/utils/cn';
import { Link, useNavigate } from '@tanstack/react-router'; import { Link, useNavigate, useRouteContext } from '@tanstack/react-router';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { ChevronDownIcon, PlusIcon } from 'lucide-react'; import { ChevronDownIcon, PlusIcon } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
@@ -28,6 +29,8 @@ export default function SidebarOrganizationMenu({
}: { }: {
organization: RouterOutputs['organization']['list'][number]; organization: RouterOutputs['organization']['list'][number];
}) { }) {
const { isSelfHosted } = useAppContext();
return ( return (
<> <>
<Link <Link
@@ -52,21 +55,23 @@ export default function SidebarOrganizationMenu({
<CogIcon size={20} /> <CogIcon size={20} />
<div className="flex-1">Settings</div> <div className="flex-1">Settings</div>
</Link> </Link>
<Link {!isSelfHosted && (
className={cn( <Link
'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]', className={cn(
)} 'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
activeOptions={{ exact: true }} )}
to="/$organizationId/billing" activeOptions={{ exact: true }}
from="/$organizationId" to="/$organizationId/billing"
> from="/$organizationId"
<CreditCardIcon size={20} /> >
<div className="flex-1">Billing</div> <CreditCardIcon size={20} />
{organization?.isTrial && <Badge>Trial</Badge>} <div className="flex-1">Billing</div>
{organization?.isExpired && <Badge>Expired</Badge>} {organization?.isTrial && <Badge>Trial</Badge>}
{organization?.isWillBeCanceled && <Badge>Canceled</Badge>} {organization?.isExpired && <Badge>Expired</Badge>}
{organization?.isCanceled && <Badge>Canceled</Badge>} {organization?.isWillBeCanceled && <Badge>Canceled</Badge>}
</Link> {organization?.isCanceled && <Badge>Canceled</Badge>}
</Link>
)}
<Link <Link
className={cn( className={cn(
'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]', 'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',