feat: enhance team account creation with policy checks and UI updates (#436)

* feat: enhance team account creation with policy checks and UI updates

apps/web/app/home/(user)/_components/home-accounts-list.tsx

@@ -19,10 +19,12 @@ import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
 import { HomeAddAccountButton } from './home-add-account-button';
 
 export function HomeAccountsList() {
-  const { accounts } = use(loadUserWorkspace());
+  const { accounts, canCreateTeamAccount } = use(loadUserWorkspace());
 
   if (!accounts.length) {
-    return <HomeAccountsListEmptyState />;
+    return (
+      <HomeAccountsListEmptyState canCreateTeamAccount={canCreateTeamAccount} />
+    );
   }
 
   return (
@@ -42,12 +44,17 @@ export function HomeAccountsList() {
   );
 }
 
-function HomeAccountsListEmptyState() {
+function HomeAccountsListEmptyState(props: {
+  canCreateTeamAccount: { allowed: boolean; reason?: string };
+}) {
   return (
     <div className={'flex flex-1'}>
       <EmptyState>
         <EmptyStateButton asChild>
-          <HomeAddAccountButton className={'mt-4'} />
+          <HomeAddAccountButton
+            className={'mt-4'}
+            canCreateTeamAccount={props.canCreateTeamAccount}
+          />
         </EmptyStateButton>
         <EmptyStateHeading>
           <Trans i18nKey={'account:noTeamsYet'} />

apps/web/app/home/(user)/_components/home-add-account-button.tsx

@@ -4,19 +4,54 @@ import { useState } from 'react';
 
 import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
 import { Button } from '@kit/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
 import { Trans } from '@kit/ui/trans';
 
-export function HomeAddAccountButton(props: { className?: string }) {
+interface HomeAddAccountButtonProps {
+  className?: string;
+  canCreateTeamAccount?: {
+    allowed: boolean;
+    reason?: string;
+  };
+}
+
+export function HomeAddAccountButton(props: HomeAddAccountButtonProps) {
   const [isAddingAccount, setIsAddingAccount] = useState(false);
 
+  const canCreate = props.canCreateTeamAccount?.allowed ?? true;
+  const reason = props.canCreateTeamAccount?.reason;
+
+  const button = (
+    <Button
+      className={props.className}
+      onClick={() => setIsAddingAccount(true)}
+      disabled={!canCreate}
+    >
+      <Trans i18nKey={'account:createTeamButtonLabel'} />
+    </Button>
+  );
+
   return (
     <>
-      <Button
-        className={props.className}
-        onClick={() => setIsAddingAccount(true)}
-      >
-        <Trans i18nKey={'account:createTeamButtonLabel'} />
-      </Button>
+      {!canCreate && reason ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="cursor-not-allowed">{button}</span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <Trans i18nKey={reason} defaults={reason} />
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        button
+      )}
 
       <CreateTeamAccountDialog
         isOpen={isAddingAccount}