feat: unify settings (#3128)

apps/remix/app/routes/_authenticated+/t.$teamUrl+/_layout.tsx

@@ -1,8 +1,10 @@
 import { DEFAULT_MINIMUM_ENVELOPE_ITEM_COUNT, PAID_PLAN_LIMITS } from '@documenso/ee/server-only/limits/constants';
 import { LimitsProvider } from '@documenso/ee/server-only/limits/provider/client';
+import { useChildRouteFlags } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { isOrganisationPendingPayment } from '@documenso/lib/utils/billing';
 import { TrpcProvider } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
@@ -17,6 +19,8 @@ export default function Layout() {
   const team = useOptionalCurrentTeam();
   const organisation = useOptionalCurrentOrganisation();
 
+  const { layoutMode } = useChildRouteFlags();
+
   const limits = useMemo(() => {
     if (!organisation) {
       return undefined;
@@ -78,7 +82,7 @@ export default function Layout() {
   // Note: We use a key to force a re-render if the team context changes.
   // This is required otherwise you would see the wrong page content.
   return (
-    <div key={team.url}>
+    <div key={team.url} className={cn({ 'md:flex md:min-h-0 md:flex-1 md:flex-col': layoutMode === 'settings' })}>
       <TrpcProvider headers={trpcHeaders}>
         <LimitsProvider initialValue={limits} teamId={team.id}>
           <Outlet />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.logs.tsx

@@ -72,7 +72,12 @@ export async function loader({ params, request }: Route.LoaderArgs) {
       updatedAt: envelope.updatedAt,
       documentMeta: envelope.documentMeta,
     },
-    recipients: envelope.recipients,
+    recipients: envelope.recipients.map((recipient) => ({
+      id: recipient.id,
+      email: recipient.email,
+      name: recipient.name,
+      role: recipient.role,
+    })),
     documentRootPath,
     userId: user.id,
   };
@@ -118,7 +123,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
     },
   ];
 
-  const formatRecipientText = (recipient: Recipient) => {
+  const formatRecipientText = (recipient: Pick<Recipient, 'email' | 'name' | 'role'>) => {
     let text = recipient.email;
 
     if (recipient.name) {

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._index.tsx

@@ -1,162 +1,11 @@
-import { getSession } from '@documenso/auth/server/lib/utils/get-session';
-import { getTeamWithEmail } from '@documenso/lib/server-only/team/get-team-email-by-email';
-import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { AvatarWithText } from '@documenso/ui/primitives/avatar';
-import { Trans } from '@lingui/react/macro';
-import { CheckCircle2, Clock } from 'lucide-react';
-import { match, P } from 'ts-pattern';
-
-import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
-import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
-import { AvatarImageForm } from '~/components/forms/avatar-image';
-import { TeamUpdateForm } from '~/components/forms/team-update-form';
-import { SettingsHeader } from '~/components/general/settings-header';
-import { TeamEmailDropdown } from '~/components/general/teams/team-email-dropdown';
-import { useCurrentTeam } from '~/providers/team';
+import { redirect } from 'react-router';
 
 import type { Route } from './+types/settings._index';
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  const { user } = await getSession(request);
+export function loader({ params }: Route.LoaderArgs) {
+  if (params.teamUrl) {
+    throw redirect(`/t/${params.teamUrl}/settings/general`);
+  }
 
-  const team = await getTeamWithEmail({
-    userId: user.id,
-    teamUrl: params.teamUrl,
-  });
-
-  return {
-    team,
-  };
-}
-
-export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
-  const { team } = loaderData;
-
-  const currentTeam = useCurrentTeam();
-
-  return (
-    <div className="max-w-2xl">
-      <SettingsHeader title="General settings" subtitle="Here you can edit your team's details." />
-
-      <AvatarImageForm team={currentTeam} className="mb-8" />
-
-      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
-
-      <section className="mt-6 space-y-6">
-        {(team.teamEmail || team.emailVerification) && (
-          <Alert className="p-6" variant="neutral">
-            <AlertTitle>
-              <Trans>Team email</Trans>
-            </AlertTitle>
-
-            <AlertDescription className="mr-2">
-              <Trans>
-                You can view documents associated with this email and use this identity when sending documents.
-              </Trans>
-            </AlertDescription>
-
-            <hr className="mt-2 border-border/50" />
-
-            <div className="flex flex-row items-center justify-between pt-4">
-              <AvatarWithText
-                avatarClass="h-12 w-12"
-                avatarSrc={formatAvatarUrl(team.avatarImageId)}
-                avatarFallback={extractInitials((team.teamEmail?.name || team.emailVerification?.name) ?? '')}
-                primaryText={
-                  <span className="font-semibold text-foreground/80 text-sm">
-                    {team.teamEmail?.name || team.emailVerification?.name}
-                  </span>
-                }
-                secondaryText={
-                  <span className="text-sm">{team.teamEmail?.email || team.emailVerification?.email}</span>
-                }
-              />
-
-              <div className="flex flex-row items-center pr-2">
-                <div className="mr-4 flex flex-row items-center text-muted-foreground text-sm xl:mr-8">
-                  {match({
-                    teamEmail: team.teamEmail,
-                    emailVerification: team.emailVerification,
-                  })
-                    .with({ teamEmail: P.not(null) }, () => (
-                      <>
-                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
-                        <Trans>Active</Trans>
-                      </>
-                    ))
-                    .with(
-                      {
-                        emailVerification: P.when(
-                          (emailVerification) => emailVerification && emailVerification?.expiresAt < new Date(),
-                        ),
-                      },
-                      () => (
-                        <>
-                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
-                          <Trans>Expired</Trans>
-                        </>
-                      ),
-                    )
-                    .with({ emailVerification: P.not(null) }, () => (
-                      <>
-                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
-                        <Trans>Awaiting email confirmation</Trans>
-                      </>
-                    ))
-                    .otherwise(() => null)}
-                </div>
-
-                <TeamEmailDropdown team={team} />
-              </div>
-            </div>
-          </Alert>
-        )}
-
-        {!team.teamEmail && !team.emailVerification && (
-          <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>Team email</Trans>
-              </AlertTitle>
-
-              <AlertDescription className="mr-2">
-                <ul className="mt-0.5 list-inside list-disc text-muted-foreground text-sm">
-                  {/* Feature not available yet. */}
-                  {/* <li>Display this name and email when sending documents</li> */}
-                  {/* <li>View documents associated with this email</li> */}
-
-                  <span>
-                    <Trans>View documents associated with this email</Trans>
-                  </span>
-                </ul>
-              </AlertDescription>
-            </div>
-
-            <TeamEmailAddDialog teamId={team.id} />
-          </Alert>
-        )}
-
-        {canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole) && (
-          <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>Delete team</Trans>
-              </AlertTitle>
-
-              <AlertDescription className="mr-2">
-                <Trans>
-                  This team, and any associated data excluding billing invoices will be permanently deleted.
-                </Trans>
-              </AlertDescription>
-            </div>
-
-            <TeamDeleteDialog teamId={team.id} teamName={team.name} redirectTo="/dashboard" />
-          </Alert>
-        )}
-      </section>
-    </div>
-  );
+  throw redirect('/');
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings._layout.tsx

@@ -1,15 +1,11 @@
 import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import type { RouteHandle } from '@documenso/lib/client-only/hooks/use-child-route-flags';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
 import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { BracesIcon, Globe2Icon, GroupIcon, Settings2Icon, SettingsIcon, Users2Icon, WebhookIcon } from 'lucide-react';
-import { Link, NavLink, Outlet, redirect } from 'react-router';
+import { redirect } from 'react-router';
 
-import { GenericErrorLayout } from '~/components/general/generic-error-layout';
-import { useCurrentTeam } from '~/providers/team';
+import { UnifiedSettingsLayout } from '~/components/general/unified-settings-layout';
 import { appMetaTags } from '~/utils/meta';
 
 import type { Route } from './+types/settings._layout';
@@ -18,6 +14,10 @@ export function meta() {
   return appMetaTags(msg`Team Settings`);
 }
 
+export const handle: RouteHandle = {
+  layoutMode: 'settings',
+};
+
 export async function loader({ request, params }: Route.LoaderArgs) {
   const session = await getSession(request);
 
@@ -35,123 +35,6 @@ export async function clientLoader() {
   // Do nothing, we only want the loader to run on SSR.
 }
 
-export default function TeamsSettingsLayout() {
-  const { t } = useLingui();
-
-  const team = useCurrentTeam();
-
-  const teamSettingRoutes = [
-    {
-      path: `/t/${team.url}/settings`,
-      label: t`General`,
-      icon: SettingsIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/document`,
-      label: t`Preferences`,
-      icon: Settings2Icon,
-      isSubNavParent: true,
-    },
-    {
-      path: `/t/${team.url}/settings/document`,
-      label: t`Document`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/branding`,
-      label: t`Branding`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/email`,
-      label: t`Email`,
-      isSubNav: true,
-    },
-    {
-      path: `/t/${team.url}/settings/public-profile`,
-      label: t`Public Profile`,
-      icon: Globe2Icon,
-    },
-    {
-      path: `/t/${team.url}/settings/members`,
-      label: t`Members`,
-      icon: Users2Icon,
-    },
-    {
-      path: `/t/${team.url}/settings/groups`,
-      label: t`Groups`,
-      icon: GroupIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/tokens`,
-      label: t`API Tokens`,
-      icon: BracesIcon,
-    },
-    {
-      path: `/t/${team.url}/settings/webhooks`,
-      label: t`Webhooks`,
-      icon: WebhookIcon,
-    },
-  ];
-
-  if (!canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole)) {
-    return (
-      <GenericErrorLayout
-        errorCode={401}
-        errorCodeMap={{
-          401: {
-            heading: msg`Unauthorized`,
-            subHeading: msg`401 Unauthorized`,
-            message: msg`You are not authorized to access this page.`,
-          },
-        }}
-        primaryButton={
-          <Button asChild>
-            <Link to={`/t/${team.url}`}>
-              <Trans>Go Back</Trans>
-            </Link>
-          </Button>
-        }
-        secondaryButton={null}
-      />
-    );
-  }
-
-  return (
-    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
-      <h1 className="font-semibold text-4xl">
-        <Trans>Team Settings</Trans>
-      </h1>
-
-      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
-        <div
-          className={cn(
-            'col-span-12 mb-8 flex flex-wrap items-center justify-start gap-x-2 gap-y-4 md:col-span-3 md:w-full md:flex-col md:items-start md:gap-y-2',
-          )}
-        >
-          {teamSettingRoutes.map((route) => (
-            <NavLink
-              to={route.path}
-              className={cn('group w-full justify-start', route.isSubNav && 'pl-8')}
-              key={route.path}
-            >
-              <Button
-                variant="ghost"
-                className={cn('w-full justify-start', {
-                  'group-aria-[current]:bg-secondary': !route.isSubNavParent,
-                })}
-              >
-                {route.icon && <route.icon className="mr-2 h-5 w-5" />}
-                <Trans>{route.label}</Trans>
-              </Button>
-            </NavLink>
-          ))}
-        </div>
-
-        <div className="col-span-12 md:col-span-9">
-          <Outlet />
-        </div>
-      </div>
-    </div>
-  );
+export default function TeamSettingsLayout() {
+  return <UnifiedSettingsLayout activeScope="team" />;
 }

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.branding.tsx

@@ -115,7 +115,7 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
         title={t`Branding Preferences`}
         subtitle={t`Here you can set preferences and defaults for branding.`}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.certificates.tsx

@@ -0,0 +1,76 @@
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  CertificatePreferencesForm,
+  type TCertificatePreferencesFormSchema,
+} from '~/components/forms/certificate-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsCertificatesPage() {
+  const team = useCurrentTeam();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onCertificatePreferencesFormSubmit = async (data: TCertificatePreferencesFormSchema) => {
+    try {
+      const { includeSigningCertificate, includeAuditLog } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          includeSigningCertificate,
+          includeAuditLog,
+        },
+      });
+
+      toast({
+        title: t`Certificate preferences updated`,
+        description: t`Your certificate preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your certificate preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Certificates`}
+        subtitle={t`Here you can set certificate and audit log preferences for your team.`}
+      />
+
+      <section>
+        <CertificatePreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onCertificatePreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -2,7 +2,6 @@ import { IS_AI_FEATURES_CONFIGURED } from '@documenso/lib/constants/app';
 import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 import { useLoaderData } from 'react-router';
@@ -13,11 +12,6 @@ import {
 } from '~/components/forms/document-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags(msg`Document Preferences`);
-}
 
 export const loader = () => {
   return {
@@ -46,15 +40,10 @@ export default function TeamsSettingsPage() {
         documentLanguage,
         documentTimezone,
         documentDateFormat,
-        includeSenderDetails,
-        includeSigningCertificate,
-        includeAuditLog,
         signatureTypes,
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
-        envelopeExpirationPeriod,
-        reminderSettings,
       } = data;
 
       await updateTeamSettings({
@@ -64,13 +53,8 @@ export default function TeamsSettingsPage() {
           documentLanguage,
           documentTimezone,
           documentDateFormat,
-          includeSenderDetails,
-          includeSigningCertificate,
-          includeAuditLog,
           defaultRecipients,
           aiFeaturesEnabled,
-          envelopeExpirationPeriod,
-          reminderSettings,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,
@@ -110,7 +94,7 @@ export default function TeamsSettingsPage() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
         title={t`Document Preferences`}
         subtitle={t`Here you can set preferences and defaults for your team.`}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.email.tsx

@@ -1,17 +1,11 @@
 import { trpc } from '@documenso/trpc/react';
 import { SpinnerBox } from '@documenso/ui/primitives/spinner';
 import { useToast } from '@documenso/ui/primitives/use-toast';
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 
 import { EmailPreferencesForm, type TEmailPreferencesFormSchema } from '~/components/forms/email-preferences-form';
 import { SettingsHeader } from '~/components/general/settings-header';
 import { useCurrentTeam } from '~/providers/team';
-import { appMetaTags } from '~/utils/meta';
-
-export function meta() {
-  return appMetaTags(msg`Settings`);
-}
 
 export default function TeamEmailSettingsGeneral() {
   const { t } = useLingui();
@@ -27,7 +21,7 @@ export default function TeamEmailSettingsGeneral() {
 
   const onEmailPreferencesSubmit = async (data: TEmailPreferencesFormSchema) => {
     try {
-      const { emailId, emailReplyTo, emailDocumentSettings } = data;
+      const { emailId, emailReplyTo, emailDocumentSettings, includeSenderDetails } = data;
 
       await updateTeamSettings({
         teamId: team.id,
@@ -36,6 +30,7 @@ export default function TeamEmailSettingsGeneral() {
           emailReplyTo,
           // emailReplyToName,
           emailDocumentSettings,
+          includeSenderDetails,
         },
       });
 
@@ -59,7 +54,7 @@ export default function TeamEmailSettingsGeneral() {
   }
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader title={t`Email Preferences`} subtitle={t`You can manage your email preferences here.`} />
 
       <section>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.general.tsx

@@ -0,0 +1,281 @@
+import { getSession } from '@documenso/auth/server/lib/utils/get-session';
+import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '@documenso/lib/constants/teams';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { buildTeamWhereQuery, canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { CheckCircle2, Clock, EditIcon, LoaderIcon, MailIcon, MoreHorizontalIcon, XIcon } from 'lucide-react';
+import { redirect } from 'react-router';
+import { match, P } from 'ts-pattern';
+import { TeamDeleteDialog } from '~/components/dialogs/team-delete-dialog';
+import { TeamEmailAddDialog } from '~/components/dialogs/team-email-add-dialog';
+import { TeamEmailDeleteDialog } from '~/components/dialogs/team-email-delete-dialog';
+import { TeamEmailUpdateDialog } from '~/components/dialogs/team-email-update-dialog';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
+import { TeamUpdateForm } from '~/components/forms/team-update-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+import type { Route } from './+types/settings.general';
+
+export async function loader({ request, params }: Route.LoaderArgs) {
+  const { user } = await getSession(request);
+
+  if (!user || !params.teamUrl) {
+    throw redirect('/');
+  }
+
+  const team = await prisma.team.findUnique({
+    where: {
+      ...buildTeamWhereQuery({
+        teamId: undefined,
+        userId: user.id,
+        roles: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
+      }),
+      url: params.teamUrl,
+    },
+    include: {
+      teamEmail: {
+        select: {
+          email: true,
+          name: true,
+        },
+      },
+      emailVerification: {
+        select: {
+          email: true,
+          name: true,
+          expiresAt: true,
+        },
+      },
+    },
+  });
+
+  if (!team) {
+    throw redirect('/');
+  }
+
+  return {
+    teamEmail: team.teamEmail
+      ? {
+          email: team.teamEmail?.email,
+          name: team.teamEmail.name,
+        }
+      : null,
+    emailVerification: team.emailVerification
+      ? {
+          email: team.emailVerification?.email,
+          name: team.emailVerification.name,
+          expiresAt: team.emailVerification.expiresAt,
+        }
+      : null,
+  };
+}
+
+export default function TeamsSettingsPage({ loaderData }: Route.ComponentProps) {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { teamEmail, emailVerification } = loaderData;
+
+  const team = useCurrentTeam();
+
+  const { mutateAsync: resendEmailVerification, isPending: isResendingEmailVerification } =
+    trpc.team.email.verification.resend.useMutation({
+      onSuccess: () => {
+        toast({
+          title: t`Success`,
+          description: t`Email verification has been resent`,
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: t`Something went wrong`,
+          description: t`Unable to resend verification at this time. Please try again.`,
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <div>
+      <SettingsHeader title={t`General settings`} subtitle={t`Here you can edit your team's details.`} />
+
+      <AvatarImageForm team={team} className="mb-8" />
+
+      <TeamUpdateForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+
+      <section className="mt-6 space-y-6">
+        {(teamEmail || emailVerification) && (
+          <Alert className="p-6" variant="neutral">
+            <AlertTitle>
+              <Trans>Team email</Trans>
+            </AlertTitle>
+
+            <AlertDescription className="mr-2">
+              <Trans>
+                You can view documents associated with this email and use this identity when sending documents.
+              </Trans>
+            </AlertDescription>
+
+            <hr className="mt-2 border-border/50" />
+
+            <div className="flex flex-row items-center justify-between pt-4">
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarSrc={formatAvatarUrl(team.avatarImageId)}
+                avatarFallback={extractInitials((teamEmail?.name || emailVerification?.name) ?? '')}
+                primaryText={
+                  <span className="font-semibold text-foreground/80 text-sm">
+                    {teamEmail?.name || emailVerification?.name}
+                  </span>
+                }
+                secondaryText={<span className="text-sm">{teamEmail?.email || emailVerification?.email}</span>}
+              />
+
+              <div className="flex flex-row items-center pr-2">
+                <div className="mr-4 flex flex-row items-center text-muted-foreground text-sm xl:mr-8">
+                  {match({
+                    teamEmail,
+                    emailVerification: emailVerification,
+                  })
+                    .with({ teamEmail: P.not(null) }, () => (
+                      <>
+                        <CheckCircle2 className="mr-1.5 text-green-500 dark:text-green-300" />
+                        <Trans>Active</Trans>
+                      </>
+                    ))
+                    .with(
+                      {
+                        emailVerification: P.when(
+                          (emailVerification) => emailVerification && emailVerification?.expiresAt < new Date(),
+                        ),
+                      },
+                      () => (
+                        <>
+                          <Clock className="mr-1.5 text-yellow-500 dark:text-yellow-200" />
+                          <Trans>Expired</Trans>
+                        </>
+                      ),
+                    )
+                    .with({ emailVerification: P.not(null) }, () => (
+                      <>
+                        <Clock className="mr-1.5 text-blue-600 dark:text-blue-300" />
+                        <Trans>Awaiting email confirmation</Trans>
+                      </>
+                    ))
+                    .otherwise(() => null)}
+                </div>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent className="w-52" align="start" forceMount>
+                    {!teamEmail && emailVerification && (
+                      <DropdownMenuItem
+                        disabled={isResendingEmailVerification}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          void resendEmailVerification({ teamId: team.id });
+                        }}
+                      >
+                        {isResendingEmailVerification ? (
+                          <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
+                        ) : (
+                          <MailIcon className="mr-2 h-4 w-4" />
+                        )}
+                        <Trans>Resend verification</Trans>
+                      </DropdownMenuItem>
+                    )}
+
+                    {teamEmail && (
+                      <TeamEmailUpdateDialog
+                        teamId={team.id}
+                        teamEmail={teamEmail}
+                        trigger={
+                          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                            <EditIcon className="mr-2 h-4 w-4" />
+                            <Trans>Edit</Trans>
+                          </DropdownMenuItem>
+                        }
+                      />
+                    )}
+
+                    <TeamEmailDeleteDialog
+                      team={team}
+                      teamEmail={teamEmail}
+                      emailVerification={emailVerification}
+                      teamName={team.name}
+                      trigger={
+                        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                          <XIcon className="mr-2 h-4 w-4" />
+                          <Trans>Remove</Trans>
+                        </DropdownMenuItem>
+                      }
+                    />
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </Alert>
+        )}
+
+        {!teamEmail && !emailVerification && (
+          <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>Team email</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <ul className="mt-0.5 list-inside list-disc text-muted-foreground text-sm">
+                  {/* Feature not available yet. */}
+                  {/* <li>Display this name and email when sending documents</li> */}
+                  {/* <li>View documents associated with this email</li> */}
+
+                  <span>
+                    <Trans>View documents associated with this email</Trans>
+                  </span>
+                </ul>
+              </AlertDescription>
+            </div>
+
+            <TeamEmailAddDialog teamId={team.id} />
+          </Alert>
+        )}
+
+        {canExecuteTeamAction('MANAGE_TEAM', team.currentTeamRole) && (
+          <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>Delete team</Trans>
+              </AlertTitle>
+
+              <AlertDescription className="mr-2">
+                <Trans>
+                  This team, and any associated data excluding billing invoices will be permanently deleted.
+                </Trans>
+              </AlertDescription>
+            </div>
+
+            <TeamDeleteDialog teamId={team.id} teamName={team.name} redirectTo="/dashboard" />
+          </Alert>
+        )}
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.groups.tsx

@@ -56,7 +56,7 @@ export default function TeamsSettingsGroupsPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Team Groups`} subtitle={t`Manage the groups assigned to this team.`}>
+      <SettingsHeader hideDivider title={t`Team Groups`} subtitle={t`Manage the groups assigned to this team.`}>
         <TeamGroupCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.members.tsx

@@ -40,7 +40,7 @@ export default function TeamsSettingsMembersPage() {
 
   return (
     <div>
-      <SettingsHeader title={t`Team Members`} subtitle={t`Manage the members of your team.`}>
+      <SettingsHeader hideDivider title={t`Team Members`} subtitle={t`Manage the members of your team.`}>
         <TeamMemberCreateDialog />
       </SettingsHeader>
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -128,8 +128,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   }, [profile.enabled]);
 
   return (
-    <div className="max-w-2xl">
+    <div>
       <SettingsHeader
+        hideDivider
         title={t`Public Profile`}
         subtitle={t`You can choose to enable or disable the profile for public view.`}
       >
@@ -189,9 +190,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
 
       <div className="mt-4">
         <SettingsHeader
+          hideDivider
           title={t`Templates`}
           subtitle={t`Show templates in your public profile for your audience to sign and get started quickly`}
-          hideDivider={true}
           className="mt-8 [&>*>h3]:text-base"
         >
           <ManagePublicTemplateDialog

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.reminders.tsx

@@ -0,0 +1,76 @@
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+
+import {
+  ReminderPreferencesForm,
+  type TReminderPreferencesFormSchema,
+} from '~/components/forms/reminder-preferences-form';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function TeamsSettingsRemindersPage() {
+  const team = useCurrentTeam();
+
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const { data: teamWithSettings, isLoading: isLoadingTeam } = trpc.team.get.useQuery({
+    teamReference: team.id,
+  });
+
+  const { mutateAsync: updateTeamSettings } = trpc.team.settings.update.useMutation();
+
+  const onReminderPreferencesFormSubmit = async (data: TReminderPreferencesFormSchema) => {
+    try {
+      const { envelopeExpirationPeriod, reminderSettings } = data;
+
+      await updateTeamSettings({
+        teamId: team.id,
+        data: {
+          envelopeExpirationPeriod,
+          reminderSettings,
+        },
+      });
+
+      toast({
+        title: t`Reminder preferences updated`,
+        description: t`Your reminder preferences have been updated`,
+      });
+    } catch (err) {
+      toast({
+        title: t`Something went wrong!`,
+        description: t`We were unable to update your reminder preferences at this time, please try again later`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  if (isLoadingTeam || !teamWithSettings) {
+    return (
+      <div className="flex items-center justify-center rounded-lg py-32">
+        <Loader className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <SettingsHeader
+        title={t`Reminders`}
+        subtitle={t`Here you can set expiration and signing reminder preferences for your team.`}
+      />
+
+      <section>
+        <ReminderPreferencesForm
+          canInherit={true}
+          settings={teamWithSettings.teamSettings}
+          onFormSubmit={onReminderPreferencesFormSubmit}
+        />
+      </section>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.tokens.tsx

@@ -84,6 +84,7 @@ export default function ApiTokensPage() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={<Trans>API Tokens</Trans>}
         subtitle={
           <Trans>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks.$id._index.tsx

@@ -216,6 +216,7 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={
           <div className="flex items-center gap-2">
             <p>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.webhooks._index.tsx

@@ -89,6 +89,7 @@ export default function WebhookPage() {
   return (
     <div>
       <SettingsHeader
+        hideDivider
         title={t`Webhooks`}
         subtitle={t`On this page, you can create new Webhooks and manage the existing ones.`}
       >