fix: add multi email transport system (#2942)

apps/remix/app/components/dialogs/claim-update-dialog.tsx

@@ -2,6 +2,7 @@ import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindSubscriptionClaimsResponse } from '@documenso/trpc/server/admin-router/find-subscription-claims.types';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -28,6 +29,7 @@ export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateD
   const { toast } = useToast();
 
   const [open, setOpen] = useState(false);
+  const [backportEmailTransport, setBackportEmailTransport] = useState(false);
 
   const { mutateAsync: updateClaim, isPending } = trpc.admin.claims.update.useMutation({
     onSuccess: () => {
@@ -67,19 +69,33 @@ export const ClaimUpdateDialog = ({ claim, trigger, licenseFlags }: ClaimUpdateD
             await updateClaim({
               id: claim.id,
               data,
+              backportEmailTransport,
             })
           }
           licenseFlags={licenseFlags}
           formSubmitTrigger={
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
-                <Trans>Cancel</Trans>
-              </Button>
+            <>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="backport-email-transport"
+                  checked={backportEmailTransport}
+                  onCheckedChange={(checked) => setBackportEmailTransport(checked === true)}
+                />
+                <label htmlFor="backport-email-transport" className="text-muted-foreground text-sm">
+                  <Trans>Backport email transport</Trans>
+                </label>
+              </div>
 
-              <Button type="submit" loading={isPending}>
-                <Trans>Update Claim</Trans>
-              </Button>
-            </DialogFooter>
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={isPending}>
+                  <Trans>Update Claim</Trans>
+                </Button>
+              </DialogFooter>
+            </>
           }
         />
       </DialogContent>

apps/remix/app/components/dialogs/email-transport-create-dialog.tsx

@@ -0,0 +1,95 @@
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+
+import {
+  EmailTransportForm,
+  type EmailTransportFormValues,
+  emailTransportFormToConfig,
+} from '../forms/email-transport-form';
+
+export type EmailTransportCreateDialogProps = {
+  trigger?: React.ReactNode;
+};
+
+export const EmailTransportCreateDialog = ({ trigger }: EmailTransportCreateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: createTransport, isPending } = trpc.admin.emailTransport.create.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Transport created.`,
+      });
+
+      setOpen(false);
+    },
+    onError: (error) => {
+      toast({
+        title: t`Failed to create transport.`,
+        description: error.message,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const onFormSubmit = async (values: EmailTransportFormValues) => {
+    await createTransport({
+      name: values.name,
+      fromName: values.fromName,
+      fromAddress: values.fromAddress,
+      config: emailTransportFormToConfig(values),
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Add transport</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="scrollbar-hidden max-h-[90vh] overflow-y-auto sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Add Email Transport</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Fill in the details to create a new email transport.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <EmailTransportForm
+          onFormSubmit={onFormSubmit}
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Create</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/email-transport-delete-dialog.tsx

@@ -0,0 +1,114 @@
+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,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+
+export type EmailTransportDeleteDialogProps = {
+  transportId: string;
+  transportName: string;
+  subscriptionClaimCount: number;
+  organisationClaimCount: number;
+  trigger: React.ReactNode;
+};
+
+export const EmailTransportDeleteDialog = ({
+  transportId,
+  transportName,
+  subscriptionClaimCount,
+  organisationClaimCount,
+  trigger,
+}: EmailTransportDeleteDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const isInUse = subscriptionClaimCount + organisationClaimCount > 0;
+
+  const { mutateAsync: deleteTransport, isPending } = trpc.admin.emailTransport.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Transport deleted.`,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Failed to delete transport.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Delete Email Transport</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Are you sure you want to delete the following transport?</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral">
+          <AlertDescription className="text-center font-semibold">{transportName}</AlertDescription>
+        </Alert>
+
+        {isInUse && (
+          <Alert variant="destructive">
+            <AlertDescription>
+              <Trans>Warning, this email transport is currently being used by:</Trans>
+
+              <ul className="mt-2 list-disc pl-5">
+                {subscriptionClaimCount > 0 && (
+                  <li>
+                    <Plural value={subscriptionClaimCount} one="# Subscription claim" other="# Subscription claims" />
+                  </li>
+                )}
+
+                {organisationClaimCount > 0 && (
+                  <li>
+                    <Plural value={organisationClaimCount} one="# Organisation claim" other="# Organisation claims" />
+                  </li>
+                )}
+              </ul>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => setOpen(false)} disabled={isPending}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="submit"
+            variant="destructive"
+            loading={isPending}
+            onClick={async () => deleteTransport({ id: transportId })}
+          >
+            <Trans>Delete</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/email-transport-send-test-dialog.tsx

@@ -0,0 +1,126 @@
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const ZSendTestEmailFormSchema = z.object({
+  to: z.string().email(),
+});
+
+type TSendTestEmailFormSchema = z.infer<typeof ZSendTestEmailFormSchema>;
+
+export type EmailTransportSendTestDialogProps = {
+  transportId: string;
+  trigger: React.ReactNode;
+};
+
+export const EmailTransportSendTestDialog = ({ transportId, trigger }: EmailTransportSendTestDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: sendTest } = trpc.admin.emailTransport.sendTest.useMutation({
+    onSuccess: () => {
+      toast({
+        title: t`Test email sent.`,
+      });
+      setOpen(false);
+    },
+    onError: (error) => {
+      toast({
+        title: t`Test failed.`,
+        description: error.message,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const form = useForm<TSendTestEmailFormSchema>({
+    resolver: zodResolver(ZSendTestEmailFormSchema),
+    defaultValues: {
+      to: '',
+    },
+  });
+
+  const onFormSubmit = async ({ to }: TSendTestEmailFormSchema) => {
+    await sendTest({ id: transportId, to });
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Send Test Email</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Send a test email using this transport to verify the configuration.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="to"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="email" placeholder={t`test@example.com`} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={() => setOpen(false)}
+                  disabled={form.formState.isSubmitting}
+                >
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Send</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/email-transport-update-dialog.tsx

@@ -0,0 +1,104 @@
+import { trpc } from '@documenso/trpc/react';
+import type { TFindEmailTransportsResponse } from '@documenso/trpc/server/admin-router/email-transport/find-email-transports.types';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useState } from 'react';
+
+import {
+  EmailTransportForm,
+  type EmailTransportFormValues,
+  emailTransportFormToConfig,
+} from '../forms/email-transport-form';
+
+export type EmailTransportUpdateDialogProps = {
+  transport: TFindEmailTransportsResponse['data'][number];
+  trigger: React.ReactNode;
+};
+
+export const EmailTransportUpdateDialog = ({ transport, trigger }: EmailTransportUpdateDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+
+  const { mutateAsync: updateTransport, isPending } = trpc.admin.emailTransport.update.useMutation();
+
+  const onFormSubmit = async (values: EmailTransportFormValues) => {
+    try {
+      await updateTransport({
+        id: transport.id,
+        data: {
+          name: values.name,
+          fromName: values.fromName,
+          fromAddress: values.fromAddress,
+          config: emailTransportFormToConfig(values),
+        },
+      });
+
+      toast({
+        title: t`Transport updated.`,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: t`Failed to save transport.`,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild onClick={(e) => e.stopPropagation()}>
+        {trigger}
+      </DialogTrigger>
+
+      <DialogContent className="scrollbar-hidden max-h-[90vh] overflow-y-auto sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Edit Email Transport</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Modify the details of the email transport.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <EmailTransportForm
+          isEdit
+          defaultValues={{
+            // Pre-fill the non-secret connection settings; secrets stay blank
+            // and are preserved on save unless re-entered.
+            ...(transport.config ?? {}),
+            name: transport.name,
+            fromName: transport.fromName,
+            fromAddress: transport.fromAddress,
+            type: transport.type,
+          }}
+          onFormSubmit={onFormSubmit}
+          formSubmitTrigger={
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isPending}>
+                <Trans>Save changes</Trans>
+              </Button>
+            </DialogFooter>
+          }
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/email-transport-form.tsx

@@ -0,0 +1,317 @@
+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 { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const ZEmailTransportFormSchema = z.object({
+  name: z.string().min(1),
+  fromName: z.string().min(1),
+  fromAddress: z.string().email(),
+  type: z.enum(['SMTP_AUTH', 'SMTP_API', 'RESEND', 'MAILCHANNELS']),
+  host: z.string().optional(),
+  port: z.coerce.number().int().positive().optional(),
+  secure: z.boolean().optional(),
+  ignoreTLS: z.boolean().optional(),
+  username: z.string().optional(),
+  password: z.string().optional(),
+  service: z.string().optional(),
+  apiKey: z.string().optional(),
+  apiKeyUser: z.string().optional(),
+  endpoint: z.string().optional(),
+});
+
+export type EmailTransportFormValues = z.infer<typeof ZEmailTransportFormSchema>;
+
+type EmailTransportFormProps = {
+  defaultValues?: Partial<EmailTransportFormValues>;
+  isEdit?: boolean;
+  onFormSubmit: (values: EmailTransportFormValues) => Promise<void>;
+  formSubmitTrigger?: React.ReactNode;
+};
+
+export const EmailTransportForm = ({
+  defaultValues,
+  isEdit = false,
+  onFormSubmit,
+  formSubmitTrigger,
+}: EmailTransportFormProps) => {
+  const { t } = useLingui();
+
+  const form = useForm<EmailTransportFormValues>({
+    resolver: zodResolver(ZEmailTransportFormSchema),
+    defaultValues: {
+      name: '',
+      fromName: '',
+      fromAddress: '',
+      type: 'SMTP_AUTH',
+      secure: false,
+      ignoreTLS: false,
+      ...defaultValues,
+    },
+  });
+
+  const type = form.watch('type');
+  const secretPlaceholder = isEdit ? t`Leave blank to keep current` : undefined;
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={form.formState.isSubmitting} className="space-y-4">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input placeholder={t`e.g. Resend (free plans)`} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="fromName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>From name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="fromAddress"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>From address</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Transport type</Trans>
+                </FormLabel>
+                <Select value={field.value} onValueChange={field.onChange} disabled={isEdit}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="SMTP_AUTH">SMTP (auth)</SelectItem>
+                    <SelectItem value="SMTP_API">SMTP (api)</SelectItem>
+                    <SelectItem value="RESEND">Resend</SelectItem>
+                    <SelectItem value="MAILCHANNELS">MailChannels</SelectItem>
+                  </SelectContent>
+                </Select>
+                {isEdit && (
+                  <FormDescription>
+                    <Trans>Transport type cannot be changed after creation.</Trans>
+                  </FormDescription>
+                )}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {(type === 'SMTP_AUTH' || type === 'SMTP_API') && (
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="host"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Host</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="port"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Port</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="number" {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          )}
+
+          {type === 'SMTP_AUTH' && (
+            <>
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Username</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Password</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+
+          {type === 'SMTP_API' && (
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>API key</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {(type === 'RESEND' || type === 'MAILCHANNELS') && (
+            <FormField
+              control={form.control}
+              name="apiKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>API key</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder={secretPlaceholder} {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {type === 'MAILCHANNELS' && (
+            <FormField
+              control={form.control}
+              name="endpoint"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Endpoint (optional)</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {formSubmitTrigger}
+        </fieldset>
+      </form>
+    </Form>
+  );
+};
+
+/**
+ * Maps flat form values to the tRPC `config` discriminated union.
+ */
+export const emailTransportFormToConfig = (values: EmailTransportFormValues) => {
+  switch (values.type) {
+    case 'SMTP_AUTH':
+      return {
+        type: 'SMTP_AUTH' as const,
+        host: values.host ?? '',
+        port: values.port ?? 587,
+        secure: values.secure ?? false,
+        ignoreTLS: values.ignoreTLS ?? false,
+        username: values.username || undefined,
+        password: values.password || undefined,
+        service: values.service || undefined,
+      };
+    case 'SMTP_API':
+      return {
+        type: 'SMTP_API' as const,
+        host: values.host ?? '',
+        port: values.port ?? 587,
+        secure: values.secure ?? false,
+        apiKey: values.apiKey || '',
+        apiKeyUser: values.apiKeyUser || undefined,
+      };
+    case 'RESEND':
+      return { type: 'RESEND' as const, apiKey: values.apiKey || '' };
+    case 'MAILCHANNELS':
+      return {
+        type: 'MAILCHANNELS' as const,
+        apiKey: values.apiKey || '',
+        endpoint: values.endpoint || undefined,
+      };
+  }
+};

apps/remix/app/components/forms/subscription-claim-form.tsx

@@ -1,5 +1,6 @@
 import type { TLicenseClaim } from '@documenso/lib/types/license';
 import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
+import { trpc } from '@documenso/trpc/react';
 import { ZCreateSubscriptionClaimRequestSchema } from '@documenso/trpc/server/admin-router/create-subscription-claim.types';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Checkbox } from '@documenso/ui/primitives/checkbox';
@@ -13,6 +14,7 @@ import {
   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 { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { SubscriptionClaim } from '@prisma/client';
@@ -59,9 +61,14 @@ export const SubscriptionClaimForm = ({
       emailQuota: subscriptionClaim.emailQuota,
       apiRateLimits: subscriptionClaim.apiRateLimits,
       apiQuota: subscriptionClaim.apiQuota,
+      emailTransportId: subscriptionClaim.emailTransportId ?? null,
     },
   });
 
+  const { data: transportsData } = trpc.admin.emailTransport.find.useQuery({ perPage: 100 });
+  const transports = transportsData?.data ?? [];
+  const NONE_VALUE = '__none__';
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onFormSubmit)}>
@@ -238,6 +245,40 @@ export const SubscriptionClaimForm = ({
 
           <ClaimLimitFields control={form.control} disabled={form.formState.isSubmitting} />
 
+          <FormField
+            control={form.control}
+            name="emailTransportId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Email transport</Trans>
+                </FormLabel>
+                <Select
+                  value={field.value ?? NONE_VALUE}
+                  onValueChange={(value) => field.onChange(value === NONE_VALUE ? null : value)}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t`Default (system mailer)`} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value={NONE_VALUE}>{t`Default (system mailer)`}</SelectItem>
+                    {transports.map((transport) => (
+                      <SelectItem key={transport.id} value={transport.id}>
+                        {transport.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  <Trans>Plans without a transport use the system default mailer.</Trans>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {formSubmitTrigger}
         </fieldset>
       </form>

apps/remix/app/components/tables/admin-email-transports-table.tsx

@@ -0,0 +1,179 @@
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { EditIcon, MoreHorizontalIcon, SendIcon, Trash2Icon } from 'lucide-react';
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { EmailTransportDeleteDialog } from '../dialogs/email-transport-delete-dialog';
+import { EmailTransportSendTestDialog } from '../dialogs/email-transport-send-test-dialog';
+import { EmailTransportUpdateDialog } from '../dialogs/email-transport-update-dialog';
+
+export const AdminEmailTransportsTable = () => {
+  const { t, i18n } = useLingui();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError } = trpc.admin.emailTransport.find.useQuery({
+    query: parsedSearchParams.query,
+    page: parsedSearchParams.page,
+    perPage: parsedSearchParams.perPage,
+  });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 20,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Name`,
+        accessorKey: 'name',
+      },
+      {
+        header: t`Type`,
+        accessorKey: 'type',
+      },
+      {
+        header: t`From`,
+        cell: ({ row }) => `${row.original.fromName} <${row.original.fromAddress}>`,
+      },
+      {
+        header: t`Used by claims`,
+        cell: ({ row }) => row.original._count.subscriptionClaims + row.original._count.organisationClaims,
+      },
+      {
+        header: t`Created`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+      {
+        id: 'actions',
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <MoreHorizontalIcon className="h-5 w-5 text-muted-foreground" />
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent className="w-52" align="start" forceMount>
+              <DropdownMenuLabel>
+                <Trans>Actions</Trans>
+              </DropdownMenuLabel>
+
+              <EmailTransportUpdateDialog
+                transport={row.original}
+                trigger={
+                  <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                    <div>
+                      <EditIcon className="mr-2 h-4 w-4" />
+                      <Trans>Edit</Trans>
+                    </div>
+                  </DropdownMenuItem>
+                }
+              />
+
+              <EmailTransportSendTestDialog
+                transportId={row.original.id}
+                trigger={
+                  <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                    <div>
+                      <SendIcon className="mr-2 h-4 w-4" />
+                      <Trans>Send test</Trans>
+                    </div>
+                  </DropdownMenuItem>
+                }
+              />
+
+              <EmailTransportDeleteDialog
+                transportId={row.original.id}
+                transportName={row.original.name}
+                subscriptionClaimCount={row.original._count.subscriptionClaims}
+                organisationClaimCount={row.original._count.organisationClaims}
+                trigger={
+                  <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                    <div>
+                      <Trash2Icon className="mr-2 h-4 w-4" />
+                      <Trans>Delete</Trans>
+                    </div>
+                  </DropdownMenuItem>
+                }
+              />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+        error={{
+          enable: isLoadingError,
+        }}
+        skeleton={{
+          enable: isLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell className="py-4 pr-4">
+                <Skeleton className="h-4 w-24 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-16 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-40 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-20 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <div className="flex flex-row justify-end space-x-2">
+                  <Skeleton className="h-2 w-6 rounded" />
+                </div>
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+    </div>
+  );
+};

apps/remix/app/routes/_authenticated+/admin+/_layout.tsx

@@ -129,6 +129,17 @@ export default function AdminLayout({ loaderData }: Route.ComponentProps) {
             </Link>
           </Button>
 
+          <Button
+            variant="ghost"
+            className={cn('justify-start md:w-full', pathname?.startsWith('/admin/email-transports') && 'bg-secondary')}
+            asChild
+          >
+            <Link to="/admin/email-transports">
+              <MailIcon className="mr-2 h-5 w-5" />
+              <Trans>Email Transports</Trans>
+            </Link>
+          </Button>
+
           <Button
             variant="ghost"
             className={cn('justify-start md:w-full', pathname?.startsWith('/admin/email-domains') && 'bg-secondary')}

apps/remix/app/routes/_authenticated+/admin+/email-transports._index.tsx

@@ -0,0 +1,59 @@
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { Input } from '@documenso/ui/primitives/input';
+import { useLingui } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router';
+
+import { EmailTransportCreateDialog } from '~/components/dialogs/email-transport-create-dialog';
+import { SettingsHeader } from '~/components/general/settings-header';
+import { AdminEmailTransportsTable } from '~/components/tables/admin-email-transports-table';
+
+export default function AdminEmailTransportsPage() {
+  const { t } = useLingui();
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { pathname } = useLocation();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    // If nothing to change then do nothing.
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
+
+  return (
+    <div>
+      <SettingsHeader title={t`Email Transports`} subtitle={t`Manage all email transports`} hideDivider>
+        <EmailTransportCreateDialog />
+      </SettingsHeader>
+
+      <div className="mt-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t`Search by name or from address`}
+          className="mb-4"
+        />
+
+        <AdminEmailTransportsTable />
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx

@@ -24,6 +24,7 @@ import {
   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 { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -572,6 +573,10 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
 
   const { mutateAsync: updateOrganisation } = trpc.admin.organisation.update.useMutation();
 
+  const { data: transportsData } = trpc.admin.emailTransport.find.useQuery({ perPage: 100 });
+  const transports = transportsData?.data ?? [];
+  const NONE_VALUE = '__none__';
+
   const hasRestrictedEnterpriseFeatures = Object.values(SUBSCRIPTION_CLAIM_FEATURE_FLAGS).some(
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     (flag) => flag.isEnterprise && !licenseFlags?.[flag.key as keyof TLicenseClaim],
@@ -602,6 +607,7 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
           TUpdateOrganisationBillingFormSchema['claims']
         >['apiRateLimits'],
         apiQuota: organisation.organisationClaim.apiQuota,
+        emailTransportId: organisation.organisationClaim.emailTransportId ?? null,
       },
       originalSubscriptionClaimId: organisation.organisationClaim.originalSubscriptionClaimId || '',
     },
@@ -865,6 +871,40 @@ const OrganisationAdminForm = ({ organisation, licenseFlags }: OrganisationAdmin
 
         <ClaimLimitFields control={form.control} prefix="claims." />
 
+        <FormField
+          control={form.control}
+          name="claims.emailTransportId"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                <Trans>Email transport</Trans>
+              </FormLabel>
+              <Select
+                value={field.value ?? NONE_VALUE}
+                onValueChange={(value) => field.onChange(value === NONE_VALUE ? null : value)}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={t`Default (system mailer)`} />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value={NONE_VALUE}>{t`Default (system mailer)`}</SelectItem>
+                  {transports.map((transport) => (
+                    <SelectItem key={transport.id} value={transport.id}>
+                      {transport.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                <Trans>Organisations without a transport use the system default mailer.</Trans>
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <div className="flex justify-end">
           <Button type="submit" loading={form.formState.isSubmitting}>
             <Trans>Update</Trans>