chore(sync): merge upstream documenso/main (c81bc72c4..8a41a3bf6, incl. v2.19.0)

.env.example

@@ -136,6 +136,11 @@ NEXT_PRIVATE_SMTP_FROM_NAME="Crove Sign"
 NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@sign.crove.com"
 # OPTIONAL: Support contact shown in transactional emails (password reset "contact us").
 NEXT_PUBLIC_SUPPORT_EMAIL="help@dos.ai"
+# OPTIONAL: Legal links shown on signup and recipient signing pages (self-host default hides them when unset).
+NEXT_PUBLIC_TERMS_OF_SERVICE_URL="https://sign.crove.com/terms"
+NEXT_PUBLIC_PRIVACY_POLICY_URL="https://sign.crove.com/privacy"
+# OPTIONAL: Imprint link (shown alongside the legal links when set).
+NEXT_PUBLIC_IMPRINT_URL=
 # OPTIONAL: Defines the service for nodemailer
 NEXT_PRIVATE_SMTP_SERVICE=
 # OPTIONAL: The API key to use for Resend.com

apps/docs/content/docs/developers/embedding/css-variables.mdx

@@ -120,20 +120,25 @@ Specific parts of the embed can be targeted with CSS classes for granular stylin
 
 ### Component Classes
 
-| Class                             | Description                                   |
-| --------------------------------- | --------------------------------------------- |
-| `.embed--Root`                    | Main container for the embedded experience    |
-| `.embed--DocumentContainer`       | Container for the document and signing widget |
-| `.embed--DocumentViewer`          | Container for the document viewer             |
-| `.embed--DocumentWidget`          | The signing widget container                  |
-| `.embed--DocumentWidgetContainer` | Outer container for the signing widget        |
-| `.embed--DocumentWidgetHeader`    | Header section of the signing widget          |
-| `.embed--DocumentWidgetContent`   | Main content area of the signing widget       |
-| `.embed--DocumentWidgetForm`      | Form section within the signing widget        |
-| `.embed--DocumentWidgetFooter`    | Footer section of the signing widget          |
-| `.embed--WaitingForTurn`          | Waiting screen when it is not the user's turn |
-| `.embed--DocumentCompleted`       | Completion screen after signing               |
-| `.field--FieldRootContainer`      | Base container for document fields            |
+| Class                                    | Description                                   |
+| ---------------------------------------- | --------------------------------------------- |
+| `.embed--Root`                           | Main container for the embedded experience    |
+| `.embed--DocumentContainer`              | Container for the document and signing widget |
+| `.embed--DocumentViewer`                 | Container for the document viewer             |
+| `.embed--DocumentWidget`                 | The signing widget container                  |
+| `.embed--DocumentWidgetContainer`        | Outer container for the signing widget        |
+| `.embed--DocumentWidgetHeader`           | Header section of the signing widget          |
+| `.embed--DocumentWidgetContent`          | Main content area of the signing widget       |
+| `.embed--DocumentWidgetForm`             | Form section within the signing widget        |
+| `.embed--DocumentWidgetFooter`           | Footer section of the signing widget          |
+| `.embed--WaitingForTurn`                 | Waiting screen when it is not the user's turn |
+| `.embed--DocumentCompleted`              | Completion screen after signing               |
+| `.embed--DocumentCompletedCard`          | Signature card on the completion screen       |
+| `.embed--DocumentCompletedTitle`         | Title on the completion screen                |
+| `.embed--DocumentCompletedStatus`        | Status line on the completion screen          |
+| `.embed--DocumentCompletedDescription`   | Description text on the completion screen     |
+| `.embed--DocumentRejected`               | Rejection screen after rejecting the document |
+| `.field--FieldRootContainer`             | Base container for document fields            |
 
 ### Field Data Attributes
 
@@ -144,6 +149,7 @@ Fields expose data attributes for state-based styling:
 | `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
 | `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
 | `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+| `[data-readonly]`   | `true`, `false`                                | Whether the field is read-only       |
 
 ### Example
 
@@ -155,7 +161,7 @@ Fields expose data attributes for state-based styling:
 
 /* Style filled fields */
 .field--FieldRootContainer[data-inserted='true'] {
-  background-color: var(--primary);
+  background-color: hsl(var(--primary));
   opacity: 0.2;
 }
 

apps/docs/content/docs/self-hosting/configuration/database.mdx

@@ -191,9 +191,6 @@ For manual deployments or troubleshooting:
 ```bash
 # Apply pending migrations
 npm run prisma:migrate-deploy
