Merge branch 'main' into experiment/self-sign

apps/marketing/content/changelog.mdx

@@ -8,6 +8,59 @@ Check out what's new in the latest version and read our thoughts on it. For more
 
 ---
 
+# Documenso v1.8.0: Team Preferences, Signature Rejection, and Document Distribution
+
+We're excited to announce the release of Documenso v1.8.0! This update brings powerful new features to enhance your document signing process. Here's what's new:
+
+## 🌟 Key New Features
+
+### 1. Team Preferences
+
+Introducing **Team Preferences**, allowing administrators to configure settings and preferences that apply to documents across the entire team. This feature ensures consistency and simplifies management by letting you set default options, permissions, and preferences that automatically apply to all team members.
+
+![Team Preferences](/changelog/v1_8_0/team-global-settings.jpeg)
+
+### 2. Signature Rejection
+
+Recipients now have the option to **reject signatures**. This feature enhances communication by allowing recipients to decline signing, providing feedback or requesting changes before the document is finalized.
+
+<video
+  src="/changelog/v1_8_0/reject-document.mp4"
+  className="aspect-video w-full"
+  autoPlay
+  loop
+  controls
+/>
+
+### 3. Document Distribution Settings
+
+With the new **Document Distribution Settings**, you have greater control over how your documents are shared. Distribute communications via our automated emails and templates or take full control using our API and your own notifications infrastructure.
+
+## 🔧 Other Improvements
+
+- **Support for Gmail SMTP Service**: Adds support for using Gmail as your SMTP service provider.
+- **Certificate and Email Translations**: Added support for multiple languages in document certificates and emails, enhancing the experience for international users.
+- **Field Movement Fixes**: Resolved issues related to moving fields within documents, improving the document preparation experience.
+- **Docker Environment Update**: Improved Docker setup for smoother deployments and better environment consistency.
+- **Billing Access Improvements**: Users now have uninterrupted access to billing information, simplifying account management.
+- **Support Time Windows for 2FA Tokens**: Enhanced two-factor authentication by supporting time windows in 2FA tokens, improving flexibility.
+
+## 💡 Recent Features
+
+Don't forget to take advantage of these powerful features from our recent releases:
+
+- **Signing Order**: Define the sequence in which recipients sign your documents for a structured signing process.
+- **Document Visibility Controls**: Manage who can view your documents and at what stages, offering greater privacy and control.
+- **Embedded Signing Experience**: Integrate the signing process directly into your own applications for a seamless user experience.
+
+**👏 Thank You**
+
+As always, we're grateful for the community's contributions and feedback. Your support helps us improve Documenso and deliver a top-notch open-source document signing solution.
+
+We hope you enjoy the new features in Documenso v1.8.0. Happy signing!
+
+---
+
 # Documenso v1.7.1: Signing order and document visibility
 
 We're excited to introduce Documenso v1.7.1, bringing you improved control over your document signing process. Here are the key updates:

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.8.0-rc.3",
+  "version": "1.8.1-rc.0",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.8.0-rc.3",
+  "version": "1.8.1-rc.0",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/src/app/(signing)/sign/[token]/auto-sign.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Plural, Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { useForm } from 'react-hook-form';
+import { P, match } from 'ts-pattern';
+
+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import { DocumentAuth } from '@documenso/lib/types/document-auth';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { Form } from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningDisclosure } from '~/components/general/signing-disclosure';
+
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { useRequiredSigningContext } from './provider';
+
+const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
+  FieldType.NAME,
+  FieldType.INITIALS,
+  FieldType.EMAIL,
+  FieldType.DATE,
+];
+
+// The action auth types that are not allowed to be auto signed
+//
+// Reasoning: If the action auth is a passkey or 2FA, it's likely that the owner of the document
+// intends on having the user manually sign due to the additional security measures employed for
+// other field types.
+const NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES: string[] = [
+  DocumentAuth.PASSKEY,
+  DocumentAuth.TWO_FACTOR_AUTH,
+];
+
+// The threshold for the number of fields that could be autosigned before displaying the dialog
+//
+// Reasoning: If there aren't that many fields, it's likely going to be easier to manually sign each one
+// while for larger documents with many fields it will be beneficial to sign away the boilerplate fields.
+const AUTO_SIGN_THRESHOLD = 5;
+
+export type AutoSignProps = {
+  recipient: Pick<Recipient, 'id' | 'token'>;
+  fields: Field[];
+};
+
+export const AutoSign = ({ recipient, fields }: AutoSignProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const router = useRouter();
+
+  const { email, fullName } = useRequiredSigningContext();
+  const { derivedRecipientActionAuth } = useRequiredDocumentAuthContext();
+
+  const [open, setOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const form = useForm();
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+
+  const autoSignableFields = fields.filter((field) => {
+    if (field.inserted) {
+      return false;
+    }
+
+    if (!AUTO_SIGNABLE_FIELD_TYPES.includes(field.type)) {
+      return false;
+    }
+
+    if (field.type === FieldType.NAME && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.INITIALS && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.EMAIL && !email) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const actionAuthAllowsAutoSign = !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(
+    derivedRecipientActionAuth ?? '',
+  );
+
+  const onSubmit = async () => {
+    const results = await Promise.allSettled(
+      autoSignableFields.map(async (field) => {
+        const value = match(field.type)
+          .with(FieldType.NAME, () => fullName)
+          .with(FieldType.INITIALS, () => extractInitials(fullName))
+          .with(FieldType.EMAIL, () => email)
+          .with(FieldType.DATE, () => new Date().toISOString())
+          .otherwise(() => '');
+
+        const authOptions = match(derivedRecipientActionAuth)
+          .with(DocumentAuth.ACCOUNT, () => ({
+            type: DocumentAuth.ACCOUNT,
+          }))
+          .with(DocumentAuth.EXPLICIT_NONE, () => ({
+            type: DocumentAuth.EXPLICIT_NONE,
+          }))
+          .with(null, () => undefined)
+          .with(
+            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH),
+            // This is a bit dirty, but the sentinel value used here is incredibly short-lived.
+            () => 'NOT_SUPPORTED' as const,
+          )
+          .exhaustive();
+
+        if (authOptions === 'NOT_SUPPORTED') {
+          throw new Error('Action auth is not supported for auto signing');
+        }
+
+        if (!value) {
+          throw new Error('No value to sign');
+        }
+
+        return await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value,
+          isBase64: false,
+          authOptions,
+        });
+      }),
+    );
+
+    if (results.some((result) => result.status === 'rejected')) {
+      toast({
+        title: _(msg`Error`),
+        description: _(
+          msg`An error occurred while auto-signing the document, some fields may not be signed. Please review and manually sign any remaining fields.`,
+        ),
+        duration: 5000,
+        variant: 'destructive',
+      });
+    }
+
+    startTransition(() => {
+      router.refresh();
+
+      setOpen(false);
+    });
+  };
+
+  unsafe_useEffectOnce(() => {
+    if (actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD) {
+      setOpen(true);
+    }
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Automatically sign fields</DialogTitle>
+        </DialogHeader>
+
+        <div className="text-muted-foreground max-w-[50ch]">
+          <p>
+            <Trans>
+              When you sign a document, we can automatically fill in and sign the following fields
+              using information that has already been provided. You can also manually sign or remove
+              any automatically signed fields afterwards if you desire.
+            </Trans>
+          </p>
+
+          <ul className="mt-4 flex list-inside list-disc flex-col gap-y-0.5">
+            {AUTO_SIGNABLE_FIELD_TYPES.map((fieldType) => (
+              <li key={fieldType}>
+                <Trans>{_(FRIENDLY_FIELD_TYPE[fieldType as FieldType])}</Trans>
+                <span className="pl-2 text-sm">
+                  (
+                  <Plural
+                    value={autoSignableFields.filter((f) => f.type === fieldType).length}
+                    one="1 matching field"
+                    other="# matching fields"
+                  />
+                  )
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <SigningDisclosure className="mt-4" />
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogFooter className="flex w-full flex-1 flex-nowrap gap-2">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                className="min-w-[6rem]"
+                loading={form.formState.isSubmitting || isPending}
+                disabled={!autoSignableFields.length}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -144,13 +144,13 @@ export const DateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Date</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {localDateString}
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx

@@ -178,7 +178,7 @@ export const DropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200 ">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
@@ -190,7 +190,7 @@ export const DropdownField = ({
                 )}
               >
                 <SelectValue
-                  className="text-[clamp(0.625rem,1cqw,0.825rem)]"
+                  className="text-[clamp(0.425rem,25cqw,0.825rem)]"
                   placeholder={`${_(msg`Select`)}`}
                 />
               </SelectTrigger>
@@ -206,7 +206,7 @@ export const DropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -122,13 +122,13 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Email</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/initials-field.tsx

@@ -128,13 +128,13 @@ export const InitialsField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
           <Trans>Initials</Trans>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -172,7 +172,7 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/number-field.tsx

@@ -252,14 +252,15 @@ export const NumberField = ({ field, recipient, onSignField, onUnsignField }: Nu
             },
           )}
         >
-          <span className="flex items-center justify-center gap-x-1 text-sm">
-            <Hash className="h-4 w-4" /> {fieldDisplayName}
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
           </span>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText}
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -191,7 +191,7 @@ export const SignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-xl duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
           <Trans>Signature</Trans>
         </p>
       )}

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -22,6 +22,7 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 
+import { AutoSign } from './auto-sign';
 import { CheckboxField } from './checkbox-field';
 import { DateField } from './date-field';
 import { DropdownField } from './dropdown-field';
@@ -113,6 +114,8 @@ export const SigningPageView = ({
 
       <DocumentReadOnlyFields fields={completedFields} />
 
+      <AutoSign recipient={recipient} fields={fields} />
+
       <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
         {fields.map((field) =>
           match(field.type)

apps/web/src/app/(signing)/sign/[token]/text-field.tsx

@@ -252,14 +252,16 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
           )}
         >
           <span className="flex items-center justify-center gap-x-1">
-            <Type />
-            {fieldDisplayName || <Trans>Text</Trans>}
+            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
+              {fieldDisplayName || <Trans>Text</Trans>}
+            </span>
           </span>
         </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
+        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           {field.customText.length < 20
             ? field.customText
             : field.customText.substring(0, 15) + '...'}

apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx

@@ -25,8 +25,6 @@ export const StackAvatar = ({ first, zIndex, fallbackText = '', type }: StackAva
     zIndexClass = ZIndexes[zIndex] ?? '';
   }
 
-  console.log({ type, fallbackText });
-
   switch (type) {
     case RecipientStatusType.UNSIGNED:
       classes = 'bg-dawn-200 text-dawn-900';