feat: add global settings for teams (#1391)

## Description

This PR introduces global settings for teams. At the moment, it allows
team admins to configure the following:
* The default visibility of the documents uploaded to the team account
* Whether to include the document owner (sender) details when sending
emails to the recipients.

### Include Sender Details

If the Sender Details setting is enabled, the emails sent by the team
will include the sender's name:

> "Example User" on behalf of "Example Team" has invited you to sign
"document.pdf"

Otherwise, the email will say:

> "Example Team" has invited you to sign "document.pdf"

### Default Document Visibility

This new option allows users to set the default visibility for the
documents uploaded to the team account. It can have the following
values:
* Everyone
* Manager and above
* Admins only

If the default document visibility isn't set, the document will be set
to the role of the user who created the document:
* If a user with the "User" role creates a document, the document's
visibility is set to "Everyone".
* Manager role -> "Manager and above"
* Admin role -> "Admins only"

Otherwise, if there is a default document visibility value, it uses that
value.

#### Gotcha

To avoid issues, the `document owner` and the `recipient` can access the
document irrespective of their role. For example:
* If a team member with the role "Member" uploads a document and the
default document visibility is "Admins", only the document owner and
admins can access the document.
  * Similar to the other scenarios.

* If an admin uploads a document and the default document visibility is
"Admins", the recipient can access the document.

* The admins have access to all the documents.
* Managers have access to documents with the visibility set to
"Everyone" and "Manager and above"
* Members have access only to the documents with the visibility set to
"Everyone".

## Testing Performed

Tested it locally.

apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx

@@ -74,7 +74,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
   const isRecipient = document?.Recipient.find((recipient) => recipient.email === user.email);
   let canAccessDocument = true;
 
-  if (team && !isRecipient) {
+  if (team && !isRecipient && document?.userId !== user.id) {
     canAccessDocument = match([documentVisibility, currentTeamMemberRole])
       .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
       .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)

apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx

@@ -55,7 +55,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
   const isRecipient = document?.Recipient.find((recipient) => recipient.email === user.email);
   let canAccessDocument = true;
 
-  if (!isRecipient) {
+  if (!isRecipient && document?.userId !== user.id) {
     canAccessDocument = match([documentVisibility, currentTeamMemberRole])
       .with([DocumentVisibility.EVERYONE, TeamMemberRole.ADMIN], () => true)
       .with([DocumentVisibility.EVERYONE, TeamMemberRole.MANAGER], () => true)

apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx

@@ -52,7 +52,13 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
 
       <AvatarImageForm className="mb-8" team={team} user={session.user} />
 
-      <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
+      <UpdateTeamForm
+        teamId={team.id}
+        teamName={team.name}
+        teamUrl={team.url}
+        documentVisibility={team.teamGlobalSettings?.documentVisibility}
+        includeSenderDetails={team.teamGlobalSettings?.includeSenderDetails}
+      />
 
       <section className="mt-6 space-y-6">
         {(team.teamEmail || team.emailVerification) && (

apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/branding-preferences.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import type { Team, TeamGlobalSettings } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+
+const ZTeamBrandingPreferencesFormSchema = z.object({
+  brandingEnabled: z.boolean(),
+  brandingLogo: z
+    .instanceof(File)
+    .refine((file) => file.size <= MAX_FILE_SIZE, 'File size must be less than 5MB')
+    .refine(
+      (file) => ACCEPTED_FILE_TYPES.includes(file.type),
+      'Only .jpg, .png, and .webp files are accepted',
+    )
+    .nullish(),
+  brandingUrl: z.string().url().optional().or(z.literal('')),
+  brandingCompanyDetails: z.string().max(500).optional(),
+});
+
+type TTeamBrandingPreferencesFormSchema = z.infer<typeof ZTeamBrandingPreferencesFormSchema>;
+
+export type TeamBrandingPreferencesFormProps = {
+  team: Team;
+  settings?: TeamGlobalSettings | null;
+};
+
+export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPreferencesFormProps) {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
+
+  const { mutateAsync: updateTeamBrandingSettings } =
+    trpc.team.updateTeamBrandingSettings.useMutation();
+
+  const form = useForm<TTeamBrandingPreferencesFormSchema>({
+    defaultValues: {
+      brandingEnabled: settings?.brandingEnabled ?? false,
+      brandingUrl: settings?.brandingUrl ?? '',
+      brandingLogo: undefined,
+      brandingCompanyDetails: settings?.brandingCompanyDetails ?? '',
+    },
+    resolver: zodResolver(ZTeamBrandingPreferencesFormSchema),
+  });
+
+  const isBrandingEnabled = form.watch('brandingEnabled');
+
+  const onSubmit = async (data: TTeamBrandingPreferencesFormSchema) => {
+    try {
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+
+      let uploadedBrandingLogo = settings?.brandingLogo;
+
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
+
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
+      }
+
+      await updateTeamBrandingSettings({
+        teamId: team.id,
+        settings: {
+          brandingEnabled,
+          brandingLogo: uploadedBrandingLogo,
+          brandingUrl,
+          brandingCompanyDetails,
+        },
+      });
+
+      toast({
+        title: _(msg`Branding preferences updated`),
+        description: _(msg`Your branding preferences have been updated`),
+      });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to update your branding preferences at this time, please try again later`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (settings?.brandingLogo) {
+      const file = JSON.parse(settings.brandingLogo);
+
+      if ('type' in file && 'data' in file) {
+        void getFile(file).then((binaryData) => {
+          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
+
+          setPreviewUrl(objectUrl);
+          setHasLoadedPreview(true);
+        });
+
+        return;
+      }
+    }
+
+    setHasLoadedPreview(true);
+  }, [settings?.brandingLogo]);
+
+  // Cleanup ObjectURL on unmount or when previewUrl changes
+  useEffect(() => {
+    return () => {
+      if (previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset
+          className="flex h-full max-w-xl flex-col gap-y-4"
+          disabled={form.formState.isSubmitting}
+        >
+          <FormField
+            control={form.control}
+            name="brandingEnabled"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Enable Custom Branding</FormLabel>
+
+                <div>
+                  <FormControl>
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <FormDescription>
+                  <Trans>Enable custom branding for all documents in this team.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="relative flex w-full flex-col gap-y-4">
+            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9999]" />}
+
+            <FormField
+              control={form.control}
+              name="brandingLogo"
+              render={({ field: { value: _value, onChange, ...field } }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Branding Logo</FormLabel>
+
+                  <div className="flex flex-col gap-4">
+                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                      {previewUrl ? (
+                        <img
+                          src={previewUrl}
+                          alt="Logo preview"
+                          className="h-full w-full object-contain p-4"
+                        />
+                      ) : (
+                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                          Please upload a logo
+                          {!hasLoadedPreview && (
+                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
+                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="relative">
+                      <FormControl className="relative">
+                        <Input
+                          type="file"
+                          accept={ACCEPTED_FILE_TYPES.join(',')}
+                          disabled={!isBrandingEnabled}
+                          onChange={(e) => {
+                            const file = e.target.files?.[0];
+
+                            if (file) {
+                              if (previewUrl.startsWith('blob:')) {
+                                URL.revokeObjectURL(previewUrl);
+                              }
+
+                              const objectUrl = URL.createObjectURL(file);
+
+                              setPreviewUrl(objectUrl);
+
+                              onChange(file);
+                            }
+                          }}
+                          className={cn(
+                            'h-auto p-2',
+                            'file:text-primary hover:file:bg-primary/90',
+                            'file:mr-4 file:cursor-pointer file:rounded-md file:border-0',
+                            'file:p-2 file:py-2 file:font-medium',
+                            'file:bg-primary file:text-primary-foreground',
+                            !isBrandingEnabled && 'cursor-not-allowed',
+                          )}
+                          {...field}
+                        />
+                      </FormControl>
+
+                      <div className="absolute right-2 top-0 inline-flex h-full items-center justify-center">
+                        <Button
+                          type="button"
+                          variant="link"
+                          size="sm"
+                          className="text-destructive text-xs"
+                          onClick={() => {
+                            setPreviewUrl('');
+                            onChange(null);
+                          }}
+                        >
+                          <Trans>Remove</Trans>
+                        </Button>
+                      </div>
+                    </div>
+
+                    <FormDescription>
+                      <Trans>Upload your brand logo (max 5MB, JPG, PNG, or WebP)</Trans>
+                    </FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="brandingUrl"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Brand Website</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      type="url"
+                      placeholder="https://example.com"
+                      disabled={!isBrandingEnabled}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>Your brand website URL</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="brandingCompanyDetails"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Brand Details</FormLabel>
+
+                  <FormControl>
+                    <Textarea
+                      placeholder={_(msg`Enter your brand details`)}
+                      className="min-h-[100px] resize-y"
+                      disabled={!isBrandingEnabled}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>Additional brand information to display at the bottom of emails</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Save</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+}

apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/document-preferences.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import {
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_LANGUAGE_CODES,
+  isValidLanguageCode,
+} from '@documenso/lib/constants/i18n';
+import type { Team, TeamGlobalSettings } from '@documenso/prisma/client';
+import { DocumentVisibility } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZTeamDocumentPreferencesFormSchema = z.object({
+  documentVisibility: z.nativeEnum(DocumentVisibility),
+  documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
+  includeSenderDetails: z.boolean(),
+});
+
+type TTeamDocumentPreferencesFormSchema = z.infer<typeof ZTeamDocumentPreferencesFormSchema>;
+
+export type TeamDocumentPreferencesFormProps = {
+  team: Team;
+  settings?: TeamGlobalSettings | null;
+};
+
+export const TeamDocumentPreferencesForm = ({
+  team,
+  settings,
+}: TeamDocumentPreferencesFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { data } = useSession();
+
+  const placeholderEmail = data?.user.email ?? 'user@example.com';
+
+  const { mutateAsync: updateTeamDocumentPreferences } =
+    trpc.team.updateTeamDocumentSettings.useMutation();
+
+  const form = useForm<TTeamDocumentPreferencesFormSchema>({
+    defaultValues: {
+      documentVisibility: settings?.documentVisibility ?? 'EVERYONE',
+      documentLanguage: isValidLanguageCode(settings?.documentLanguage)
+        ? settings?.documentLanguage
+        : 'en',
+      includeSenderDetails: settings?.includeSenderDetails ?? false,
+    },
+    resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
+  });
+
+  const includeSenderDetails = form.watch('includeSenderDetails');
+
+  const onSubmit = async (data: TTeamDocumentPreferencesFormSchema) => {
+    try {
+      const { documentVisibility, documentLanguage, includeSenderDetails } = data;
+
+      await updateTeamDocumentPreferences({
+        teamId: team.id,
+        settings: {
+          documentVisibility,
+          documentLanguage,
+          includeSenderDetails,
+        },
+      });
+
+      toast({
+        title: _(msg`Document preferences updated`),
+        description: _(msg`Your document preferences have been updated`),
+      });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong!`),
+        description: _(
+          msg`We were unable to update your document preferences at this time, please try again later`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset
+          className="flex h-full max-w-xl flex-col gap-y-4"
+          disabled={form.formState.isSubmitting}
+        >
+          <FormField
+            control={form.control}
+            name="documentVisibility"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Visibility</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select {...field} onValueChange={field.onChange}>
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value={DocumentVisibility.EVERYONE}>
+                        <Trans>Everyone can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                        <Trans>Only managers and above can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.ADMIN}>
+                        <Trans>Only admins can access and view the document</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>Controls the default visibility of an uploaded document.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="documentLanguage"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Language</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select {...field} onValueChange={field.onChange}>
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                        <SelectItem key={code} value={code}>
+                          {language.full}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the default language of an uploaded document. This will be used as the
+                    language in email communications with the recipients.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeSenderDetails"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Send on Behalf of Team</Trans>
+                </FormLabel>
+
+                <div>
+                  <FormControl className="block">
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <div className="pt-2">
+                  <div className="text-muted-foreground text-xs font-medium">
+                    <Trans>Preview</Trans>
+                  </div>
+
+                  <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
+                    {includeSenderDetails
+                      ? _(msg`"${placeholderEmail}" on behalf of "${team.name}" has invited you to sign "example
+                      document".`)
+                      : _(msg`"${team.name}" has invited you to sign "example document".`)}
+                  </Alert>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the formatting of the message that will be sent when inviting a
+                    recipient to sign a document. If a custom message has been provided while
+                    configuring the document, it will be used instead.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Save</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/web/src/app/(teams)/t/[teamUrl]/settings/preferences/page.tsx

@@ -0,0 +1,52 @@
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import { TeamBrandingPreferencesForm } from './branding-preferences';
+import { TeamDocumentPreferencesForm } from './document-preferences';
+
+export type TeamsSettingsPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsPage({ params }: TeamsSettingsPageProps) {
+  await setupI18nSSR();
+
+  const { _ } = useLingui();
+
+  const { teamUrl } = params;
+
+  const session = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: session.user.id, teamUrl });
+
+  return (
+    <div>
+      <SettingsHeader
+        title={_(msg`Team Preferences`)}
+        subtitle={_(msg`Here you can set preferences and defaults for your team.`)}
+      />
+
+      <section>
+        <TeamDocumentPreferencesForm team={team} settings={team.teamGlobalSettings} />
+      </section>
+
+      <SettingsHeader
+        title={_(msg`Branding Preferences`)}
+        subtitle={_(msg`Here you can set preferences and defaults for branding.`)}
+        className="mt-8"
+      />
+
+      <section>
+        <TeamBrandingPreferencesForm team={team} settings={team.teamGlobalSettings} />
+      </section>
+    </div>
+  );
+}

apps/web/src/components/(teams)/forms/update-team-form.tsx

@@ -6,14 +6,22 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import type { z } from 'zod';
 
 import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DocumentVisibility } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import {
+  DocumentVisibilitySelect,
+  DocumentVisibilityTooltip,
+} from '@documenso/ui/components/document/document-visibility-select';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Form,
   FormControl,
@@ -29,18 +37,29 @@ export type UpdateTeamDialogProps = {
   teamId: number;
   teamName: string;
   teamUrl: string;
+  documentVisibility?: DocumentVisibility;
+  includeSenderDetails?: boolean;
 };
 
 const ZUpdateTeamFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
   name: true,
   url: true,
+  documentVisibility: true,
+  includeSenderDetails: true,
 });
 
 type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
 
-export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+export const UpdateTeamForm = ({
+  teamId,
+  teamName,
+  teamUrl,
+  documentVisibility,
+  includeSenderDetails,
+}: UpdateTeamDialogProps) => {
   const router = useRouter();
-
+  const { data: session } = useSession();
+  const email = session?.user?.email;
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -49,17 +68,36 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
     defaultValues: {
       name: teamName,
       url: teamUrl,
+      documentVisibility,
+      includeSenderDetails,
     },
   });
 
   const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+  const includeSenderDetailsCheck = form.watch('includeSenderDetails');
 