-
-# Or using npx directly
-npx prisma migrate deploy
 ```
 
 <Callout type="info">

apps/docs/content/docs/self-hosting/maintenance/upgrades.mdx

@@ -426,8 +426,9 @@ docker pull documenso/documenso:<version>
 # Run migrations only
 docker run --rm \
   -e NEXT_PRIVATE_DATABASE_URL="postgresql://user:password@host:5432/documenso" \
+  -e NEXT_PRIVATE_DIRECT_DATABASE_URL="postgresql://user:password@host:5432/documenso" \
   documenso/documenso:<version> \
-  npx prisma migrate deploy
+  npx prisma migrate deploy --schema ../../packages/prisma/schema.prisma
 ```
 
 <Callout type="warn">

apps/remix/app/components/dialogs/envelope-item-edit-dialog.tsx

@@ -122,7 +122,7 @@ export const EnvelopeItemEditDialog = ({
 
       toast({
         title: t`Failed to read file`,
-        description: t`The file is not a valid PDF.`,
+        description: t`The file is not a valid PDF or is password protected.`,
         variant: 'destructive',
       });
     }

apps/remix/app/components/embed/embed-document-completed.tsx

@@ -2,6 +2,7 @@ import signingCelebration from '@documenso/assets/images/signing-celebration.png
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { Trans } from '@lingui/react/macro';
 import type { Signature } from '@prisma/client';
+import { CheckCircle2Icon } from 'lucide-react';
 
 export type EmbedDocumentCompletedPageProps = {
   name?: string;
@@ -10,12 +11,8 @@ export type EmbedDocumentCompletedPageProps = {
 
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
   return (
-    <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
-      <h3 className="font-semibold text-2xl text-foreground">
-        <Trans>Document Completed!</Trans>
-      </h3>
-
-      <div className="mt-8 w-full max-w-md">
+    <div className="embed--DocumentCompleted relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center overflow-hidden p-6">
+      <div className="embed--DocumentCompletedCard w-full max-w-sm md:max-w-md">
         <SigningCard3D
           className="mx-auto w-full"
           name={name || 'Crove Sign'}
@@ -24,10 +21,19 @@ export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentComplet
         />
       </div>
 
-      <p className="mt-8 max-w-[50ch] text-center text-muted-foreground text-sm">
-        <Trans>
-          The document is now completed, please follow any instructions provided within the parent application.
-        </Trans>
+      <h2 className="embed--DocumentCompletedTitle mt-8 max-w-[35ch] text-center font-semibold text-2xl text-foreground leading-normal md:text-3xl">
+        <Trans>Document Completed</Trans>
+      </h2>
+
+      <div className="embed--DocumentCompletedStatus mt-4 flex items-center text-center text-documenso-700">
+        <CheckCircle2Icon className="mr-2 h-5 w-5" />
+        <span className="text-sm">
+          <Trans>No further action is required</Trans>
+        </span>
+      </div>
+
+      <p className="embed--DocumentCompletedDescription mt-2.5 max-w-[50ch] text-center font-medium text-muted-foreground/60 text-sm md:text-base">
+        <Trans>Please follow any instructions provided within the parent application.</Trans>
       </p>
     </div>
   );

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -55,6 +55,7 @@ export type EmbedSignDocumentV1ClientPageProps = {
   completedFields: DocumentField[];
   metadata?: DocumentMeta | null;
   isCompleted?: boolean;
+  isRejected?: boolean;
   hidePoweredBy?: boolean;
   allowWhitelabelling?: boolean;
   allRecipients?: RecipientWithFields[];
@@ -70,6 +71,7 @@ export const EmbedSignDocumentV1ClientPage = ({
   completedFields,
   metadata,
   isCompleted,
+  isRejected,
   hidePoweredBy = false,
   allowWhitelabelling = false,
   allRecipients = [],
@@ -83,7 +85,9 @@ export const EmbedSignDocumentV1ClientPage = ({
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
   const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
-  const [hasRejectedDocument, setHasRejectedDocument] = useState(recipient.signingStatus === SigningStatus.REJECTED);
+  const [hasRejectedDocument, setHasRejectedDocument] = useState(
+    isRejected ?? recipient.signingStatus === SigningStatus.REJECTED,
+  );
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(
     allRecipients.length > 0 ? allRecipients[0].id : null,
   );
@@ -263,6 +267,44 @@ export const EmbedSignDocumentV1ClientPage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!window.parent) {
+      return;
+    }
+
+    if (hasRejectedDocument) {
+      window.parent.postMessage(
+        {
+          action: 'document-rejected',
+          data: {
+            token,
+            documentId,
+            recipientId: recipient.id,
+          },
+        },
+        '*',
+      );
+
+      return;
+    }
+
+    if (hasCompletedDocument) {
+      window.parent.postMessage(
+        {
+          action: 'document-completed',
+          data: {
+            token,
+            documentId,
+            recipientId: recipient.id,
+          },
+        },
+        '*',
+      );
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (hasFinishedInit && hasDocumentLoaded && window.parent) {
       window.parent.postMessage(

apps/remix/app/components/embed/embed-document-signing-page-v2.tsx

@@ -40,12 +40,18 @@ export const EmbedSignDocumentV2ClientPage = ({
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [isEmailLocked, setIsEmailLocked] = useState(envelope.type === EnvelopeType.DOCUMENT && !!email);
 
+  // The signing provider's envelope data isn't refreshed on revalidation.
+  const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
+  const [hasRejectedDocument, setHasRejectedDocument] = useState(isRejected);
+
   const onDocumentCompleted = (data: {
     token: string;
     documentId: number;
     envelopeId: string;
     recipientId: number;
   }) => {
+    setHasCompletedDocument(true);
+
     if (window.parent) {
       window.parent.postMessage(
         {
@@ -112,6 +118,8 @@ export const EmbedSignDocumentV2ClientPage = ({
     recipientId: number;
     reason?: string;
   }) => {
+    setHasRejectedDocument(true);
+
     if (window.parent) {
       window.parent.postMessage(
         {
@@ -219,23 +227,26 @@ export const EmbedSignDocumentV2ClientPage = ({
     }
   }, [isRejected, envelope.id, recipient.id, recipient.token]);
 
-  if (isRejected) {
+  if (hasRejectedDocument) {
     return <EmbedDocumentRejected />;
   }
 
-  if (isCompleted) {
+  if (hasCompletedDocument) {
+    const completedSignature =
+      recipient.fields.find((field) => field.signature)?.signature ?? recipientSignature ?? null;
+
     return (
       <EmbedDocumentCompleted
         name={fullName}
         signature={
-          recipientSignature
+          completedSignature
             ? {
                 id: 1,
                 fieldId: 1,
                 recipientId: recipient.id,
                 created: new Date(),
-                signatureImageAsBase64: recipientSignature.signatureImageAsBase64,
-                typedSignature: recipientSignature.typedSignature,
+                signatureImageAsBase64: completedSignature.signatureImageAsBase64,
+                typedSignature: completedSignature.typedSignature,
               }
             : undefined
         }

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

@@ -12,11 +12,20 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 import { ColorPicker } from '@documenso/ui/primitives/color-picker';
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from '@documenso/ui/primitives/form/form';
+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 { Textarea } from '@documenso/ui/primitives/textarea';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
@@ -37,14 +46,17 @@ const ZBrandingPreferencesFormSchema = z.object({
     .instanceof(File)
     .refine(
       (file) => file.size <= BRANDING_LOGO_MAX_SIZE_BYTES,
-      `File size must be less than ${BRANDING_LOGO_MAX_SIZE_MB}MB`,
+      msg`File size must be less than ${BRANDING_LOGO_MAX_SIZE_MB}MB`,
+    )
+    .refine(
+      (file) => BRANDING_LOGO_ALLOWED_TYPES.includes(file.type),
+      msg`Only .jpg, .png, and .webp files are accepted`,
     )
-    .refine((file) => BRANDING_LOGO_ALLOWED_TYPES.includes(file.type), 'Only .jpg, .png, and .webp files are accepted')
     .nullish(),
-  brandingUrl: z.string().url().optional().or(z.literal('')),
-  brandingCompanyDetails: z.string().max(500).optional(),
+  brandingUrl: z.string().url(msg`Please enter a valid URL`).optional().or(z.literal('')),
+  brandingCompanyDetails: z.string().max(500, msg`Brand details must be less than 500 characters`).optional(),
   brandingColors: ZCssVarsSchema.default({}),
-  brandingCss: z.string().max(10_000).default(''),
+  brandingCss: z.string().max(10_000, msg`Custom CSS must be less than 10,000 characters`).default(''),
 });
 
 export type TBrandingPreferencesFormSchema = z.infer<typeof ZBrandingPreferencesFormSchema>;
@@ -349,6 +361,8 @@ export function BrandingPreferencesForm({
                         </span>
                       )}
                     </FormDescription>
+
+                    <FormMessage />
                   </div>
                 </InheritableField>
               )}
@@ -379,6 +393,8 @@ export function BrandingPreferencesForm({
                       </span>
                     )}
                   </FormDescription>
+
+                  <FormMessage />
                 </InheritableField>
               )}
             />
@@ -413,6 +429,8 @@ export function BrandingPreferencesForm({
                       </span>
                     )}
                   </FormDescription>
+
+                  <FormMessage />
                 </InheritableField>
               )}
             />
@@ -597,6 +615,8 @@ export function BrandingPreferencesForm({
                         <FormDescription>
                           <Trans>Border radius size in REM units (e.g. 0.5rem).</Trans>
                         </FormDescription>
+
+                        <FormMessage />
                       </FormItem>
                     )}
                   />
@@ -634,6 +654,8 @@ export function BrandingPreferencesForm({
                               shown after you save.
                             </Trans>
                           </FormDescription>
+
+                          <FormMessage />
                         </FormItem>
                       )}
                     />