feat: add template enhancements (#1154)

## Description

General enhancements for templates.

## Changes Made

Added the following changes to the template flow:
- Allow adding document meta settings
- Allow adding email settings
- Allow adding document access & action authentication
- Allow adding recipient action authentication
- Save the state between template steps similar to how it works for
documents

Other changes:
- Extract common fields between document and template flows
- Remove the title field from "Use template" since we now have it as
part of the template flow
- Add new API endpoint for generating templates

## Testing Performed

Added E2E tests for templates and creating documents from templates

packages/ui/components/document/document-global-auth-access-select.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+
+import type { SelectProps } from '@radix-ui/react-select';
+import { InfoIcon } from 'lucide-react';
+
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export const DocumentGlobalAuthAccessSelect = forwardRef<HTMLButtonElement, SelectProps>(
+  (props, ref) => (
+    <Select {...props}>
+      <SelectTrigger ref={ref} className="bg-background text-muted-foreground">
+        <SelectValue data-testid="documentAccessSelectValue" placeholder="None" />
+      </SelectTrigger>
+
+      <SelectContent position="popper">
+        {Object.values(DocumentAccessAuth).map((authType) => (
+          <SelectItem key={authType} value={authType}>
+            {DOCUMENT_AUTH_TYPES[authType].value}
+          </SelectItem>
+        ))}
+
+        {/* Note: -1 is remapped in the Zod schema to the required value. */}
+        <SelectItem value={'-1'}>None</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+);
+
+DocumentGlobalAuthAccessSelect.displayName = 'DocumentGlobalAuthAccessSelect';
+
+export const DocumentGlobalAuthAccessTooltip = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <InfoIcon className="mx-2 h-4 w-4" />
+    </TooltipTrigger>
+
+    <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+      <h2>
+        <strong>Document access</strong>
+      </h2>
+
+      <p>The authentication required for recipients to view the document.</p>
+
+      <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+        <li>
+          <strong>Require account</strong> - The recipient must be signed in to view the document
+        </li>
+        <li>
+          <strong>None</strong> - The document can be accessed directly by the URL sent to the
+          recipient
+        </li>
+      </ul>
+    </TooltipContent>
+  </Tooltip>
+);

packages/ui/components/document/document-global-auth-action-select.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+
+import type { SelectProps } from '@radix-ui/react-select';
+import { InfoIcon } from 'lucide-react';
+
+import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
+import { DocumentActionAuth, DocumentAuth } from '@documenso/lib/types/document-auth';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export const DocumentGlobalAuthActionSelect = forwardRef<HTMLButtonElement, SelectProps>(
+  (props, ref) => (
+    <Select {...props}>
+      <SelectTrigger className="bg-background text-muted-foreground">
+        <SelectValue ref={ref} data-testid="documentActionSelectValue" placeholder="None" />
+      </SelectTrigger>
+
+      <SelectContent position="popper">
+        {Object.values(DocumentActionAuth)
+          .filter((auth) => auth !== DocumentAuth.ACCOUNT)
+          .map((authType) => (
+            <SelectItem key={authType} value={authType}>
+              {DOCUMENT_AUTH_TYPES[authType].value}
+            </SelectItem>
+          ))}
+
+        {/* Note: -1 is remapped in the Zod schema to the required value. */}
+        <SelectItem value={'-1'}>None</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+);
+
+DocumentGlobalAuthActionSelect.displayName = 'DocumentGlobalAuthActionSelect';
+
+export const DocumentGlobalAuthActionTooltip = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <InfoIcon className="mx-2 h-4 w-4" />
+    </TooltipTrigger>
+
+    <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+      <h2>
+        <strong>Global recipient action authentication</strong>
+      </h2>
+
+      <p>The authentication required for recipients to sign the signature field.</p>
+
+      <p>
+        This can be overriden by setting the authentication requirements directly on each recipient
+        in the next step.
+      </p>
+
+      <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+        {/* <li>
+          <strong>Require account</strong> - The recipient must be signed in
+        </li> */}
+        <li>
+          <strong>Require passkey</strong> - The recipient must have an account and passkey
+          configured via their settings
+        </li>
+        <li>
+          <strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled via
+          their settings
+        </li>
+        <li>
+          <strong>None</strong> - No authentication required
+        </li>
+      </ul>
+    </TooltipContent>
+  </Tooltip>
+);

packages/ui/components/document/document-send-email-message-helper.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import React from 'react';
+
+export const DocumentSendEmailMessageHelper = () => {
+  return (
+    <div>
+      <p className="text-muted-foreground text-sm">
+        You can use the following variables in your message:
+      </p>
+
+      <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
+        <li className="text-muted-foreground">
+          <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+            {'{signer.name}'}
+          </code>{' '}
+          - The signer's name
+        </li>
+        <li className="text-muted-foreground">
+          <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+            {'{signer.email}'}
+          </code>{' '}
+          - The signer's email
+        </li>
+        <li className="text-muted-foreground">
+          <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+            {'{document.name}'}
+          </code>{' '}
+          - The document's name
+        </li>
+      </ul>
+    </div>
+  );
+};