feat: add organisations (#1820)

apps/remix/app/components/general/app-command-menu.tsx

@@ -9,6 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
 import { Theme, useTheme } from 'remix-themes';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import {
   DOCUMENTS_PAGE_SHORTCUT,
@@ -20,6 +21,7 @@ import {
   SKIP_QUERY_BATCH_META,
 } from '@documenso/lib/constants/trpc';
 import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -33,28 +35,7 @@ import {
 } from '@documenso/ui/primitives/command';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const DOCUMENTS_PAGES = [
-  {
-    label: msg`All documents`,
-    path: '/documents?status=ALL',
-    shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
-  },
-  { label: msg`Draft documents`, path: '/documents?status=DRAFT' },
-  {
-    label: msg`Completed documents`,
-    path: '/documents?status=COMPLETED',
-  },
-  { label: msg`Pending documents`, path: '/documents?status=PENDING' },
-  { label: msg`Inbox documents`, path: '/documents?status=INBOX' },
-];
-
-const TEMPLATES_PAGES = [
-  {
-    label: msg`All templates`,
-    path: '/templates',
-    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
-  },
-];
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 const SETTINGS_PAGES = [
   {
@@ -73,8 +54,10 @@ export type AppCommandMenuProps = {
 
 export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const { _ } = useLingui();
+  const { organisations } = useSession();
 
   const navigate = useNavigate();
+  const currentTeam = useOptionalCurrentTeam();
 
   const [isOpen, setIsOpen] = useState(() => open ?? false);
   const [search, setSearch] = useState('');
@@ -94,6 +77,60 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
       },
     );
 
+  const teamUrl = useMemo(() => {
+    let teamUrl = currentTeam?.url || null;
+
+    if (!teamUrl && isPersonalLayout(organisations)) {
+      teamUrl = organisations[0].teams[0]?.url || null;
+    }
+
+    return teamUrl;
+  }, [currentTeam, organisations]);
+
+  const documentPageLinks = useMemo(() => {
+    if (!teamUrl) {
+      return [];
+    }
+
+    return [
+      {
+        label: msg`All documents`,
+        path: `/t/${teamUrl}/documents?status=ALL`,
+        shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
+      },
+      {
+        label: msg`Draft documents`,
+        path: `/t/${teamUrl}/documents?status=DRAFT`,
+      },
+      {
+        label: msg`Completed documents`,
+        path: `/t/${teamUrl}/documents?status=COMPLETED`,
+      },
+      {
+        label: msg`Pending documents`,
+        path: `/t/${teamUrl}/documents?status=PENDING`,
+      },
+      {
+        label: msg`Inbox documents`,
+        path: `/t/${teamUrl}/documents?status=INBOX`,
+      },
+    ];
+  }, [currentTeam, organisations]);
+
+  const templatePageLinks = useMemo(() => {
+    if (!teamUrl) {
+      return [];
+    }
+
+    return [
+      {
+        label: msg`All templates`,
+        path: `/t/${teamUrl}/templates`,
+        shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+      },
+    ];
+  }, [currentTeam, organisations]);
+
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -145,8 +182,8 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   };
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
-  const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
-  const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
+  const goToDocuments = useCallback(() => push(documentPageLinks[0].path), [push]);
+  const goToTemplates = useCallback(() => push(templatePageLinks[0].path), [push]);
 
   useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
@@ -197,12 +234,16 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
         )}
         {!currentPage && (
           <>
-            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Documents`)}>
-              <Commands push={push} pages={DOCUMENTS_PAGES} />
-            </CommandGroup>
-            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
-              <Commands push={push} pages={TEMPLATES_PAGES} />
-            </CommandGroup>
+            {documentPageLinks.length > 0 && (
+              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Documents`)}>
+                <Commands push={push} pages={documentPageLinks} />
+              </CommandGroup>
+            )}
+            {templatePageLinks.length > 0 && (
+              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
+                <Commands push={push} pages={templatePageLinks} />
+              </CommandGroup>
+            )}
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Settings`)}>
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>

apps/remix/app/components/general/app-header.tsx

@@ -1,12 +1,13 @@
 import { type HTMLAttributes, useEffect, useState } from 'react';
 
-import { MenuIcon, SearchIcon } from 'lucide-react';
-import { Link, useLocation, useParams } from 'react-router';
+import { InboxIcon, MenuIcon, SearchIcon } from 'lucide-react';
+import { Link, useParams } from 'react-router';
 
-import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import type { TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { BrandingLogo } from '~/components/general/branding-logo';
 
@@ -14,15 +15,14 @@ import { AppCommandMenu } from './app-command-menu';
 import { AppNavDesktop } from './app-nav-desktop';
 import { AppNavMobile } from './app-nav-mobile';
 import { MenuSwitcher } from './menu-switcher';
+import { OrgMenuSwitcher } from './org-menu-switcher';
 
-export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
-  user: SessionUser;
-  teams: TGetTeamsResponse;
-};
+export type HeaderProps = HTMLAttributes<HTMLDivElement>;
 
-export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+export const Header = ({ className, ...props }: HeaderProps) => {
   const params = useParams();
-  const { pathname } = useLocation();
+
+  const { organisations } = useSession();
 
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -38,16 +38,6 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
-  const isPathTeamUrl = (teamUrl: string) => {
-    if (!pathname || !pathname.startsWith(`/t/`)) {
-      return false;
-    }
-
-    return pathname.split('/')[2] === teamUrl;
-  };
-
-  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
-
   return (
     <header
       className={cn(
@@ -59,7 +49,7 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          to={`${getRootHref(params, { returnEmptyRootString: true })}/documents`}
+          to={`${getRootHref(params, { returnEmptyRootString: true })}`}
           className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
           <BrandingLogo className="h-6 w-auto" />
@@ -67,11 +57,21 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
 
         <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
-        <div
-          className="flex gap-x-4 md:ml-8"
-          title={selectedTeam ? selectedTeam.name : (user.name ?? '')}
-        >
-          <MenuSwitcher user={user} teams={teams} />
+        <Button asChild variant="outline" className="relative hidden h-10 w-10 rounded-lg md:flex">
+          <Link to="/inbox" className="relative block h-10 w-10">
+            <InboxIcon className="text-muted-foreground hover:text-foreground h-5 w-5 flex-shrink-0 transition-colors" />
+
+            {/* Todo: Add counter. */}
+            {/* {unreadCount > 0 && (
+              <span className="bg-muted text-muted-foreground absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full text-[10px]">
+                1
+              </span>
+            )} */}
+          </Link>
+        </Button>
+
+        <div className="md:ml-4">
+          {isPersonalLayout(organisations) ? <MenuSwitcher /> : <OrgMenuSwitcher />}
         </div>
 
         <div className="flex flex-row items-center space-x-4 md:hidden">

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -1,26 +1,20 @@
 import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
 import { Search } from 'lucide-react';
-import { Link, useLocation, useParams } from 'react-router';
+import { Link, useLocation } from 'react-router';
 
-import { getRootHref } from '@documenso/lib/utils/params';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-const navigationLinks = [
-  {
-    href: '/documents',
-    label: msg`Documents`,
-  },
-  {
-    href: '/templates',
-    label: msg`Templates`,
-  },
-];
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
   setIsCommandMenuOpen: (value: boolean) => void;
@@ -32,13 +26,13 @@ export const AppNavDesktop = ({
   ...props
 }: AppNavDesktopProps) => {
   const { _ } = useLingui();
+  const { organisations } = useSession();
 
   const { pathname } = useLocation();
-  const params = useParams();
 
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
-  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+  const currentTeam = useOptionalCurrentTeam();
 
   useEffect(() => {
     const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
@@ -47,6 +41,29 @@ export const AppNavDesktop = ({
     setModifierKey(isMacOS ? '⌘' : 'Ctrl');
   }, []);
 
+  const menuNavigationLinks = useMemo(() => {
+    let teamUrl = currentTeam?.url || null;
+
+    if (!teamUrl && isPersonalLayout(organisations)) {
+      teamUrl = organisations[0].teams[0]?.url || null;
+    }
+
+    if (!teamUrl) {
+      return [];
+    }
+
+    return [
+      {
+        href: `/t/${teamUrl}/documents`,
+        label: msg`Documents`,
+      },
+      {
+        href: `/t/${teamUrl}/templates`,
+        label: msg`Templates`,
+      },
+    ];
+  }, [currentTeam, organisations]);
+
   return (
     <div
       className={cn(
@@ -55,23 +72,32 @@ export const AppNavDesktop = ({
       )}
       {...props}
     >
-      <div className="flex items-baseline gap-x-6">
-        {navigationLinks.map(({ href, label }) => (
-          <Link
-            key={href}
-            to={`${rootHref}${href}`}
-            className={cn(
-              'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-              {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                  `${rootHref}${href}`,
-                ),
-              },
-            )}
-          >
-            {_(label)}
-          </Link>
-        ))}
+      <div>
+        <AnimatePresence>
+          {menuNavigationLinks.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex items-baseline gap-x-6"
+            >
+              {menuNavigationLinks.map(({ href, label }) => (
+                <Link
+                  key={href}
+                  to={href}
+                  className={cn(
+                    'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+                    {
+                      'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+                    },
+                  )}
+                >
+                  {_(label)}
+                </Link>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
 
       <Button

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -1,48 +1,73 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { useMemo } from 'react';
+
+import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { Link, useParams } from 'react-router';
+import { Link } from 'react-router';
 
 import LogoImage from '@documenso/assets/logo.png';
 import { authClient } from '@documenso/auth/client';
-import { getRootHref } from '@documenso/lib/utils/params';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
 import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type AppNavMobileProps = {
   isMenuOpen: boolean;
   onMenuOpenChange?: (_value: boolean) => void;
 };
 
 export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
-  const { _ } = useLingui();
+  const { t } = useLingui();
 
-  const params = useParams();
+  const { organisations } = useSession();
+
+  const currentTeam = useOptionalCurrentTeam();
 
   const handleMenuItemClick = () => {
     onMenuOpenChange?.(false);
   };
 
-  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+  const menuNavigationLinks = useMemo(() => {
+    let teamUrl = currentTeam?.url || null;
 
-  const menuNavigationLinks = [
-    {
-      href: `${rootHref}/documents`,
-      text: msg`Documents`,
-    },
-    {
-      href: `${rootHref}/templates`,
-      text: msg`Templates`,
-    },
-    {
-      href: '/settings/teams',
-      text: msg`Teams`,
-    },
-    {
-      href: '/settings/profile',
-      text: msg`Settings`,
-    },
-  ];
+    if (!teamUrl && isPersonalLayout(organisations)) {
+      teamUrl = organisations[0].teams[0]?.url || null;
+    }
+
+    if (!teamUrl) {
+      return [
+        {
+          href: '/inbox',
+          text: t`Inbox`,
+        },
+        {
+          href: '/settings/profile',
+          text: t`Settings`,
+        },
+      ];
+    }
+
+    return [
+      {
+        href: `/t/${teamUrl}/documents`,
+        label: t`Documents`,
+      },
+      {
+        href: `/t/${teamUrl}/templates`,
+        label: t`Templates`,
+      },
+      {
+        href: '/inbox',
+        text: t`Inbox`,
+      },
+      {
+        href: '/settings/profile',
+        text: t`Settings`,
+      },
+    ];
+  }, [currentTeam, organisations]);
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
@@ -65,7 +90,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
               to={href}
               onClick={() => handleMenuItemClick()}
             >
-              {_(text)}
+              {text}
             </Link>
           ))}
 

apps/remix/app/components/general/billing-plans.tsx

@@ -1,91 +1,91 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import type { MessageDescriptor } from '@lingui/core';
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Building2Icon, PlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
 
-import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type Interval = keyof PriceIntervals;
-
-const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
-
-const FRIENDLY_INTERVALS: Record<Interval, MessageDescriptor> = {
-  day: msg`Daily`,
-  week: msg`Weekly`,
-  month: msg`Monthly`,
-  year: msg`Yearly`,
-};
+import { ZCreateOrganisationFormSchema } from '../dialogs/organisation-create-dialog';
 
 const MotionCard = motion(Card);
 
 export type BillingPlansProps = {
-  prices: PriceIntervals;
+  plans: InternalClaimPlans;
 };
 
-export const BillingPlans = ({ prices }: BillingPlansProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
+export const BillingPlans = ({ plans }: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
-  const [interval, setInterval] = useState<Interval>('month');
-  const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
+  const [interval, setInterval] = useState<'monthlyPrice' | 'yearlyPrice'>('yearlyPrice');
 
-  const { mutateAsync: createCheckoutSession } = trpc.profile.createCheckoutSession.useMutation();
+  const pricesToDisplay = useMemo(() => {
+    const prices = [];
 
-  const onSubscribeClick = async (priceId: string) => {
-    try {
-      setCheckoutSessionPriceId(priceId);
-
-      const url = await createCheckoutSession({ priceId });
-
-      if (!url) {
-        throw new Error('Unable to create session');
+    for (const plan of Object.values(plans)) {
+      if (plan[interval] && plan[interval].isVisibleInApp) {
+        prices.push({
+          ...plan[interval],
+          memberCount: plan.memberCount,
+          claim: plan.id,
+        });
       }
-
-      window.open(url);
-    } catch (_err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while trying to create a checkout session.`),
-        variant: 'destructive',
-      });
-    } finally {
-      setCheckoutSessionPriceId(null);
     }