-  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+  const mapVisibilityToRole = (visibility: DocumentVisibility): DocumentVisibility =>
+    match(visibility)
+      .with(DocumentVisibility.ADMIN, () => DocumentVisibility.ADMIN)
+      .with(DocumentVisibility.MANAGER_AND_ABOVE, () => DocumentVisibility.MANAGER_AND_ABOVE)
+      .otherwise(() => DocumentVisibility.EVERYONE);
+
+  const currentVisibilityRole = mapVisibilityToRole(
+    documentVisibility ?? DocumentVisibility.EVERYONE,
+  );
+  const onFormSubmit = async ({
+    name,
+    url,
+    documentVisibility,
+    includeSenderDetails,
+  }: TUpdateTeamFormSchema) => {
     try {
       await updateTeam({
         data: {
           name,
           url,
+          documentVisibility,
+          includeSenderDetails,
         },
         teamId,
       });
@@ -73,6 +111,8 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
       form.reset({
         name,
         url,
+        documentVisibility,
+        includeSenderDetails,
       });
 
       if (url !== teamUrl) {
@@ -146,6 +186,68 @@ export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="documentVisibility"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="mt-4 flex flex-row items-center">
+                  <Trans>Default Document Visibility</Trans>
+                  <DocumentVisibilityTooltip />
+                </FormLabel>
+                <FormControl>
+                  <DocumentVisibilitySelect
+                    currentMemberRole={currentVisibilityRole}
+                    isTeamSettings={true}
+                    {...field}
+                    onValueChange={field.onChange}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="mb-4">
+            <FormField
+              control={form.control}
+              name="includeSenderDetails"
+              render={({ field }) => (
+                <FormItem>
+                  <div className="mt-6 flex flex-row items-center gap-4">
+                    <FormLabel>
+                      <Trans>Send on Behalf of Team</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        className="h-5 w-5"
+                        checkClassName="text-white"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </div>
+
+                  {includeSenderDetailsCheck ? (
+                    <blockquote className="text-foreground/50 text-xs italic">
+                      <Trans>
+                        "{email}" on behalf of "{teamName}" has invited you to sign "example
+                        document".
+                      </Trans>
+                    </blockquote>
+                  ) : (
+                    <blockquote className="text-foreground/50 text-xs italic">
+                      <Trans>"{teamUrl}" has invited you to sign "example document".</Trans>
+                    </blockquote>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
           <div className="flex flex-row justify-end space-x-4">
             <AnimatePresence>
               {form.formState.isDirty && (

apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
 import { Trans } from '@lingui/macro';
-import { Braces, CreditCard, Globe2Icon, Settings, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Settings, Settings2, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
@@ -26,6 +26,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
 
   const settingsPath = `/t/${teamUrl}/settings`;
+  const preferencesPath = `/t/${teamUrl}/settings/preferences`;
   const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
@@ -44,6 +45,20 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href={preferencesPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(preferencesPath) && 'bg-secondary',
+          )}
+        >
+          <Settings2 className="mr-2 h-5 w-5" />
+
+          <Trans>Preferences</Trans>
+        </Button>
+      </Link>
+
       {isPublicProfileEnabled && (
         <Link href={publicProfilePath}>
           <Button

apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
 import { Trans } from '@lingui/macro';
-import { Braces, CreditCard, Globe2Icon, Key, User, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Key, Settings2, User, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
@@ -26,6 +26,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
   const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
 
   const settingsPath = `/t/${teamUrl}/settings`;
+  const preferencesPath = `/t/${teamUrl}/preferences`;
   const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
@@ -52,6 +53,21 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href={preferencesPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(preferencesPath) &&
+              pathname.split('/').length === 4 &&
+              'bg-secondary',
+          )}
+        >
+          <Settings2 className="mr-2 h-5 w-5" />
+          <Trans>Preferences</Trans>
+        </Button>
+      </Link>
+
       {isPublicProfileEnabled && (
         <Link href={publicProfilePath}>
           <Button

apps/web/src/pages/api/branding/logo/team/[teamId].ts

@@ -0,0 +1,59 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import sharp from 'sharp';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const teamId = Number(req.query['teamId']);
+
+  if (teamId === 0 || Number.isNaN(teamId)) {
+    return res.status(400).json({
+      status: 'error',
+      message: 'Invalid team ID',
+    });
+  }
+
+  const settings = await prisma.teamGlobalSettings.findFirst({
+    where: {
+      teamId,
+    },
+  });
+
+  if (!settings || !settings.brandingEnabled) {
+    return res.status(404).json({
+      status: 'error',
+      message: 'Not found',
+    });
+  }
+
+  if (!settings.brandingLogo) {
+    return res.status(404).json({
+      status: 'error',
+      message: 'Not found',
+    });
+  }
+
+  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
+
+  if (!file) {
+    return res.status(404).json({
+      status: 'error',
+      message: 'Not found',
+    });
+  }
+
+  const img = await sharp(file)
+    .toFormat('png', {
+      quality: 80,
+    })
+    .toBuffer();
+
+  res.setHeader('Content-Type', 'image/png');
+  res.setHeader('Content-Length', img.length);
+  // Stale while revalidate for 1 hours to 24 hours
+  res.setHeader('Cache-Control', 'public, s-maxage=3600, stale-while-revalidate=86400');
+
+  res.status(200).send(img);
+}