feat: add email domains (#1895)

Implemented Email Domains which allows Platform/Enterprise customers to
send emails to recipients using their custom emails.

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -8,17 +8,24 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
+import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
   isValidLanguageCode,
 } from '@documenso/lib/constants/i18n';
+import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
+import {
+  type TDocumentMetaDateFormat,
+  ZDocumentMetaTimezoneSchema,
+} from '@documenso/trpc/server/document-router/schema';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
+import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -44,6 +51,8 @@ import {
 export type TDocumentPreferencesFormSchema = {
   documentVisibility: DocumentVisibility | null;
   documentLanguage: (typeof SUPPORTED_LANGUAGE_CODES)[number] | null;
+  documentTimezone: string | null;
+  documentDateFormat: TDocumentMetaDateFormat | null;
   includeSenderDetails: boolean | null;
   includeSigningCertificate: boolean | null;
   signatureTypes: DocumentSignatureType[];
@@ -53,6 +62,8 @@ type SettingsSubset = Pick<
   TeamGlobalSettings,
   | 'documentVisibility'
   | 'documentLanguage'
+  | 'documentTimezone'
+  | 'documentDateFormat'
   | 'includeSenderDetails'
   | 'includeSigningCertificate'
   | 'typedSignatureEnabled'
@@ -81,6 +92,8 @@ export const DocumentPreferencesForm = ({
   const ZDocumentPreferencesFormSchema = z.object({
     documentVisibility: z.nativeEnum(DocumentVisibility).nullable(),
     documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES).nullable(),
+    documentTimezone: z.string().nullable(),
+    documentDateFormat: ZDocumentMetaTimezoneSchema.nullable(),
     includeSenderDetails: z.boolean().nullable(),
     includeSigningCertificate: z.boolean().nullable(),
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(canInherit ? 0 : 1, {
@@ -94,6 +107,9 @@ export const DocumentPreferencesForm = ({
       documentLanguage: isValidLanguageCode(settings.documentLanguage)
         ? settings.documentLanguage
         : null,
+      documentTimezone: settings.documentTimezone,
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      documentDateFormat: settings.documentDateFormat as TDocumentMetaDateFormat | null,
       includeSenderDetails: settings.includeSenderDetails,
       includeSigningCertificate: settings.includeSigningCertificate,
       signatureTypes: extractTeamSignatureSettings({ ...settings }),
@@ -124,7 +140,10 @@ export const DocumentPreferencesForm = ({
                       value={field.value === null ? '-1' : field.value}
                       onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                     >
-                      <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectTrigger
+                        className="bg-background text-muted-foreground"
+                        data-testid="document-visibility-trigger"
+                      >
                         <SelectValue />
                       </SelectTrigger>
 
@@ -171,7 +190,10 @@ export const DocumentPreferencesForm = ({
                     value={field.value === null ? '-1' : field.value}
                     onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
                   >
-                    <SelectTrigger className="bg-background text-muted-foreground">
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="document-language-trigger"
+                    >
                       <SelectValue />
                     </SelectTrigger>
 
@@ -199,6 +221,72 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="documentDateFormat"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Default Date Format</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select
+                    value={field.value === null ? '-1' : field.value}
+                    onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                  >
+                    <SelectTrigger data-testid="document-date-format-trigger">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      {DATE_FORMATS.map((format) => (
+                        <SelectItem key={format.key} value={format.value}>
+                          {format.label}
+                        </SelectItem>
+                      ))}
+
+                      {canInherit && (
+                        <SelectItem value={'-1'}>
+                          <Trans>Inherit from organisation</Trans>
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="documentTimezone"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Default Time Zone</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Combobox
+                    triggerPlaceholder={
+                      canInherit ? t`Inherit from organisation` : t`Local timezone`
+                    }
+                    placeholder={t`Select a time zone`}
+                    options={TIME_ZONES}
+                    value={field.value}
+                    onChange={(value) => field.onChange(value)}
+                    testId="document-timezone-trigger"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={form.control}
             name="signatureTypes"
@@ -222,7 +310,7 @@ export const DocumentPreferencesForm = ({
                     emptySelectionPlaceholder={
                       canInherit ? t`Inherit from organisation` : t`Select signature types`
                     }
-                    testId="signature-types-combobox"
+                    testId="signature-types-trigger"
                   />
                 </FormControl>
 
@@ -257,7 +345,10 @@ export const DocumentPreferencesForm = ({
                         field.onChange(value === 'true' ? true : value === 'false' ? false : null)
                       }
                     >
-                      <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectTrigger
+                        className="bg-background text-muted-foreground"
+                        data-testid="include-sender-details-trigger"
+                      >
                         <SelectValue />
                       </SelectTrigger>
 
@@ -325,7 +416,10 @@ export const DocumentPreferencesForm = ({
                       field.onChange(value === 'true' ? true : value === 'false' ? false : null)
                     }
                   >
-                    <SelectTrigger className="bg-background text-muted-foreground">
+                    <SelectTrigger
+                      className="bg-background text-muted-foreground"
+                      data-testid="include-signing-certificate-trigger"
+                    >
                       <SelectValue />
                     </SelectTrigger>
 

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

@@ -0,0 +1,238 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import type { TeamGlobalSettings } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { FROM_ADDRESS } from '@documenso/lib/constants/email';
+import {
+  DEFAULT_DOCUMENT_EMAIL_SETTINGS,
+  ZDocumentEmailSettingsSchema,
+} from '@documenso/lib/types/document-email';
+import { trpc } from '@documenso/trpc/react';
+import { DocumentEmailCheckboxes } from '@documenso/ui/components/document/document-email-checkboxes';
+import { Button } from '@documenso/ui/primitives/button';
+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';
+
+const ZEmailPreferencesFormSchema = z.object({
+  emailId: z.string().nullable(),
+  emailReplyTo: z.string().email().nullable(),
+  // emailReplyToName: z.string(),
+  emailDocumentSettings: ZDocumentEmailSettingsSchema.nullable(),
+});
+
+export type TEmailPreferencesFormSchema = z.infer<typeof ZEmailPreferencesFormSchema>;
+
+type SettingsSubset = Pick<
+  TeamGlobalSettings,
+  'emailId' | 'emailReplyTo' | 'emailDocumentSettings'
+>;
+
+export type EmailPreferencesFormProps = {
+  settings: SettingsSubset;
+  canInherit: boolean;
+  onFormSubmit: (data: TEmailPreferencesFormSchema) => Promise<void>;
+};
+
+export const EmailPreferencesForm = ({
+  settings,
+  onFormSubmit,
+  canInherit,
+}: EmailPreferencesFormProps) => {
+  const organisation = useCurrentOrganisation();
+
+  const form = useForm<TEmailPreferencesFormSchema>({
+    defaultValues: {
+      emailId: settings.emailId,
+      emailReplyTo: settings.emailReplyTo,
+      // emailReplyToName: settings.emailReplyToName,
+      emailDocumentSettings: settings.emailDocumentSettings,
+    },
+    resolver: zodResolver(ZEmailPreferencesFormSchema),
+  });
+
+  const { data: emailData, isLoading: isLoadingEmails } =
+    trpc.enterprise.organisation.email.find.useQuery({
+      organisationId: organisation.id,
+      perPage: 100,
+    });
+
+  const emails = emailData?.data || [];
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset
+          className="flex h-full max-w-2xl flex-col gap-y-6"
+          disabled={form.formState.isSubmitting}
+        >
+          {organisation.organisationClaim.flags.emailDomains && (
+            <FormField
+              control={form.control}
+              name="emailId"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>
+                    <Trans>Default Email</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Select
+                      {...field}
+                      value={field.value === null ? '-1' : field.value}
+                      onValueChange={(value) => field.onChange(value === '-1' ? null : value)}
+                    >
+                      <SelectTrigger loading={isLoadingEmails}>
+                        <SelectValue />
+                      </SelectTrigger>
+
+                      <SelectContent>
+                        {emails.map((email) => (
+                          <SelectItem key={email.id} value={email.id}>
+                            {email.email}
+                          </SelectItem>
+                        ))}
+
+                        <SelectItem value={'-1'}>
+                          {canInherit ? <Trans>Inherit from organisation</Trans> : FROM_ADDRESS}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>The default email to use when sending emails to recipients</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          )}
+
+          <FormField
+            control={form.control}
+            name="emailReplyTo"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Reply to email</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    value={field.value ?? ''}
+                    onChange={(value) => field.onChange(value.target.value || null)}
+                    placeholder="noreply@example.com"
+                    type="email"
+                  />
+                </FormControl>
+                <FormMessage />
+                <FormDescription>
+                  <Trans>
+                    The email address which will show up in the "Reply To" field in emails
+                  </Trans>
+
+                  {canInherit && (
+                    <span>
+                      {'. '}
+                      <Trans>Leave blank to inherit from the organisation.</Trans>
+                    </span>
+                  )}
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          {/* <FormField
+            control={form.control}
+            name="emailReplyToName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Reply to name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input {...field} value={field.value ?? ''} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+
+          <FormField
+            control={form.control}
+            name="emailDocumentSettings"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Email Settings</Trans>
+                </FormLabel>
+                {canInherit && (
+                  <Select
+                    value={field.value === null ? 'INHERIT' : 'CONTROLLED'}
+                    onValueChange={(value) =>
+                      field.onChange(
+                        value === 'CONTROLLED' ? DEFAULT_DOCUMENT_EMAIL_SETTINGS : null,
+                      )
+                    }
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value={'INHERIT'}>
+                        <Trans>Inherit from organisation</Trans>
+                      </SelectItem>
+
+                      <SelectItem value={'CONTROLLED'}>
+                        <Trans>Override organisation settings</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+
+                {field.value && (
+                  <div className="space-y-2 rounded-md border p-4">
+                    <DocumentEmailCheckboxes
+                      value={field.value ?? DEFAULT_DOCUMENT_EMAIL_SETTINGS}
+                      onChange={(value) => field.onChange(value)}
+                    />
+                  </div>
+                )}
+
+                <FormDescription>
+                  <Trans>
+                    Controls the default email settings when new documents or templates are created
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Update</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};