Merge branch 'main' into fix/replace-hardcoded-grays-with-theme-tokens

2026-08-23 14:52:23 +10:00 · 2026-08-19 10:21:45 +00:00
parent a3dc96e8c1 d42254ff52
commit ff24229afb
417 changed files with 30071 additions and 13944 deletions
@@ -0,0 +1,119 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type BrandingPreferencesResetDialogProps = {
+  hasAdvancedBranding: boolean;
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  trigger?: React.ReactNode;
+};
+
+export const BrandingPreferencesResetDialog = ({
+  hasAdvancedBranding,
+  isSubmitting,
+  onReset,
+  trigger,
+}: BrandingPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset branding preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all branding preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>Custom branding enabled setting</Trans>
+              </li>
+              <li>
+                <Trans>Branding logo</Trans>
+              </li>
+              <li>
+                <Trans>Brand website and brand details</Trans>
+              </li>
+              <li>
+                <Trans>Brand colours, including background, foreground, primary, and border colours</Trans>
+              </li>
+
+              {hasAdvancedBranding && (
+                <>
+                  <li>
+                    <Trans>Border radius</Trans>
+                  </li>
+                  <li>
+                    <Trans>Custom CSS</Trans>
+                  </li>
+                </>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -0,0 +1,122 @@
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type DocumentPreferencesResetDialogProps = {
+  isSubmitting: boolean;
+  onReset: () => Promise<void>;
+  showAiFeatures?: boolean;
+  showDocumentVisibility?: boolean;
+};
+
+export const DocumentPreferencesResetDialog = ({
+  isSubmitting,
+  onReset,
+  showAiFeatures = false,
+  showDocumentVisibility = false,
+}: DocumentPreferencesResetDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const isLoading = isSubmitting || isResetting;
+
+  const handleResetToDefaults = async () => {
+    setIsResetting(true);
+
+    try {
+      await onReset();
+      setOpen(false);
+    } catch {
+      // The submit handler surfaces its own error toast. Keep the dialog open
+      // so the user can retry.
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button variant="destructive" type="button" size="sm" disabled={isLoading}>
+          <Trans>Reset to defaults</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Reset document preferences</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              This will reset all document preferences to their default values and save the changes immediately.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will be reset:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              {showDocumentVisibility && (
+                <li>
+                  <Trans>Default document visibility</Trans>
+                </li>
+              )}
+              <li>
+                <Trans>Default document language</Trans>
+              </li>
+              <li>
+                <Trans>Default date format</Trans>
+              </li>
+              <li>
+                <Trans>Default time zone</Trans>
+              </li>
+              <li>
+                <Trans>Default signature settings</Trans>
+              </li>
+              <li>
+                <Trans>Default recipients</Trans>
+              </li>
+              <li>
+                <Trans>Delegate document ownership</Trans>
+              </li>
+              {showAiFeatures && (
+                <li>
+                  <Trans>AI features</Trans>
+                </li>
+              )}
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isLoading}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button type="button" variant="destructive" loading={isLoading} onClick={() => void handleResetToDefaults()}>
+            <Trans>Reset to defaults</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -0,0 +1,377 @@
+import {
+  createZipWriter,
+  sanitizeZipPathSegment,
+  type ZipFileEntry,
+} from '@documenso/lib/client-only/create-zip-writer';
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { fetchPDF } from '@documenso/lib/client-only/download-pdf';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { RadioGroupSegmented, RadioGroupSegmentedItem } from '@documenso/ui/primitives/radio-group';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { plural } from '@lingui/core/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import { DocumentStatus } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useRef, useState } from 'react';
+import { match } from 'ts-pattern';
+
+/**
+ * The maximum number of documents that can be downloaded in a single bulk
+ * download. Each document requires fetching its full PDFs into the browser,
+ * so this bounds both request volume and blob storage usage. Matches the
+ * spirit of the server-side 100 cap on bulk move/delete/cancel.
+ */
+export const MAX_BULK_DOWNLOAD_ENVELOPES = 50;
+
+type BulkDownloadVersion = 'signed' | 'original' | 'pending';
+
+export type EnvelopeBulkDownloadItem = {
+  id: string;
+  title: string;
+  status: DocumentStatus;
+
+  /**
+   * Whether the envelope is a legacy (v1) envelope. Legacy envelopes use a
+   * different field-rendering pipeline that the partial PDF helper does not
+   * implement, so the Partial option is hidden for them.
+   */
+  isLegacy: boolean;
+};
+
+const getDefaultVersion = (envelope: EnvelopeBulkDownloadItem): BulkDownloadVersion =>
+  envelope.status === DocumentStatus.COMPLETED ? 'signed' : 'original';
+
+export type EnvelopesBulkDownloadDialogProps = {
+  envelopes: EnvelopeBulkDownloadItem[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: (successfulEnvelopeIds: string[]) => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopesBulkDownloadDialog = ({
+  envelopes,
+  open,
+  onOpenChange,
+  onSuccess,
+  ...props
+}: EnvelopesBulkDownloadDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [versionMap, setVersionMap] = useState<Record<string, BulkDownloadVersion>>({});
+  const [progress, setProgress] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const abortRef = useRef(false);
+
+  const trpcUtils = trpc.useUtils();
+
+  const isOverDownloadLimit = envelopes.length > MAX_BULK_DOWNLOAD_ENVELOPES;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    setVersionMap(Object.fromEntries(envelopes.map((envelope) => [envelope.id, getDefaultVersion(envelope)])));
+    setProgress(0);
+  }, [open]);
+
+  const getDownloadVersion = (envelope: EnvelopeBulkDownloadItem): BulkDownloadVersion =>
+    versionMap[envelope.id] ?? getDefaultVersion(envelope);
+
+  /**
+   * The version options selectable for an envelope, mirroring the gating used
+   * by the single envelope download dialog:
+   *   - COMPLETED: signed or original.
+   *   - PENDING (non-legacy): partial or original. Legacy envelopes use a
+   *     field-rendering pipeline the partial PDF helper does not implement.
+   *   - Anything else: original only, so no choice is shown.
+   */
+  const getVersionOptions = (
+    envelope: EnvelopeBulkDownloadItem,
+  ): { value: BulkDownloadVersion; label: string }[] | null => {
+    if (envelope.status === DocumentStatus.COMPLETED) {
+      return [
+        { value: 'signed', label: t({ message: 'Signed', context: 'Signed document (adjective)' }) },
+        { value: 'original', label: t({ message: 'Original', context: 'Original document (adjective)' }) },
+      ];
+    }
+
+    if (envelope.status === DocumentStatus.PENDING && !envelope.isLegacy) {
+      return [
+        { value: 'pending', label: t({ message: 'Partial', context: 'Partially signed document (adjective)' }) },
+        { value: 'original', label: t({ message: 'Original', context: 'Original document (adjective)' }) },
+      ];
+    }
+
+    return null;
+  };
+
+  const getStatusLabel = (status: DocumentStatus) =>
+    match(status)
+      .with(DocumentStatus.COMPLETED, () => t`Completed`)
+      .with(DocumentStatus.PENDING, () => t`Pending`)
+      .with(DocumentStatus.DRAFT, () => t`Draft`)
+      .with(DocumentStatus.REJECTED, () => t`Rejected`)
+      .with(DocumentStatus.CANCELLED, () => t`Cancelled`)
+      .exhaustive();
+
+  const onDownload = async () => {
+    if (envelopes.length === 0 || isOverDownloadLimit || isDownloading) {
+      return;
+    }
+
+    abortRef.current = false;
+    setIsDownloading(true);
+    setProgress(0);
+
+    const zipWriter = createZipWriter();
+
+    const successfulEnvelopeIds: string[] = [];
+    let failedDownloads = 0;
+
+    try {
+      for (const envelope of envelopes) {
+        if (abortRef.current) {
+          break;
+        }
+
+        try {
+          const downloadVersion = getDownloadVersion(envelope);
+
+          const { data: envelopeItems } = await trpcUtils.envelope.item.getManyByToken.fetch({
+            envelopeId: envelope.id,
+            access: {
+              type: 'user',
+            },
+          });
+
+          // Each envelope's items are grouped in their own folder. The id
+          // prefix guarantees uniqueness, the truncated title keeps it
+          // readable without risking overly long extraction paths.
+          const folderName = sanitizeZipPathSegment(`${envelope.id}_${envelope.title}`.slice(0, 96));
+
+          // Buffer this envelope's files before writing so a failed envelope
+          // is either fully in the zip or not at all. Files from previous
+          // envelopes have already been written to the zip stream and freed.
+          const envelopeFiles: ZipFileEntry[] = [];
+
+          for (const envelopeItem of envelopeItems) {
+            const { filename, blob } = await fetchPDF({
+              envelopeItem,
+              token: undefined,
+              fileName: envelopeItem.title,
+              version: downloadVersion,
+            });
+
+            envelopeFiles.push({
+              filename: `${folderName}/${sanitizeZipPathSegment(filename)}`,
+              data: blob,
+            });
+          }
+
+          for (const file of envelopeFiles) {
+            await zipWriter.addFile(file);
+          }
+
+          successfulEnvelopeIds.push(envelope.id);
+        } catch (error) {
+          console.error(error);
+          failedDownloads++;
+        }
+
+        setProgress((p) => p + 1);
+      }
+
+      // The user intentionally stopped the download, discard anything fetched
+      // so far without toasting an error.
+      if (abortRef.current) {
+        zipWriter.abort();
+        return;
+      }
+
+      if (successfulEnvelopeIds.length === 0) {
+        zipWriter.abort();
+
+        toast({
+          title: t`Error`,
+          description: t`An error occurred while downloading the documents.`,
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      try {
+        downloadFile({
+          filename: `documenso-documents-${new Date().toISOString().slice(0, 10)}.zip`,
+          data: zipWriter.finalize(),
+        });
+      } catch (error) {
+        console.error(error);
+
+        zipWriter.abort();
+
+        toast({
+          title: t`Error`,
+          description: t`An error occurred while downloading the documents.`,
+          variant: 'destructive',
+        });
+
+        return;
+      }
+
+      if (failedDownloads > 0) {
+        toast({
+          title: t`Documents partially downloaded`,
+          description: t`${plural(successfulEnvelopeIds.length, {
+            one: '# document downloaded.',
+            other: '# documents downloaded.',
+          })} ${plural(failedDownloads, {
+            one: '# document could not be downloaded.',
+            other: '# documents could not be downloaded.',
+          })}`,
+          variant: 'destructive',
+        });
+        onSuccess?.(successfulEnvelopeIds);
+        return;
+      }
+
+      toast({
+        title: t`Documents downloaded`,
+        description: plural(successfulEnvelopeIds.length, {
+          one: '# document has been downloaded.',
+          other: '# documents have been downloaded.',
+        }),
+      });
+
+      onSuccess?.(successfulEnvelopeIds);
+      onOpenChange(false);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => {
+        if (!isDownloading) {
+          onOpenChange(value);
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Download Documents</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Plural
+              value={envelopes.length}
+              one="Select the version to download for the selected document."
+              other="Select the version to download for each of the # selected documents."
+            />
+          </DialogDescription>
+        </DialogHeader>
+
+        {isOverDownloadLimit && (
+          <Alert variant="warning">
+            <AlertDescription>
+              <Trans>
+                You can download up to {MAX_BULK_DOWNLOAD_ENVELOPES} documents at a time. Deselect some documents to
+                continue.
+              </Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <fieldset disabled={isDownloading} className="space-y-4">
+          <div className="-mx-3 max-h-96 overflow-y-auto px-3">
+            <div className="divide-y divide-border rounded-lg border border-border">
+              {envelopes.map((envelope) => {
+                const versionOptions = getVersionOptions(envelope);
+
+                return (
+                  <div key={envelope.id} className="flex items-center gap-3 px-3 py-2.5">
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate font-medium text-foreground text-sm" title={envelope.title}>
+                        {envelope.title}
+                      </p>
+                      <p className="text-muted-foreground text-xs">{getStatusLabel(envelope.status)}</p>
+                    </div>
+
+                    {versionOptions && (
+                      <RadioGroupSegmented
+                        className="shrink-0"
+                        value={getDownloadVersion(envelope)}
+                        onValueChange={(value) =>
+                          setVersionMap((prev) => ({
+                            ...prev,
+                            [envelope.id]: value as BulkDownloadVersion,
+                          }))
+                        }
+                        aria-label={t`Download version for ${envelope.title}`}
+                      >
+                        {versionOptions.map((option) => (
+                          <RadioGroupSegmentedItem key={option.value} value={option.value}>
+                            {option.label}
+                          </RadioGroupSegmentedItem>
+                        ))}
+                      </RadioGroupSegmented>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {isDownloading && (
+            <p className="text-muted-foreground text-sm">
+              <Trans>
+                Downloading {progress} / {envelopes.length}...
+              </Trans>
+            </p>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => {
+                if (isDownloading) {
+                  abortRef.current = true;
+                } else {
+                  onOpenChange(false);
+                }
+              }}
+            >
+              {isDownloading ? <Trans>Stop</Trans> : <Trans>Cancel</Trans>}
+            </Button>
+
+            <Button
+              type="button"
+              onClick={() => void onDownload()}
+              loading={isDownloading}
+              disabled={envelopes.length === 0 || isOverDownloadLimit}
+            >
+              <Trans>Download</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -122,7 +122,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
                    <FormLabel>
                      <Trans>
                        Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                      </Trans>
                    </FormLabel>
                    <FormControl>
@@ -1,7 +1,7 @@
 import type { InternalClaimPlans } from '@documenso/ee/server-only/stripe/get-internal-claim-plans';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { DOCUMENSO_CLOUD_ENTERPRISE_CTA_URL, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
 import { parseMessageDescriptorMacro } from '@documenso/lib/utils/i18n';
@@ -336,7 +336,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
        >
          <div className="w-full text-left">
            <div className="flex items-center justify-between">
-              <p className="text-medium">
+              <p className="font-medium">
                <Trans context="Plan price">Free</Trans>
              </p>

@@ -380,7 +380,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
        ))}

        <Link
-          to="https://documen.so/enterprise-cta"
+          to={DOCUMENSO_CLOUD_ENTERPRISE_CTA_URL}
          target="_blank"
          className="flex items-center space-x-2 rounded-md border bg-muted/30 p-4"
        >
@@ -115,7 +115,7 @@ export const OrganisationEmailDomainDeleteDialog = ({
                    <FormLabel>
                      <Trans>
                        Confirm by typing{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                      </Trans>
                    </FormLabel>
                    <FormControl>
@@ -370,7 +370,7 @@ export const OrganisationMemberInviteDialog = ({ trigger, ...props }: Organisati
                          <button
                            type="button"
                            className={cn(
-                              'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                              'inline-flex h-10 w-10 items-center justify-start text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
                              index === 0 ? 'mt-8' : 'mt-0',
                            )}
                            disabled={organisationMemberInvites.length === 1}
@@ -17,28 +17,25 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { Prisma } from '@prisma/client';
+import type { Team, TeamEmail, TeamEmailVerification } from '@prisma/client';
 import { useState } from 'react';
 import { useRevalidator } from 'react-router';

 export type TeamEmailDeleteDialogProps = {
  trigger?: React.ReactNode;
  teamName: string;
-  team: Prisma.TeamGetPayload<{
-    include: {
-      teamEmail: true;
-      emailVerification: {
-        select: {
-          expiresAt: true;
-          name: true;
-          email: true;
-        };
-      };
-    };
-  }>;
+  team: Pick<Team, 'id' | 'avatarImageId' | 'name'>;
+  teamEmail: Pick<TeamEmail, 'email' | 'name'> | null;
+  emailVerification: Pick<TeamEmailVerification, 'email' | 'name' | 'expiresAt'> | null;
 };

-export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDeleteDialogProps) => {
+export const TeamEmailDeleteDialog = ({
+  trigger,
+  teamName,
+  team,
+  teamEmail,
+  emailVerification,
+}: TeamEmailDeleteDialogProps) => {
  const [open, setOpen] = useState(false);

  const { _ } = useLingui();
@@ -83,11 +80,11 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
    });

  const onRemove = async () => {
-    if (team.teamEmail) {
+    if (teamEmail) {
      await deleteTeamEmail({ teamId: team.id });
    }

-    if (team.emailVerification) {
+    if (emailVerification) {
      await deleteTeamEmailVerification({ teamId: team.id });
    }

@@ -121,13 +118,13 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
          <AvatarWithText
            avatarClass="h-12 w-12"
            avatarSrc={formatAvatarUrl(team.avatarImageId)}
-            avatarFallback={extractInitials((team.teamEmail?.name || team.emailVerification?.name) ?? '')}
+            avatarFallback={extractInitials((teamEmail?.name || emailVerification?.name) ?? '')}
            primaryText={
              <span className="font-semibold text-foreground/80 text-sm">
-                {team.teamEmail?.name || team.emailVerification?.name}
+                {teamEmail?.name || emailVerification?.name}
              </span>
            }
-            secondaryText={<span className="text-sm">{team.teamEmail?.email || team.emailVerification?.email}</span>}
+            secondaryText={<span className="text-sm">{teamEmail?.email || emailVerification?.email}</span>}
          />
        </Alert>

@@ -23,7 +23,8 @@ import { useRevalidator } from 'react-router';
 import type { z } from 'zod';

 export type TeamEmailUpdateDialogProps = {
-  teamEmail: TeamEmail;
+  teamId: number;
+  teamEmail: Pick<TeamEmail, 'email' | 'name'>;
  trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;

@@ -33,7 +34,7 @@ const ZUpdateTeamEmailFormSchema = ZUpdateTeamEmailMutationSchema.pick({

 type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;

-export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmailUpdateDialogProps) => {
+export const TeamEmailUpdateDialog = ({ teamId, teamEmail, trigger, ...props }: TeamEmailUpdateDialogProps) => {
  const [open, setOpen] = useState(false);

  const { t } = useLingui();
@@ -53,7 +54,7 @@ export const TeamEmailUpdateDialog = ({ teamEmail, trigger, ...props }: TeamEmai
  const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
    try {
      await updateTeamEmail({
-        teamId: teamEmail.teamId,
+        teamId,
        data: {
          name,
        },
@@ -0,0 +1,250 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import { useCurrentTeam } from '~/providers/team';
+
+const NEVER_EXPIRE = 'NEVER' as const;
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+  [NEVER_EXPIRE]: msg`Never`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+  tokenName: true,
+  expirationDate: true,
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type TokenCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TokenCreateDialog = ({ trigger, ...props }: TokenCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: 'THREE_MONTHS',
+    },
+  });
+
+  const { mutateAsync: createToken } = trpc.apiToken.create.useMutation();
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+    try {
+      const { token } = await createToken({
+        teamId: team.id,
+        tokenName,
+        expirationDate: expirationDate === NEVER_EXPIRE ? null : expirationDate,
+      });
+
+      setCreatedToken(token);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+      setCreatedToken(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Create token</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent
+        className="max-w-lg"
+        position="center"
+        onInteractOutside={(event) => {
+          // Prevent losing the created token by accidentally clicking outside the dialog.
+          if (createdToken) {
+            event.preventDefault();
+          }
+        }}
+      >
+        {createdToken ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Token created</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Copy your token now. For security reasons you will not be able to see it again.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="relative">
+              <Input
+                className="pr-12 font-mono text-sm"
+                aria-label={_(msg`Your new API token`)}
+                name="createdToken"
+                readOnly
+                value={createdToken}
+              />
+              <div className="absolute top-0 right-2 bottom-0 flex items-center justify-center">
+                <CopyTextButton
+                  value={createdToken}
+                  onCopySuccess={() => toast({ title: _(msg`Token copied to clipboard`) })}
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" onClick={() => setOpen(false)}>
+                <Trans>Done</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Create API token</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Use API tokens to authenticate with the Documenso API.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="tokenName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>
+                          <Trans>Name</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>A name to help you identify this token later.</Trans>
+                        </FormDescription>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="expirationDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Expires in</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Select value={field.value ?? NEVER_EXPIRE} onValueChange={field.onChange}>
+                            <SelectTrigger className="bg-background">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                              {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                                <SelectItem key={key} value={key}>
+                                  {_(date)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Create token</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
@@ -105,7 +105,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
-            <Trans>Are you sure you want to delete this token?</Trans>
+            <Trans>Delete token</Trans>
          </DialogTitle>

          <DialogDescription>
@@ -126,7 +126,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
                    <FormLabel>
                      <Trans>
                        Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                      </Trans>
                    </FormLabel>

@@ -139,21 +139,18 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
              />

              <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
+                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>

-                  <Button
-                    type="submit"
-                    variant="destructive"
-                    className="flex-1"
-                    disabled={!form.formState.isValid}
-                    loading={form.formState.isSubmitting}
-                  >
-                    <Trans>I'm sure! Delete it</Trans>
-                  </Button>
-                </div>
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={!form.formState.isValid}
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Delete</Trans>
+                </Button>
              </DialogFooter>
            </fieldset>
          </form>
@@ -117,7 +117,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
                    <FormLabel>
                      <Trans>
                        Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                      </Trans>
                    </FormLabel>
                    <FormControl>