-  };
+
+    return prices;
+  }, [plans, interval]);
 
   return (
     <div>
-      <Tabs value={interval} onValueChange={(value) => isInterval(value) && setInterval(value)}>
+      <Tabs
+        value={interval}
+        onValueChange={(value) => setInterval(value as 'monthlyPrice' | 'yearlyPrice')}
+      >
         <TabsList>
-          {INTERVALS.map(
-            (interval) =>
-              prices[interval].length > 0 && (
-                <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
-                  {_(FRIENDLY_INTERVALS[interval])}
-                </TabsTrigger>
-              ),
-          )}
+          <TabsTrigger className="min-w-[150px]" value="monthlyPrice">
+            <Trans>Monthly</Trans>
+          </TabsTrigger>
+          <TabsTrigger className="min-w-[150px]" value="yearlyPrice">
+            <Trans>Yearly</Trans>
+          </TabsTrigger>
         </TabsList>
       </Tabs>
 
       <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
         <AnimatePresence mode="wait">
-          {prices[interval].map((price) => (
+          {pricesToDisplay.map((price) => (
             <MotionCard
               key={price.id}
               initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
@@ -96,8 +96,14 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
                 <CardTitle>{price.product.name}</CardTitle>
 
                 <div className="text-muted-foreground mt-2 text-lg font-medium">
-                  ${toHumanPrice(price.unit_amount ?? 0)} {price.currency.toUpperCase()}{' '}
-                  <span className="text-xs">per {interval}</span>
+                  {price.friendlyPrice + ' '}
+                  <span className="text-xs">
+                    {interval === 'monthlyPrice' ? (
+                      <Trans>per month</Trans>
+                    ) : (
+                      <Trans>per year</Trans>
+                    )}
+                  </span>
                 </div>
 
                 <div className="text-muted-foreground mt-1.5 text-sm">
@@ -120,14 +126,12 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
 
                 <div className="flex-1" />
 
-                <Button
-                  className="mt-4"
-                  disabled={checkoutSessionPriceId !== null}
-                  loading={checkoutSessionPriceId === price.id}
-                  onClick={() => void onSubscribeClick(price.id)}
-                >
-                  <Trans>Subscribe</Trans>
-                </Button>
+                <BillingDialog
+                  priceId={price.id}
+                  planName={price.product.name}
+                  memberCount={price.memberCount}
+                  claim={price.claim}
+                />
               </CardContent>
             </MotionCard>
           ))}
@@ -136,3 +140,178 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
     </div>
   );
 };
+
+const BillingDialog = ({
+  priceId,
+  planName,
+  claim,
+}: {
+  priceId: string;
+  planName: string;
+  memberCount: number;
+  claim: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const organisation = useCurrentOrganisation();
+
+  const [subscriptionOption, setSubscriptionOption] = useState<'update' | 'create'>(
+    organisation.type === 'PERSONAL' && claim === INTERNAL_CLAIM_ID.INDIVIDUAL
+      ? 'update'
+      : 'create',
+  );
+
+  const [step, setStep] = useState(0);
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateOrganisationFormSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const { mutateAsync: createSubscription, isPending: isCreatingSubscription } =
+    trpc.billing.subscription.create.useMutation();
+
+  const { mutateAsync: createOrganisation, isPending: isCreatingOrganisation } =
+    trpc.organisation.create.useMutation();
+
+  const isPending = isCreatingSubscription || isCreatingOrganisation;
+
+  const onSubscribeClick = async () => {
+    try {
+      let redirectUrl = '';
+
+      if (subscriptionOption === 'update') {
+        const createSubscriptionResponse = await createSubscription({
+          organisationId: organisation.id,
+          priceId,
+        });
+
+        redirectUrl = createSubscriptionResponse.redirectUrl;
+      } else {
+        const createOrganisationResponse = await createOrganisation({
+          name: form.getValues('name'),
+          priceId,
+        });
+
+        if (!createOrganisationResponse.paymentRequired) {
+          setIsOpen(false);
+          return;
+        }
+
+        redirectUrl = createOrganisationResponse.checkoutUrl;
+      }
+
+      window.location.href = redirectUrl;
+    } catch (_err) {
+      toast({
+        title: t`Something went wrong`,
+        description: t`An error occurred while trying to create a checkout session.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
+      <DialogTrigger asChild>
+        <Button>
+          <Trans>Subscribe</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Subscribe</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>You are about to subscribe to the {planName}</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === 0 ? (
+          <div>
+            <RadioGroup
+              className="space-y-2"
+              value={subscriptionOption}
+              onValueChange={(value) => setSubscriptionOption(value as 'update' | 'create')}
+            >
+              <div className="flex items-start space-x-3 space-y-0">
+                <RadioGroupItem value="update" id="update" />
+                <div className="space-y-1.5 leading-none">
+                  <Label htmlFor="update" className="flex items-center gap-2 font-medium">
+                    <Building2Icon className="h-4 w-4" />
+                    <Trans>Update current organisation</Trans>
+                  </Label>
+                  <p className="text-muted-foreground text-sm">
+                    <Trans>
+                      Upgrade <strong>{organisation.name}</strong> to {planName}
+                    </Trans>
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-start space-x-3 space-y-0">
+                <RadioGroupItem value="create" id="create" />
+                <div className="space-y-1.5 leading-none">
+                  <Label htmlFor="create" className="flex items-center gap-2 font-medium">
+                    <PlusIcon className="h-4 w-4" />
+                    <Trans>Create separate organisation</Trans>
+                  </Label>
+                  <p className="text-muted-foreground text-sm">
+                    <Trans>
+                      Create a new organisation with {planName} plan. Keep your current organisation
+                      on it's current plan
+                    </Trans>
+                  </p>
+                </div>
+              </div>
+            </RadioGroup>
+          </div>
+        ) : (
+          <Form {...form}>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Organisation Name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </Form>
+        )}
+
+        <DialogFooter>
+          <DialogClose>
+            <Button disabled={isPending} variant="secondary">
+              <Trans>Close</Trans>
+            </Button>
+          </DialogClose>
+
+          {subscriptionOption === 'create' && step === 0 ? (
+            <Button className="mt-4" loading={isPending} onClick={() => setStep(1)}>
+              <Trans>Continue</Trans>
+            </Button>
+          ) : (
+            <Button className="mt-4" loading={isPending} onClick={() => void onSubscribeClick()}>
+              <Trans>Checkout</Trans>
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/billing-portal-button.tsx

@@ -1,48 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type BillingPortalButtonProps = {
-  buttonProps?: React.ComponentProps<typeof Button>;
-  children?: React.ReactNode;
-};
-
-export const BillingPortalButton = ({ buttonProps, children }: BillingPortalButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.profile.createBillingPortal.useMutation({
-      onSuccess: (sessionUrl) => {
-        window.open(sessionUrl, '_blank');
-      },
-      onError: (err) => {
-        let description = _(
-          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
-        );
-
-        if (err.message === 'CUSTOMER_NOT_FOUND') {
-          description = _(
-            msg`You do not currently have a customer record, this should not happen. Please contact support for assistance.`,
-          );
-        }
-
-        toast({
-          title: _(msg`Something went wrong`),
-          description,
-          variant: 'destructive',
-          duration: 10000,
-        });
-      },
-    });
-
-  return (
-    <Button {...buttonProps} onClick={async () => createBillingPortal()} loading={isPending}>
-      {children || <Trans>Manage Subscription</Trans>}
-    </Button>
-  );
-};

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -47,6 +47,7 @@ export type DocumentSigningPageViewProps = {
   completedFields: CompletedField[];
   isRecipientsTurn: boolean;
   allRecipients?: RecipientWithFields[];
+  includeSenderDetails: boolean;
 };
 
 export const DocumentSigningPageView = ({
@@ -56,18 +57,16 @@ export const DocumentSigningPageView = ({
   completedFields,
   isRecipientsTurn,
   allRecipients = [],
+  includeSenderDetails,
 }: DocumentSigningPageViewProps) => {
   const { documentData, documentMeta } = document;
 
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(allRecipients?.[0]?.id);
 
-  const shouldUseTeamDetails =
-    document.teamId && document.team?.teamGlobalSettings?.includeSenderDetails === false;
-
   let senderName = document.user.name ?? '';
   let senderEmail = `(${document.user.email})`;
 
-  if (shouldUseTeamDetails) {
+  if (includeSenderDetails) {
     senderName = document.team?.name ?? '';
     senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
   }
@@ -92,7 +91,7 @@ export const DocumentSigningPageView = ({
             <span className="text-muted-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to view this document
                     </Trans>
@@ -101,7 +100,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.SIGNER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to sign this document
                     </Trans>
@@ -110,7 +109,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.APPROVER, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to approve this document
                     </Trans>
@@ -119,7 +118,7 @@ export const DocumentSigningPageView = ({
                   ),
                 )
                 .with(RecipientRole.ASSISTANT, () =>
-                  document.teamId && !shouldUseTeamDetails ? (
+                  includeSenderDetails ? (
                     <Trans>
                       on behalf of "{document.team?.name}" has invited you to assist this document
                     </Trans>

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -10,6 +10,7 @@ import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -21,7 +22,7 @@ import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export interface DocumentDropZoneWrapperProps {
   children: ReactNode;
@@ -34,10 +35,11 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
   const { user } = useSession();
   const { folderId } = useParams();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const navigate = useNavigate();
   const analytics = useAnalytics();
+  const organisation = useCurrentOrganisation();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -53,7 +55,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
 
   const onFileDrop = async (file: File) => {
     if (isUploadDisabled && IS_BILLING_ENABLED()) {
-      await navigate('/settings/billing');
+      await navigate(`/o/${organisation.url}/settings/billing`);
       return;
     }
 
@@ -83,11 +85,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
         timestamp: new Date().toISOString(),
       });
 
-      await navigate(
-        folderId
-          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
-          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
-      );
+      await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -156,7 +154,7 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
 
             {isUploadDisabled && IS_BILLING_ENABLED() && (
               <Link
-                to="/settings/billing"
+                to={`/o/${organisation.url}/settings/billing`}
                 className="mt-4 text-sm text-amber-500 hover:underline dark:text-amber-400"
               >
                 <Trans>Upgrade your plan to upload more documents</Trans>

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -29,13 +29,12 @@ import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentEditFormProps = {
   className?: string;
   initialDocument: TDocument;
   documentRootPath: string;
-  isDocumentEnterprise: boolean;
 };
 
 type EditDocumentStep = 'settings' | 'signers' | 'fields' | 'subject';
@@ -45,7 +44,6 @@ export const DocumentEditForm = ({
   className,
   initialDocument,
   documentRootPath,
-  isDocumentEnterprise,
 }: DocumentEditFormProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
@@ -53,7 +51,7 @@ export const DocumentEditForm = ({
   const navigate = useNavigate();
 
   const [searchParams] = useSearchParams();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
 
@@ -355,10 +353,9 @@ export const DocumentEditForm = ({
               key={recipients.length}
               documentFlow={documentFlow.settings}
               document={document}
-              currentTeamMemberRole={team?.currentTeamMember?.role}
+              currentTeamMemberRole={team.currentTeamRole}
               recipients={recipients}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
             />
@@ -370,7 +367,6 @@ export const DocumentEditForm = ({
               signingOrder={document.documentMeta?.signingOrder}
               allowDictateNextSigner={document.documentMeta?.allowDictateNextSigner}
               fields={fields}
-              isDocumentEnterprise={isDocumentEnterprise}
               onSubmit={onAddSignersFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
@@ -382,7 +378,7 @@ export const DocumentEditForm = ({
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
-              teamId={team?.id}
+              teamId={team.id}
             />
 
             <AddSubjectFormPartial

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -19,7 +19,7 @@ export type DocumentPageViewButtonProps = {
   document: Document & {
     user: Pick<User, 'id' | 'name' | 'email'>;
     recipients: Recipient[];
-    team: Pick<Team, 'id' | 'url'> | null;
+    team: Pick<Team, 'id' | 'url'>;
   };
 };
 
@@ -37,10 +37,8 @@ export const DocumentPageViewButton = ({ document }: DocumentPageViewButtonProps
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
   const role = recipient?.role;
 
-  const documentsPath = formatDocumentsPath(document.team?.url);
-  const formatPath = document.folderId
-    ? `${documentsPath}/f/${document.folderId}/${document.id}/edit`
-    : `${documentsPath}/${document.id}/edit`;
+  const documentsPath = formatDocumentsPath(document.team.url);
+  const formatPath = `${documentsPath}/${document.id}/edit`;
 
   const onDownloadClick = async () => {
     try {

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -36,7 +36,7 @@ import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialo
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentPageViewDropdownProps = {
   document: Document & {
@@ -52,7 +52,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const { _ } = useLingui();
 
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -67,7 +67,7 @@ export const DocumentPageViewDropdown = ({ document }: DocumentPageViewDropdownP
   const isCurrentTeamDocument = team && document.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
-  const documentsPath = formatDocumentsPath(team?.url);
+  const documentsPath = formatDocumentsPath(team.url);
 
   const onDownloadClick = async () => {
     try {

apps/remix/app/components/general/document/document-upload.tsx

@@ -3,12 +3,12 @@ import { useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -26,7 +26,7 @@ import {
 } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type DocumentUploadDropzoneProps = {
   className?: string;
@@ -38,10 +38,11 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { user } = useSession();
   const { folderId } = useParams();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const navigate = useNavigate();
   const analytics = useAnalytics();
+  const organisation = useCurrentOrganisation();
 
   const userTimezone =
     TIME_ZONES.find((timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone) ??
@@ -54,10 +55,12 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
   const disabledMessage = useMemo(() => {
+    if (organisation.subscription && remaining.documents === 0) {
+      return msg`Document upload disabled due to unpaid invoices`;
+    }
+
     if (remaining.documents === 0) {
-      return team
-        ? msg`Document upload disabled due to unpaid invoices`
-        : msg`You have reached your document limit.`;
+      return msg`You have reached your document limit.`;
     }
 
     if (!user.emailVerified) {
@@ -81,6 +84,8 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
 
       void refreshLimits();
 
+      await navigate(`${formatDocumentsPath(team.url)}/${id}/edit`);
+
       toast({
         title: _(msg`Document uploaded`),
         description: _(msg`Your document has been uploaded successfully.`),
@@ -92,12 +97,6 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
         documentId: id,
         timestamp: new Date().toISOString(),
       });
-
-      await navigate(
-        folderId
-          ? `${formatDocumentsPath(team?.url)}/f/${folderId}/${id}/edit`
-          : `${formatDocumentsPath(team?.url)}/${id}/edit`,
-      );
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -138,6 +137,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
           <TooltipTrigger asChild>
             <div>
               <DocumentDropzone
+                loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
                 onDrop={onFileDrop}
@@ -145,6 +145,7 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
               />
             </div>
           </TooltipTrigger>
+
           {team?.id === undefined &&
             remaining.documents > 0 &&
             Number.isFinite(remaining.documents) && (
@@ -158,12 +159,6 @@ export const DocumentUploadDropzone = ({ className }: DocumentUploadDropzoneProp
             )}
         </Tooltip>
       </TooltipProvider>
-
-      {isLoading && (
-        <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
-          <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
-        </div>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/generic-error-layout.tsx

@@ -7,11 +7,8 @@ import { ChevronLeft } from 'lucide-react';
 import { Link, useNavigate } from 'react-router';
 
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
-
 type ErrorCodeMap = Record<
   number,
   { subHeading: MessageDescriptor; heading: MessageDescriptor; message: MessageDescriptor }
@@ -22,7 +19,7 @@ export type GenericErrorLayoutProps = {
   errorCode?: number;
   errorCodeMap?: ErrorCodeMap;
   /**
-   * The primary button to display. If left as undefined, the default /documents link will be displayed.
+   * The primary button to display. If left as undefined, the default home link will be displayed.
    *
    * Set to null if you want no button.
    */
@@ -59,8 +56,6 @@ export const GenericErrorLayout = ({
   const navigate = useNavigate();
   const { _ } = useLingui();
 
-  const team = useOptionalCurrentTeam();
-
   const { subHeading, heading, message } =
     errorCodeMap[errorCode || 500] ?? defaultErrorCodeMap[500];
 
@@ -110,8 +105,8 @@ export const GenericErrorLayout = ({
             {primaryButton ||
               (primaryButton !== null && (
                 <Button asChild>
-                  <Link to={formatDocumentsPath(team?.url)}>
-                    <Trans>Documents</Trans>
+                  <Link to={'/'}>
+                    <Trans>Home</Trans>
                   </Link>
                 </Button>
               ))}

apps/remix/app/components/general/menu-switcher.tsx

@@ -3,19 +3,14 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { motion } from 'framer-motion';
-import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
-import { Link, useLocation } from 'react-router';
+import { ChevronsUpDown, Plus } from 'lucide-react';
+import { Link } from 'react-router';
 
 import { authClient } from '@documenso/auth/client';
-import type { SessionUser } from '@documenso/auth/server/lib/session/session';
-import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
-import type { TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { isAdmin } from '@documenso/lib/utils/is-admin';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { trpc } from '@documenso/trpc/react';
 import { LanguageSwitcherDialog } from '@documenso/ui/components/common/language-switcher-dialog';
 import { cn } from '@documenso/ui/lib/utils';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -24,79 +19,27 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
-const MotionLink = motion(Link);
-
-export type MenuSwitcherProps = {
-  user: SessionUser;
-  teams: TGetTeamsResponse;
-};
-
-export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProps) => {
+export const MenuSwitcher = () => {
   const { _ } = useLingui();
 
-  const { pathname } = useLocation();
+  const { user } = useSession();
 
   const [languageSwitcherOpen, setLanguageSwitcherOpen] = useState(false);
 
   const isUserAdmin = isAdmin(user);
 
-  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
-    initialData: initialTeamsData,
-  });
-
-  const teams = teamsQueryResult && teamsQueryResult.length > 0 ? teamsQueryResult : null;
-
-  const isPathTeamUrl = (teamUrl: string) => {
-    if (!pathname || !pathname.startsWith(`/t/`)) {
-      return false;
-    }
-
-    return pathname.split('/')[2] === teamUrl;
-  };
-
-  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
-
-  const formatAvatarFallback = (teamName?: string) => {
-    if (teamName !== undefined) {
-      return teamName.slice(0, 1).toUpperCase();
+  const formatAvatarFallback = (name?: string) => {
+    if (name !== undefined) {
+      return name.slice(0, 1).toUpperCase();
     }
 
     return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
   };
 
-  const formatSecondaryAvatarText = (team?: typeof selectedTeam) => {
-    if (!team) {
-      return _(msg`Personal Account`);
-    }
-
-    if (team.ownerUserId === user.id) {
-      return _(msg`Owner`);
-    }
-
-    return _(TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role]);
-  };
-
-  /**
-   * Formats the redirect URL so we can switch between documents and templates page
-   * seemlessly between teams and personal accounts.
-   */
-  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
-    const baseUrl = teamUrl ? `/t/${teamUrl}` : '';
-
-    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
-
-    if (currentPathname === '/templates') {
-      return `${baseUrl}/templates`;
-    }
-
-    return baseUrl;
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -106,12 +49,10 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
           className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
         >
           <AvatarWithText
-            avatarSrc={formatAvatarUrl(
-              selectedTeam ? selectedTeam.avatarImageId : user.avatarImageId,
-            )}
-            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
-            primaryText={selectedTeam ? selectedTeam.name : user.name}
-            secondaryText={formatSecondaryAvatarText(selectedTeam)}
+            avatarSrc={formatAvatarUrl(user.avatarImageId)}
+            avatarFallback={formatAvatarFallback(user.name || user.email)}
+            primaryText={user.name}
+            secondaryText={_(msg`Personal Account`)}
             rightSideComponent={
               <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
             }
@@ -121,128 +62,19 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className={cn('z-[60] ml-6 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        className={cn('z-[60] ml-6 w-full min-w-[12rem] md:ml-0')}
         align="end"
         forceMount
       >
-        {teams ? (
-          <>
-            <DropdownMenuLabel>
-              <Trans>Personal</Trans>
-            </DropdownMenuLabel>
-
-            <DropdownMenuItem asChild>
-              <Link to={formatRedirectUrlOnSwitch()}>
-                <AvatarWithText
-                  avatarSrc={formatAvatarUrl(user.avatarImageId)}
-                  avatarFallback={formatAvatarFallback()}
-                  primaryText={user.name}
-                  secondaryText={formatSecondaryAvatarText()}
-                  rightSideComponent={
-                    !pathname?.startsWith(`/t/`) && (
-                      <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
-                    )
-                  }
-                />
-              </Link>
-            </DropdownMenuItem>
-
-            <DropdownMenuSeparator className="mt-2" />
-
-            <DropdownMenuLabel>
-              <div className="flex flex-row items-center justify-between">
-                <p>
-                  <Trans>Teams</Trans>
-                </p>
-
-                <div className="flex flex-row space-x-2">
-                  <DropdownMenuItem asChild>
-                    <Button
-                      title={_(msg`Manage teams`)}
-                      variant="ghost"
-                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
-                      asChild
-                    >
-                      <Link to="/settings/teams">
-                        <Settings2 className="h-4 w-4" />
-                      </Link>
-                    </Button>
-                  </DropdownMenuItem>
-
-                  <DropdownMenuItem asChild>
-                    <Button
-                      title={_(msg`Create team`)}
-                      variant="ghost"
-                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
-                      asChild
-                    >
-                      <Link to="/settings/teams?action=add-team">
-                        <Plus className="h-4 w-4" />
-                      </Link>
-                    </Button>
-                  </DropdownMenuItem>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-
-            <div className="custom-scrollbar max-h-[40vh] overflow-auto">
-              {teams.map((team) => (
-                <DropdownMenuItem asChild key={team.id}>
-                  <MotionLink
-                    initial="initial"
-                    animate="initial"
-                    whileHover="animate"
-                    to={formatRedirectUrlOnSwitch(team.url)}
-                  >
-                    <AvatarWithText
-                      avatarSrc={formatAvatarUrl(team.avatarImageId)}
-                      avatarFallback={formatAvatarFallback(team.name)}
-                      primaryText={team.name}
-                      textSectionClassName="w-[200px]"
-                      secondaryText={
-                        <div className="relative w-full">
-                          <motion.span
-                            className="overflow-hidden"
-                            variants={{
-                              initial: { opacity: 1, translateY: 0 },
-                              animate: { opacity: 0, translateY: '100%' },
-                            }}
-                          >
-                            {formatSecondaryAvatarText(team)}
-                          </motion.span>
-
-                          <motion.span
-                            className="absolute inset-0"
-                            variants={{
-                              initial: { opacity: 0, translateY: '100%' },
-                              animate: { opacity: 1, translateY: 0 },
-                            }}
-                          >{`/t/${team.url}`}</motion.span>
-                        </div>
-                      }
-                      rightSideComponent={
-                        isPathTeamUrl(team.url) && (
-                          <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
-                        )
-                      }
-                    />
-                  </MotionLink>
-                </DropdownMenuItem>
-              ))}
-            </div>
-          </>
-        ) : (
-          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-            <Link
-              to="/settings/teams?action=add-team"
-              className="flex items-center justify-between"
-            >
-              <Trans>Create team</Trans>
-              <Plus className="ml-2 h-4 w-4" />
-            </Link>
-          </DropdownMenuItem>
-        )}
-
+        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <Link
+            to="/settings/organisations?action=add-organisation"
+            className="flex items-center justify-between"
+          >
+            <Trans>Create Organisation</Trans>
+            <Plus className="ml-2 h-4 w-4" />
+          </Link>
+        </DropdownMenuItem>
         <DropdownMenuSeparator />
 
         {isUserAdmin && (
@@ -253,21 +85,18 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
           </DropdownMenuItem>
         )}
 
+        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <Link to="/inbox">
+            <Trans>Personal Inbox</Trans>
+          </Link>
+        </DropdownMenuItem>
+
         <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
           <Link to="/settings/profile">
             <Trans>User settings</Trans>
           </Link>
         </DropdownMenuItem>
 
-        {selectedTeam &&
-          canExecuteTeamAction('MANAGE_TEAM', selectedTeam.currentTeamMember.role) && (
-            <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
-              <Link to={`/t/${selectedTeam.url}/settings`}>
-                <Trans>Team settings</Trans>
-              </Link>
-            </DropdownMenuItem>
-          )}
-
         <DropdownMenuItem
           className="text-muted-foreground px-4 py-2"
           onClick={() => setLanguageSwitcherOpen(true)}

apps/remix/app/components/general/org-menu-switcher.tsx

@@ -0,0 +1,338 @@
+import { useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import {
+  Building2Icon,
+  ChevronsUpDown,
+  Plus,
+  Settings2Icon,
+  SettingsIcon,
+  UsersIcon,
+} from 'lucide-react';
+import { Link, useLocation } from 'react-router';
+
+import { authClient } from '@documenso/auth/client';
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
+import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { isAdmin } from '@documenso/lib/utils/is-admin';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { LanguageSwitcherDialog } from '@documenso/ui/components/common/language-switcher-dialog';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export const OrgMenuSwitcher = () => {
+  const { _ } = useLingui();
+
+  const { user, organisations } = useSession();
+
+  const { pathname } = useLocation();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [languageSwitcherOpen, setLanguageSwitcherOpen] = useState(false);
+  const [hoveredOrgId, setHoveredOrgId] = useState<string | null>(null);
+
+  const isUserAdmin = isAdmin(user);
+
+  const isPathOrgUrl = (orgUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/o/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === orgUrl;
+  };
+
+  const selectedOrg = organisations.find((org) => isPathOrgUrl(org.url));
+  const hoveredOrg = organisations.find(
+    (org) => org.id === hoveredOrgId || organisations.length === 1,
+  );
+
+  const currentOrganisation = useOptionalCurrentOrganisation();
+  const currentTeam = useOptionalCurrentTeam();
+
+  // Use hovered org for teams display if available,
+  // otherwise use current team's org if in a team,
+  // finally fallback to selected org
+  const displayedOrg = hoveredOrg || currentOrganisation || selectedOrg;
+
+  const formatAvatarFallback = (name?: string) => {
+    if (name !== undefined) {
+      return name.slice(0, 1).toUpperCase();
+    }
+
+    return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
+  };
+
+  const dropdownMenuAvatarText = useMemo(() => {
+    if (currentTeam) {
+      return {
+        avatarSrc: formatAvatarUrl(currentTeam.avatarImageId),
+        avatarFallback: formatAvatarFallback(currentTeam.name),
+        primaryText: currentTeam.name,
+        secondaryText: _(EXTENDED_TEAM_MEMBER_ROLE_MAP[currentTeam.currentTeamRole]),
+      };
+    }
+
+    if (currentOrganisation) {
+      return {
+        avatarSrc: formatAvatarUrl(currentOrganisation.avatarImageId),
+        avatarFallback: formatAvatarFallback(currentOrganisation.name),
+        primaryText: currentOrganisation.name,
+        secondaryText: _(
+          EXTENDED_ORGANISATION_MEMBER_ROLE_MAP[currentOrganisation.currentOrganisationRole],
+        ),
+      };
+    }
+
+    return {
+      avatarSrc: formatAvatarUrl(user.avatarImageId),
+      avatarFallback: formatAvatarFallback(user.name ?? user.email),
+      primaryText: user.name,
+      secondaryText: _(msg`Personal Account`),
+    };
+  }, [currentTeam, currentOrganisation, user]);
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setHoveredOrgId(currentOrganisation?.id || null);
+    }
+
+    setIsOpen(open);
+  };
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="menu-switcher"
+          variant="none"
+          className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
+        >
+          <AvatarWithText
+            avatarSrc={dropdownMenuAvatarText.avatarSrc}
+            avatarFallback={dropdownMenuAvatarText.avatarFallback}
+            primaryText={dropdownMenuAvatarText.primaryText}
+            secondaryText={dropdownMenuAvatarText.secondaryText}
+            rightSideComponent={
+              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+            }
+            textSectionClassName="hidden lg:flex"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className={cn(
+          'divide-border z-[60] ml-6 flex w-full divide-x p-0 md:ml-0 md:min-w-[40rem]',
+        )}
+        align="end"
+        forceMount
+      >
+        <div className="flex h-[400px] w-full divide-x">
+          {/* Organisations column */}
+          <div className="flex w-full flex-col md:w-1/3">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <Building2Icon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Organisations</Trans>
+              </h3>
+            </div>
+            <div className="flex-1 space-y-1 overflow-y-auto p-1.5">
+              {organisations.map((org) => (
+                <div
+                  className="group relative"
+                  key={org.id}
+                  onMouseEnter={() => setHoveredOrgId(org.id)}
+                >
+                  <DropdownMenuItem
+                    className={cn(
+                      'text-muted-foreground w-full px-4 py-2',
+                      org.id === currentOrganisation?.id && !hoveredOrgId && 'bg-accent',
+                      org.id === hoveredOrgId && 'bg-accent',
+                    )}
+                    asChild
+                  >
+                    <Link to={`/o/${org.url}`} className="flex items-center space-x-2 pr-8">
+                      <span
+                        className={cn('min-w-0 flex-1 truncate', {
+                          'font-semibold': org.id === selectedOrg?.id,
+                        })}
+                      >
+                        {org.name}
+                      </span>
+                    </Link>
+                  </DropdownMenuItem>
+
+                  {canExecuteOrganisationAction(
+                    'MANAGE_ORGANISATION',
+                    org.currentOrganisationRole,
+                  ) && (
+                    <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
+                      <Link
+                        to={`/o/${org.url}/settings`}
+                        className="text-muted-foreground mr-2 rounded-sm border p-1 transition-opacity duration-200 group-hover:opacity-100 md:opacity-0"
+                      >
+                        <Settings2Icon className="h-3.5 w-3.5" />
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              <Button variant="ghost" className="w-full justify-start" asChild>
+                <Link to="/settings/organisations?action=add-organisation">
+                  <Plus className="mr-2 h-4 w-4" />
+                  <Trans>Create Organisation</Trans>
+                </Link>
+              </Button>
+            </div>
+          </div>
+
+          {/* Teams column */}
+          <div className="hidden w-1/3 flex-col md:flex">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <UsersIcon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Teams</Trans>
+              </h3>
+            </div>
+            <div className="flex-1 space-y-1 overflow-y-auto p-1.5">
+              <AnimateGenericFadeInOut key={displayedOrg ? 'displayed-org' : 'no-org'}>
+                {hoveredOrg ? (
+                  hoveredOrg.teams.map((team) => (
+                    <div className="group relative" key={team.id}>
+                      <DropdownMenuItem
+                        className={cn(
+                          'text-muted-foreground w-full px-4 py-2',
+                          team.id === currentTeam?.id && 'bg-accent',
+                        )}
+                        asChild
+                      >
+                        <Link to={`/t/${team.url}`} className="flex items-center space-x-2 pr-8">
+                          <span
+                            className={cn('min-w-0 flex-1 truncate', {
+                              'font-semibold': team.id === currentTeam?.id,
+                            })}
+                          >
+                            {team.name}
+                          </span>
+                        </Link>
+                      </DropdownMenuItem>
+
+                      {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
+                        <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
+                          <Link
+                            to={`/t/${team.url}/settings`}
+                            className="text-muted-foreground mr-2 rounded-sm border p-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                          >
+                            <Settings2Icon className="h-3.5 w-3.5" />
+                          </Link>
+                        </div>
+                      )}
+                    </div>
+                  ))
+                ) : (
+                  <div className="text-muted-foreground my-12 flex items-center justify-center px-2 text-center text-sm">
+                    <Trans>Select an organisation to view teams</Trans>
+                  </div>
+                )}
+
+                {displayedOrg && (
+                  <Button variant="ghost" className="w-full justify-start" asChild>
+                    <Link to={`/o/${displayedOrg.url}/settings/teams?action=add-team`}>
+                      <Plus className="mr-2 h-4 w-4" />
+                      <Trans>Create Team</Trans>
+                    </Link>
+                  </Button>
+                )}
+              </AnimateGenericFadeInOut>
+            </div>
+          </div>
+
+          {/* Settings column */}
+          <div className="hidden w-1/3 flex-col md:flex">
+            <div className="flex h-12 items-center border-b p-2">
+              <h3 className="text-muted-foreground flex items-center px-2 text-sm font-medium">
+                <SettingsIcon className="mr-2 h-3.5 w-3.5" />
+                <Trans>Settings</Trans>
+              </h3>
+            </div>
+            <div className="flex-1 overflow-y-auto p-1.5">
+              {isUserAdmin && (
+                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                  <Link to="/admin">
+                    <Trans>Admin panel</Trans>
+                  </Link>
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/inbox">
+                  <Trans>Personal Inbox</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                <Link to="/settings/profile">
+                  <Trans>Account</Trans>
+                </Link>
+              </DropdownMenuItem>
+
+              {currentOrganisation &&
+                canExecuteOrganisationAction(
+                  'MANAGE_ORGANISATION',
+                  currentOrganisation.currentOrganisationRole,
+                ) && (
+                  <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                    <Link to={`/o/${currentOrganisation.url}/settings`}>
+                      <Trans>Organisation settings</Trans>
+                    </Link>
+                  </DropdownMenuItem>
+                )}
+
+              {currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
+                <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+                  <Link to={`/t/${currentTeam.url}/settings`}>
+                    <Trans>Team settings</Trans>
+                  </Link>
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuItem
+                className="text-muted-foreground px-4 py-2"
+                onClick={() => setLanguageSwitcherOpen(true)}
+              >
+                <Trans>Language</Trans>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                className="text-muted-foreground hover:!text-muted-foreground px-4 py-2"
+                onSelect={async () => authClient.signOut()}
+              >
+                <Trans>Sign Out</Trans>
+              </DropdownMenuItem>
+            </div>
+          </div>
+        </div>
+      </DropdownMenuContent>
+
+      <LanguageSwitcherDialog open={languageSwitcherOpen} setOpen={setLanguageSwitcherOpen} />
+    </DropdownMenu>
+  );
+};

apps/remix/app/components/general/organisations/organisation-billing-banner.tsx

@@ -3,12 +3,12 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { TeamMemberRole } from '@prisma/client';
 import { SubscriptionStatus } from '@prisma/client';
 import { AlertTriangle } from 'lucide-react';
 import { match } from 'ts-pattern';
 
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -21,30 +21,22 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export type TeamLayoutBillingBannerProps = {
-  subscriptionStatus: SubscriptionStatus;
-  teamId: number;
-  userRole: TeamMemberRole;
-};
-
-export const TeamLayoutBillingBanner = ({
-  subscriptionStatus,
-  teamId,
-  userRole,
-}: TeamLayoutBillingBannerProps) => {
+export const OrganisationBillingBanner = () => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.team.createBillingPortal.useMutation();
+  const organisation = useOptionalCurrentOrganisation();
 
-  const handleCreatePortal = async () => {
+  const { mutateAsync: manageSubscription, isPending } =
+    trpc.billing.subscription.manage.useMutation();
+
+  const handleCreatePortal = async (organisationId: string) => {
     try {
-      const sessionUrl = await createBillingPortal({ teamId });
+      const { redirectUrl } = await manageSubscription({ organisationId });
 
-      window.open(sessionUrl, '_blank');
+      window.open(redirectUrl, '_blank');
 
       setIsOpen(false);
     } catch (err) {
@@ -59,7 +51,13 @@ export const TeamLayoutBillingBanner = ({
     }
   };
 
-  if (subscriptionStatus === SubscriptionStatus.ACTIVE) {
+  const subscriptionStatus = organisation?.subscription?.status;
+
+  if (
+    !organisation ||
+    subscriptionStatus === undefined ||
+    subscriptionStatus === SubscriptionStatus.ACTIVE
+  ) {
     return null;
   }
 
@@ -79,14 +77,14 @@ export const TeamLayoutBillingBanner = ({
 
             {match(subscriptionStatus)
               .with(SubscriptionStatus.PAST_DUE, () => <Trans>Payment overdue</Trans>)
-              .with(SubscriptionStatus.INACTIVE, () => <Trans>Teams restricted</Trans>)
+              .with(SubscriptionStatus.INACTIVE, () => <Trans>Restricted Access</Trans>)
               .exhaustive()}
           </div>
 
           <Button
-            variant="ghost"
+            variant="outline"
             className={cn({
-              'text-yellow-900 hover:bg-yellow-100 hover:text-yellow-900 dark:hover:bg-yellow-500':
+              'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500':
                 subscriptionStatus === SubscriptionStatus.PAST_DUE,
               'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
                 subscriptionStatus === SubscriptionStatus.INACTIVE,
@@ -125,9 +123,9 @@ export const TeamLayoutBillingBanner = ({
             ))
             .otherwise(() => null)}
 
-          {canExecuteTeamAction('MANAGE_BILLING', userRole) && (
+          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
             <DialogFooter>
-              <Button loading={isPending} onClick={handleCreatePortal}>
+              <Button loading={isPending} onClick={async () => handleCreatePortal(organisation.id)}>
                 <Trans>Resolve payment</Trans>
               </Button>
             </DialogFooter>

apps/remix/app/components/general/organisations/organisation-billing-portal-button.tsx

@@ -0,0 +1,58 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type OrganisationBillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+};
+
+export const OrganisationBillingPortalButton = ({
+  buttonProps,
+}: OrganisationBillingPortalButtonProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: manageSubscription, isPending } =
+    trpc.billing.subscription.manage.useMutation();
+
+  const canManageBilling = canExecuteOrganisationAction(
+    'MANAGE_BILLING',
+    organisation.currentOrganisationRole,
+  );
+
+  const handleCreatePortal = async () => {
+    try {
+      const { redirectUrl } = await manageSubscription({ organisationId: organisation.id });
+
+      window.open(redirectUrl, '_blank');
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  return (
+    <Button
+      {...buttonProps}
+      onClick={async () => handleCreatePortal()}
+      loading={isPending}
+      disabled={!canManageBilling}
+    >
+      <Trans>Manage billing</Trans>
+    </Button>
+  );
+};

apps/remix/app/components/general/organisations/organisation-invitations.tsx

@@ -1,11 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
+import { OrganisationMemberInviteStatus } from '@prisma/client';
 import { AnimatePresence } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { formatTeamUrl } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -21,14 +22,16 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-export const TeamInvitations = () => {
-  const { data, isLoading } = trpc.team.getTeamInvitations.useQuery();
+export const OrganisationInvitations = ({ className }: { className?: string }) => {
+  const { data, isLoading } = trpc.organisation.member.invite.getMany.useQuery({
+    status: OrganisationMemberInviteStatus.PENDING,
+  });
 
   return (
     <AnimatePresence>
       {data && data.length > 0 && !isLoading && (
         <AnimateGenericFadeInOut>
-          <Alert variant="secondary">
+          <Alert variant="secondary" className={className}>
             <div className="flex h-full flex-row items-center p-2">
               <BellIcon className="mr-4 h-5 w-5 text-blue-800" />
 
@@ -37,12 +40,12 @@ export const TeamInvitations = () => {
                   value={data.length}
                   one={
                     <span>
-                      You have <strong>1</strong> pending team invitation
+                      You have <strong>1</strong> pending invitation
                     </span>
                   }
                   other={
                     <span>
-                      You have <strong>#</strong> pending team invitations
+                      You have <strong>#</strong> pending invitations
                     </span>
                   }
                 />
@@ -66,12 +69,12 @@ export const TeamInvitations = () => {
                         value={data.length}
                         one={
                           <span>
-                            You have <strong>1</strong> pending team invitation
+                            You have <strong>1</strong> pending invitation
                           </span>
                         }
                         other={
                           <span>
-                            You have <strong>#</strong> pending team invitations
+                            You have <strong>#</strong> pending invitations
                           </span>
                         }
                       />
@@ -80,24 +83,26 @@ export const TeamInvitations = () => {
 
                   <ul className="-mx-6 -mb-6 max-h-[80vh] divide-y overflow-auto px-6 pb-6 xl:max-h-[70vh]">
                     {data.map((invitation) => (
-                      <li key={invitation.teamId}>
-                        <AvatarWithText
-                          avatarSrc={formatAvatarUrl(invitation.team.avatarImageId)}
-                          className="w-full max-w-none py-4"
-                          avatarFallback={invitation.team.name.slice(0, 1)}
-                          primaryText={
-                            <span className="text-foreground/80 font-semibold">
-                              {invitation.team.name}
-                            </span>
-                          }
-                          secondaryText={formatTeamUrl(invitation.team.url)}
-                          rightSideComponent={
-                            <div className="ml-auto space-x-2">
-                              <DeclineTeamInvitationButton teamId={invitation.team.id} />
-                              <AcceptTeamInvitationButton teamId={invitation.team.id} />
-                            </div>
-                          }
-                        />
+                      <li key={invitation.id}>
+                        <Alert variant="neutral" className="p-0 px-4">
+                          <AvatarWithText
+                            avatarSrc={formatAvatarUrl(invitation.organisation.avatarImageId)}
+                            className="w-full max-w-none py-4"
+                            avatarFallback={invitation.organisation.name.slice(0, 1)}
+                            primaryText={
+                              <span className="text-foreground/80 font-semibold">
+                                {invitation.organisation.name}
+                              </span>
+                            }
+                            secondaryText={`/o/${invitation.organisation.url}`}
+                            rightSideComponent={
+                              <div className="ml-auto space-x-2">
+                                <DeclineOrganisationInvitationButton token={invitation.token} />
+                                <AcceptOrganisationInvitationButton token={invitation.token} />
+                              </div>
+                            }
+                          />
+                        </Alert>
                       </li>
                     ))}
                   </ul>
@@ -111,26 +116,29 @@ export const TeamInvitations = () => {
   );
 };
 
-const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+const AcceptOrganisationInvitationButton = ({ token }: { token: string }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const {
-    mutateAsync: acceptTeamInvitation,
+    mutateAsync: acceptOrganisationInvitation,
     isPending,
     isSuccess,
-  } = trpc.team.acceptTeamInvitation.useMutation({
-    onSuccess: () => {
+  } = trpc.organisation.member.invite.accept.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
-        description: _(msg`Accepted team invitation`),
+        description: _(msg`Invitation accepted`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
         title: _(msg`Something went wrong`),
-        description: _(msg`Unable to join this team at this time.`),
+        description: _(msg`Unable to join this organisation at this time.`),
         variant: 'destructive',
         duration: 10000,
       });
@@ -139,7 +147,7 @@ const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
 
   return (
     <Button
-      onClick={async () => acceptTeamInvitation({ teamId })}
+      onClick={async () => acceptOrganisationInvitation({ token })}
       loading={isPending}
       disabled={isPending || isSuccess}
     >
@@ -148,26 +156,29 @@ const AcceptTeamInvitationButton = ({ teamId }: { teamId: number }) => {
   );
 };
 
-const DeclineTeamInvitationButton = ({ teamId }: { teamId: number }) => {
+const DeclineOrganisationInvitationButton = ({ token }: { token: string }) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { refreshSession } = useSession();
 
   const {
-    mutateAsync: declineTeamInvitation,
+    mutateAsync: declineOrganisationInvitation,
     isPending,
     isSuccess,
-  } = trpc.team.declineTeamInvitation.useMutation({
-    onSuccess: () => {
+  } = trpc.organisation.member.invite.decline.useMutation({
+    onSuccess: async () => {
+      await refreshSession();
+
       toast({
         title: _(msg`Success`),
-        description: _(msg`Declined team invitation`),
+        description: _(msg`Invitation declined`),
         duration: 5000,
       });
     },
     onError: () => {
       toast({
         title: _(msg`Something went wrong`),
-        description: _(msg`Unable to decline this team invitation at this time.`),
+        description: _(msg`Unable to decline this invitation at this time.`),
         variant: 'destructive',
         duration: 10000,
       });
@@ -176,7 +187,7 @@ const DeclineTeamInvitationButton = ({ teamId }: { teamId: number }) => {
 
   return (
     <Button
-      onClick={async () => declineTeamInvitation({ teamId })}
+      onClick={async () => declineOrganisationInvitation({ token })}
       loading={isPending}
       disabled={isPending || isSuccess}
       variant="ghost"

apps/remix/app/components/general/settings-nav-desktop.tsx

@@ -1,11 +1,22 @@
 import type { HTMLAttributes } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
+import {
+  BracesIcon,
+  CreditCardIcon,
+  Globe2Icon,
+  Lock,
+  Settings2Icon,
+  User,
+  Users,
+  WebhookIcon,
+} from 'lucide-react';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -14,7 +25,9 @@ export type SettingsDesktopNavProps = HTMLAttributes<HTMLDivElement>;
 export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = IS_BILLING_ENABLED();
+  const { organisations } = useSession();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -31,29 +44,87 @@ export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavPr
         </Button>
       </Link>
 
-      <Link to="/settings/public-profile">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-          )}
-        >
-          <Globe2Icon className="mr-2 h-5 w-5" />
-          <Trans>Public Profile</Trans>
-        </Button>
-      </Link>
+      {isPersonalLayoutMode && (
+        <>
+          <Link to="/settings/preferences">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/preferences') && 'bg-secondary',
+              )}
+            >
+              <Settings2Icon className="mr-2 h-5 w-5" />
+              <Trans>Preferences</Trans>
+            </Button>
+          </Link>
 
-      <Link to="/settings/teams">
+          <Link to="/settings/public-profile">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+              )}
+            >
+              <Globe2Icon className="mr-2 h-5 w-5" />
+              <Trans>Public Profile</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/tokens">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+              )}
+            >
+              <BracesIcon className="mr-2 h-5 w-5" />
+              <Trans>API Tokens</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/webhooks">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+              )}
+            >
+              <WebhookIcon className="mr-2 h-5 w-5" />
+              <Trans>Webhooks</Trans>
+            </Button>
+          </Link>
+
+          {IS_BILLING_ENABLED() && (
+            <Link to="/settings/billing">
+              <Button
+                variant="ghost"
+                className={cn(
+                  'w-full justify-start',
+                  pathname?.startsWith('/settings/billing') && 'bg-secondary',
+                )}
+              >
+                <CreditCardIcon className="mr-2 h-5 w-5" />
+                <Trans>Billing</Trans>
+              </Button>
+            </Link>
+          )}
+        </>
+      )}
+
+      <Link to="/settings/organisations">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+            pathname?.startsWith('/settings/organisations') && 'bg-secondary',
           )}
         >
           <Users className="mr-2 h-5 w-5" />
-          <Trans>Teams</Trans>
+          <Trans>Organisations</Trans>
         </Button>
       </Link>
 
@@ -69,47 +140,6 @@ export const SettingsDesktopNav = ({ className, ...props }: SettingsDesktopNavPr
           <Trans>Security</Trans>
         </Button>
       </Link>
-
-      <Link to="/settings/tokens">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
-          )}
-        >
-          <Braces className="mr-2 h-5 w-5" />
-          <Trans>API Tokens</Trans>
-        </Button>
-      </Link>
-
-      <Link to="/settings/webhooks">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
-          )}
-        >
-          <Webhook className="mr-2 h-5 w-5" />
-          <Trans>Webhooks</Trans>
-        </Button>
-      </Link>
-
-      {isBillingEnabled && (
-        <Link to="/settings/billing">
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith('/settings/billing') && 'bg-secondary',
-            )}
-          >
-            <CreditCard className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/settings-nav-mobile.tsx

@@ -1,10 +1,21 @@
 import type { HTMLAttributes } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
+import {
+  BracesIcon,
+  CreditCardIcon,
+  Globe2Icon,
+  Lock,
+  Settings2Icon,
+  User,
+  Users,
+  WebhookIcon,
+} from 'lucide-react';
 import { Link, useLocation } from 'react-router';
 
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -13,7 +24,9 @@ export type SettingsMobileNavProps = HTMLAttributes<HTMLDivElement>;
 export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProps) => {
   const { pathname } = useLocation();
 
-  const isBillingEnabled = IS_BILLING_ENABLED();
+  const { organisations } = useSession();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
 
   return (
     <div
@@ -33,29 +46,87 @@ export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProp
         </Button>
       </Link>
 
-      <Link to="/settings/public-profile">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
-          )}
-        >
-          <Globe2Icon className="mr-2 h-5 w-5" />
-          <Trans>Public Profile</Trans>
-        </Button>
-      </Link>
+      {isPersonalLayoutMode && (
+        <>
+          <Link to="/settings/preferences">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/preferences') && 'bg-secondary',
+              )}
+            >
+              <Settings2Icon className="mr-2 h-5 w-5" />
+              <Trans>Preferences</Trans>
+            </Button>
+          </Link>
 
-      <Link to="/settings/teams">
+          <Link to="/settings/public-profile">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+              )}
+            >
+              <Globe2Icon className="mr-2 h-5 w-5" />
+              <Trans>Public Profile</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/tokens">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+              )}
+            >
+              <BracesIcon className="mr-2 h-5 w-5" />
+              <Trans>API Tokens</Trans>
+            </Button>
+          </Link>
+
+          <Link to="/settings/webhooks">
+            <Button
+              variant="ghost"
+              className={cn(
+                'w-full justify-start',
+                pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+              )}
+            >
+              <WebhookIcon className="mr-2 h-5 w-5" />
+              <Trans>Webhooks</Trans>
+            </Button>
+          </Link>
+
+          {IS_BILLING_ENABLED() && (
+            <Link to="/settings/billing">
+              <Button
+                variant="ghost"
+                className={cn(
+                  'w-full justify-start',
+                  pathname?.startsWith('/settings/billing') && 'bg-secondary',
+                )}
+              >
+                <CreditCardIcon className="mr-2 h-5 w-5" />
+                <Trans>Billing</Trans>
+              </Button>
+            </Link>
+          )}
+        </>
+      )}
+
+      <Link to="/settings/organisations">
         <Button
           variant="ghost"
           className={cn(
             'w-full justify-start',
-            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+            pathname?.startsWith('/settings/organisations') && 'bg-secondary',
           )}
         >
           <Users className="mr-2 h-5 w-5" />
-          <Trans>Teams</Trans>
+          <Trans>Organisations</Trans>
         </Button>
       </Link>
 
@@ -71,47 +142,6 @@ export const SettingsMobileNav = ({ className, ...props }: SettingsMobileNavProp
           <Trans>Security</Trans>
         </Button>
       </Link>
-
-      <Link to="/settings/tokens">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
-          )}
-        >
-          <Braces className="mr-2 h-5 w-5" />
-          <Trans>API Tokens</Trans>
-        </Button>
-      </Link>
-
-      <Link to="/settings/webhooks">
-        <Button
-          variant="ghost"
-          className={cn(
-            'w-full justify-start',
-            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
-          )}
-        >
-          <Webhook className="mr-2 h-5 w-5" />
-          <Trans>Webhooks</Trans>
-        </Button>
-      </Link>
-
-      {isBillingEnabled && (
-        <Link to="/settings/billing">
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith('/settings/billing') && 'bg-secondary',
-            )}
-          >
-            <CreditCard className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/skeletons/document-edit-skeleton.tsx

@@ -7,7 +7,7 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
 export default function DocumentEditSkeleton() {
   return (
     <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
-      <Link to="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+      <Link to="/" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         <Trans>Documents</Trans>
       </Link>

apps/remix/app/components/general/teams/team-billing-portal-button.tsx

@@ -1,43 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-
-import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TeamBillingPortalButtonProps = {
-  buttonProps?: React.ComponentProps<typeof Button>;
-  teamId: number;
-};
-
-export const TeamBillingPortalButton = ({ buttonProps, teamId }: TeamBillingPortalButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const { mutateAsync: createBillingPortal, isPending } =
-    trpc.team.createBillingPortal.useMutation();
-
-  const handleCreatePortal = async () => {
-    try {
-      const sessionUrl = await createBillingPortal({ teamId });
-
-      window.open(sessionUrl, '_blank');
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(
-          msg`We are unable to proceed to the billing portal at this time. Please try again, or contact support.`,
-        ),
-        variant: 'destructive',
-        duration: 10000,
-      });
-    }
-  };
-
-  return (
-    <Button {...buttonProps} onClick={async () => handleCreatePortal()} loading={isPending}>
-      <Trans>Manage subscription</Trans>
-    </Button>
-  );
-};

apps/remix/app/components/general/teams/team-email-dropdown.tsx

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Edit, Loader, Mail, MoreHorizontal, X } from 'lucide-react';
 
-import type { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import type { getTeamWithEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
 import { trpc } from '@documenso/trpc/react';
 import {
   DropdownMenu,
@@ -17,7 +17,7 @@ import { TeamEmailDeleteDialog } from '~/components/dialogs/team-email-delete-di
 import { TeamEmailUpdateDialog } from '~/components/dialogs/team-email-update-dialog';
 
 export type TeamEmailDropdownProps = {
-  team: Awaited<ReturnType<typeof getTeamByUrl>>;
+  team: Awaited<ReturnType<typeof getTeamWithEmail>>;
 };
 
 export const TeamEmailDropdown = ({ team }: TeamEmailDropdownProps) => {
@@ -25,7 +25,7 @@ export const TeamEmailDropdown = ({ team }: TeamEmailDropdownProps) => {
   const { toast } = useToast();
 
   const { mutateAsync: resendEmailVerification, isPending: isResendingEmailVerification } =
-    trpc.team.resendTeamEmailVerification.useMutation({
+    trpc.team.email.verification.resend.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),

apps/remix/app/components/general/teams/team-email-usage.tsx

@@ -30,7 +30,7 @@ export const TeamEmailUsage = ({ teamEmail }: TeamEmailUsageProps) => {
   const { toast } = useToast();
 
   const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
-    trpc.team.deleteTeamEmail.useMutation({
+    trpc.team.email.delete.useMutation({
       onSuccess: () => {
         toast({
           title: _(msg`Success`),

apps/remix/app/components/general/teams/team-inherit-member-alert.tsx

@@ -0,0 +1,43 @@
+import { Trans } from '@lingui/react/macro';
+import type { TeamGroup } from '@prisma/client';
+
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+
+import { TeamMemberInheritDisableDialog } from '~/components/dialogs/team-inherit-member-disable-dialog';
+import { TeamMemberInheritEnableDialog } from '~/components/dialogs/team-inherit-member-enable-dialog';
+
+type TeamInheritMemberAlertProps = {
+  memberAccessTeamGroup: TeamGroup | null;
+};
+
+export const TeamInheritMemberAlert = ({ memberAccessTeamGroup }: TeamInheritMemberAlertProps) => {
+  return (
+    <Alert
+      className="flex flex-col justify-between p-6 sm:flex-row sm:items-center"
+      variant="neutral"
+    >
+      <div className="mb-4 sm:mb-0">
+        <AlertTitle>
+          <Trans>Inherit organisation members</Trans>
+        </AlertTitle>
+
+        <AlertDescription className="mr-2">
+          {memberAccessTeamGroup ? (
+            <Trans>Currently all organisation members can access this team</Trans>
+          ) : (
+            <Trans>
+              You can enable access to allow all organisation members to access this team by
+              default.
+            </Trans>
+          )}
+        </AlertDescription>
+      </div>
+
+      {memberAccessTeamGroup ? (
+        <TeamMemberInheritDisableDialog group={memberAccessTeamGroup} />
+      ) : (
+        <TeamMemberInheritEnableDialog />
+      )}
+    </Alert>
+  );
+};

apps/remix/app/components/general/teams/team-settings-nav-desktop.tsx

@@ -1,10 +1,9 @@
 import type { HTMLAttributes } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Braces, CreditCard, Globe2Icon, Settings, Settings2, Users, Webhook } from 'lucide-react';
+import { Braces, Globe2Icon, GroupIcon, Settings, Settings2, Users, Webhook } from 'lucide-react';
 import { Link, useLocation, useParams } from 'react-router';
 
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -20,9 +19,9 @@ export const TeamSettingsNavDesktop = ({ className, ...props }: TeamSettingsNavD
   const preferencesPath = `/t/${teamUrl}/settings/preferences`;
   const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
+  const groupsPath = `/t/${teamUrl}/settings/groups`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
-  const billingPath = `/t/${teamUrl}/settings/billing`;
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -76,6 +75,16 @@ export const TeamSettingsNavDesktop = ({ className, ...props }: TeamSettingsNavD
         </Button>
       </Link>
 
+      <Link to={groupsPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(groupsPath) && 'bg-secondary')}
+        >
+          <GroupIcon className="mr-2 h-5 w-5" />
+          <Trans>Groups</Trans>
+        </Button>
+      </Link>
+
       <Link to={tokensPath}>
         <Button
           variant="ghost"
@@ -98,21 +107,6 @@ export const TeamSettingsNavDesktop = ({ className, ...props }: TeamSettingsNavD
           <Trans>Webhooks</Trans>
         </Button>
       </Link>
-
-      {IS_BILLING_ENABLED() && (
-        <Link to={billingPath}>
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith(billingPath) && 'bg-secondary',
-            )}
-          >
-            <CreditCard className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/teams/team-settings-nav-mobile.tsx

@@ -1,10 +1,9 @@
 import type { HTMLAttributes } from 'react';
 
 import { Trans } from '@lingui/react/macro';
-import { Braces, CreditCard, Globe2Icon, Key, Settings2, User, Webhook } from 'lucide-react';
+import { Braces, Globe2Icon, GroupIcon, Key, Settings2, User, Webhook } from 'lucide-react';
 import { Link, useLocation, useParams } from 'react-router';
 
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -20,9 +19,9 @@ export const TeamSettingsNavMobile = ({ className, ...props }: TeamSettingsNavMo
   const preferencesPath = `/t/${teamUrl}/preferences`;
   const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
+  const groupsPath = `/t/${teamUrl}/settings/groups`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
-  const billingPath = `/t/${teamUrl}/settings/billing`;
 
   return (
     <div
@@ -85,6 +84,16 @@ export const TeamSettingsNavMobile = ({ className, ...props }: TeamSettingsNavMo
         </Button>
       </Link>
 
+      <Link to={groupsPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(groupsPath) && 'bg-secondary')}
+        >
+          <GroupIcon className="mr-2 h-5 w-5" />
+          <Trans>Groups</Trans>
+        </Button>
+      </Link>
+
       <Link to={tokensPath}>
         <Button
           variant="ghost"
@@ -107,21 +116,6 @@ export const TeamSettingsNavMobile = ({ className, ...props }: TeamSettingsNavMo
           <Trans>Webhooks</Trans>
         </Button>
       </Link>
-
-      {IS_BILLING_ENABLED() && (
-        <Link to={billingPath}>
-          <Button
-            variant="ghost"
-            className={cn(
-              'w-full justify-start',
-              pathname?.startsWith(billingPath) && 'bg-secondary',
-            )}
-          >
-            <CreditCard className="mr-2 h-5 w-5" />
-            <Trans>Billing</Trans>
-          </Button>
-        </Link>
-      )}
     </div>
   );
 };

apps/remix/app/components/general/teams/team-transfer-status.tsx

@@ -1,126 +0,0 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { TeamMemberRole, TeamTransferVerification } from '@prisma/client';
-import { AnimatePresence } from 'framer-motion';
-import { useRevalidator } from 'react-router';
-
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { isTokenExpired } from '@documenso/lib/utils/token-verification';
-import { trpc } from '@documenso/trpc/react';
-import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
-import { cn } from '@documenso/ui/lib/utils';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type TeamTransferStatusProps = {
-  className?: string;
-  currentUserTeamRole: TeamMemberRole;
-  teamId: number;
-  transferVerification: Pick<TeamTransferVerification, 'email' | 'expiresAt' | 'name'> | null;
-};
-
-export const TeamTransferStatus = ({
-  className,
-  currentUserTeamRole,
-  teamId,
-  transferVerification,
-}: TeamTransferStatusProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-  const { revalidate } = useRevalidator();
-
-  const isExpired = transferVerification && isTokenExpired(transferVerification.expiresAt);
-
-  const { mutateAsync: deleteTeamTransferRequest, isPending } =
-    trpc.team.deleteTeamTransferRequest.useMutation({
-      onSuccess: async () => {
-        if (!isExpired) {
-          toast({
-            title: _(msg`Success`),
-            description: _(msg`The team transfer invitation has been successfully deleted.`),
-            duration: 5000,
-          });
-        }
-
-        await revalidate();
-      },
-      onError: () => {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
-            msg`We encountered an unknown error while attempting to remove this transfer. Please try again or contact support.`,
-          ),
-          variant: 'destructive',
-        });
-      },
-    });
-
-  return (
-    <AnimatePresence>
-      {transferVerification && (
-        <AnimateGenericFadeInOut>
-          <Alert
-            variant={isExpired ? 'destructive' : 'warning'}
-            className={cn(
-              'flex flex-col justify-between p-6 sm:flex-row sm:items-center',
-              className,
-            )}
-          >
-            <div>
-              <AlertTitle>
-                {isExpired ? (
-                  <Trans>Team transfer request expired</Trans>
-                ) : (
-                  <Trans>Team transfer in progress</Trans>
-                )}
-              </AlertTitle>
-
-              <AlertDescription>
-                {isExpired ? (
-                  <p className="text-sm">
-                    <Trans>
-                      The team transfer request to <strong>{transferVerification.name}</strong> has
-                      expired.
-                    </Trans>
-                  </p>
-                ) : (
-                  <section className="text-sm">
-                    <p>
-                      <Trans>
-                        A request to transfer the ownership of this team has been sent to{' '}
-                        <strong>
-                          {transferVerification.name} ({transferVerification.email})
-                        </strong>
-                      </Trans>
-                    </p>
-
-                    <p>
-                      <Trans>
-                        If they accept this request, the team will be transferred to their account.
-                      </Trans>
-                    </p>
-                  </section>
-                )}
-              </AlertDescription>
-            </div>
-
-            {canExecuteTeamAction('DELETE_TEAM_TRANSFER_REQUEST', currentUserTeamRole) && (
-              <Button
-                onClick={async () => deleteTeamTransferRequest({ teamId })}
-                loading={isPending}
-                variant={isExpired ? 'destructive' : 'ghost'}
-                className={cn('ml-auto', {
-                  'hover:bg-transparent hover:text-blue-800': !isExpired,
-                })}
-              >
-                {isExpired ? <Trans>Close</Trans> : <Trans>Cancel</Trans>}
-              </Button>
-            )}
-          </Alert>
-        </AnimateGenericFadeInOut>
-      )}
-    </AnimatePresence>
-  );
-};

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -26,12 +26,11 @@ import { AddTemplateSettingsFormPartial } from '@documenso/ui/primitives/templat
 import type { TAddTemplateSettingsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-settings.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 export type TemplateEditFormProps = {
   className?: string;
   initialTemplate: TTemplate;
-  isEnterprise: boolean;
   templateRootPath: string;
 };
 
@@ -41,14 +40,13 @@ const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 export const TemplateEditForm = ({
   initialTemplate,
   className,
-  isEnterprise,
   templateRootPath,
 }: TemplateEditFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
   const navigate = useNavigate();
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const [step, setStep] = useState<EditTemplateStep>('settings');
 
@@ -260,12 +258,11 @@ export const TemplateEditForm = ({
             <AddTemplateSettingsFormPartial
               key={recipients.length}
               template={template}
-              currentTeamMemberRole={team?.currentTeamMember?.role}
+              currentTeamMemberRole={team.currentTeamRole}
               documentFlow={documentFlow.settings}
               recipients={recipients}
               fields={fields}
               onSubmit={onAddSettingsFormSubmit}
-              isEnterprise={isEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
@@ -278,7 +275,6 @@ export const TemplateEditForm = ({
               allowDictateNextSigner={template.templateMeta?.allowDictateNextSigner}
               templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
-              isEnterprise={isEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 

apps/remix/app/components/general/template/template-page-view-documents-table.tsx

@@ -28,7 +28,7 @@ import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with
 import { DocumentsTableActionButton } from '~/components/tables/documents-table-action-button';
 import { DocumentsTableActionDropdown } from '~/components/tables/documents-table-action-dropdown';
 import { DataTableTitle } from '~/components/tables/documents-table-title';
-import { useOptionalCurrentTeam } from '~/providers/team';
+import { useCurrentTeam } from '~/providers/team';
 
 import { PeriodSelector } from '../period-selector';
 
@@ -61,7 +61,7 @@ export const TemplatePageViewDocumentsTable = ({
   const [searchParams] = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
 
-  const team = useOptionalCurrentTeam();
+  const team = useCurrentTeam();
 
   const parsedSearchParams = ZDocumentSearchParamsSchema.parse(
     Object.fromEntries(searchParams ?? []),

apps/remix/app/components/general/user-profile-skeleton.tsx

@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/react/macro';
-import type { User } from '@prisma/client';
 import { File, User2 } from 'lucide-react';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
@@ -9,7 +8,10 @@ import { Button } from '@documenso/ui/primitives/button';
 
 export type UserProfileSkeletonProps = {
   className?: string;
-  user: Pick<User, 'name' | 'url'>;
+  user: {
+    name: string;
+    url: string;
+  };
   rows?: number;
 };