v1.9.1-rc.8

This change allows API users to pre-fill fields with values by
passing the data in the request body. Example body for V2 API endpoint
`/api/v2-beta/template/use`:

```json
{
    "templateId": 1,
    "recipients": [
        {
            "id": 1,
            "email": "signer1@mail.com",
            "name": "Signer 1"
        },
        {
            "id": 2,
            "email": "signer2@mail.com",
            "name": "Signer 2"
        }
    ],
    "prefillValues": [
        {
            "id": 14,
            "fieldMeta": {
                "type": "text",
                "label": "my label",
                "placeholder": "text placeholder test",
                "text": "auto-sign value",
                "characterLimit": 25,
                "textAlign": "right",
                "fontSize": 94,
                "required": true
            }
        },
        {
            "id": 15,
            "fieldMeta": {
                "type": "radio",
                "label": "radio label",
                "placeholder": "new radio placeholder",
                "required": false,
                "readOnly": true,
                "values": [
                    {
                        "id": 2,
                        "checked": true,
                        "value": "radio val 1"
                    },
                    {
                        "id": 3,
                        "checked": false,
                        "value": "radio val 2"
                    }
                ]
            }
        },
        {
            "id": 16,
            "fieldMeta": {
                "type": "dropdown",
                "label": "dropdown label",
                "placeholder": "DD placeholder",
                "required": false,
                "readOnly": false,
                "values": [
                    {
                        "value": "option 1"
                    },
                    {
                        "value": "option 2"
                    },
                    {
                        "value": "option 3"
                    }
                ],
                "defaultValue": "option 2"
            }
        }
    ],
    "distributeDocument": false,
    "customDocumentDataId": ""
}
```

README.md

@@ -1,4 +1,4 @@
-> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="documen.so/sign-everywhere">The Platform Plan</a>!
+> 🚨 We are live on Product Hunt 🎉  Check out our latest launch: <a href="https://documen.so/sign-everywhere">The Platform Plan</a>!
 
 <a href="https://www.producthunt.com/posts/documenso-platform-plan?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-documenso&#0045;platform&#0045;plan" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=670576&theme=light" alt="Documenso&#0032;Platform&#0032;Plan - Whitelabeled&#0032;signing&#0032;flows&#0032;in&#0032;your&#0032;product | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 

apps/documentation/pages/developers/_meta.json

@@ -14,4 +14,4 @@
   "public-api": "Public API",
   "embedding": "Embedding",
   "webhooks": "Webhooks"
-}
+}

apps/documentation/pages/developers/embedding/_meta.json

@@ -6,5 +6,6 @@
   "solid": "Solid Integration",
   "preact": "Preact Integration",
   "angular": "Angular Integration",
-  "css-variables": "CSS Variables"
+  "css-variables": "CSS Variables",
+  "web-components": "Web Components"
 }

apps/documentation/pages/developers/embedding/css-variables.mdx

@@ -111,6 +111,83 @@ The colors will be automatically converted to the appropriate format internally.
 
 4. **Consistent Radius**: Use a consistent border radius value that matches your application's design system.
 
+## CSS Class Targets
+
+In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:
+
+### Component Classes
+
+| Class Name                        | Description                                                             |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `.embed--Root`                    | Main container for the embedded signing 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, handles positioning             |
+| `.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`          | Container for the waiting screen when it's not the user's turn to sign  |
+| `.embed--DocumentCompleted`       | Container for the completion screen after signing                       |
+| `.field--FieldRootContainer`      | Base container for document fields (signatures, text, checkboxes, etc.) |
+
+Field components also expose several data attributes that can be used for styling different states:
+
+| Data Attribute      | Values                                         | Description                          |
+| ------------------- | ---------------------------------------------- | ------------------------------------ |
+| `[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 |
+
+### Field Styling Example
+
+```css
+/* Style all field containers */
+.field--FieldRootContainer {
+  transition: all 200ms ease;
+}
+
+/* Style specific field types */
+.field--FieldRootContainer[data-field-type='SIGNATURE'] {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* Style inserted fields */
+.field--FieldRootContainer[data-inserted='true'] {
+  background-color: var(--primary);
+  opacity: 0.2;
+}
+
+/* Style fields being validated */
+.field--FieldRootContainer[data-validate='true'] {
+  border-color: orange;
+}
+```
+
+### Example Usage
+
+```css
+/* Custom styles for the document widget */
+.embed--DocumentWidget {
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+
+/* Custom styles for the waiting screen */
+.embed--WaitingForTurn {
+  background-color: #f9fafb;
+  padding: 2rem;
+}
+
+/* Responsive adjustments for the document container */
+@media (min-width: 768px) {
+  .embed--DocumentContainer {
+    gap: 2rem;
+  }
+}
+```
+
 ## Related
 
 - [React Integration](/developers/embedding/react)

apps/documentation/pages/developers/embedding/index.mdx

@@ -73,14 +73,15 @@ These customization options are available for both Direct Templates and Signing
 
 We support embedding across a range of popular JavaScript frameworks, including:
 
-| Framework | Package                                                                            |
-| --------- | ---------------------------------------------------------------------------------- |
-| React     | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)     |
-| Preact    | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)   |
-| Vue       | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)         |
-| Svelte    | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)   |
-| Solid     | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)     |
-| Angular   | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular) |
+| Framework        | Package                                                                                      |
+| ---------        | ----------------------------------------------------------------------------------           |
+| React            | [@documenso/embed-react](https://www.npmjs.com/package/@documenso/embed-react)               |
+| Preact           | [@documenso/embed-preact](https://www.npmjs.com/package/@documenso/embed-preact)             |
+| Vue              | [@documenso/embed-vue](https://www.npmjs.com/package/@documenso/embed-vue)                   |
+| Svelte           | [@documenso/embed-svelte](https://www.npmjs.com/package/@documenso/embed-svelte)             |
+| Solid            | [@documenso/embed-solid](https://www.npmjs.com/package/@documenso/embed-solid)               |
+| Angular          | [@documenso/embed-angular](https://www.npmjs.com/package/@documenso/embed-angular)           |
+| Web Components   | [@documenso/embed-webcomponent](https://www.npmjs.com/package/@documenso/embed-webcomponent) |
 
 Additionally, we provide **web components** for more generalized use. However, please note that web components are still in their early stages and haven't been extensively tested.
 
@@ -166,6 +167,7 @@ Once you've obtained the appropriate tokens, you can integrate the signing exper
 - [Svelte](/developers/embedding/svelte)
 - [Solid](/developers/embedding/solid)
 - [Angular](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 
 If you're using **web components**, the integration process is slightly different. Keep in mind that web components are currently less tested but can still provide flexibility for general use cases.
 
@@ -177,4 +179,5 @@ If you're using **web components**, the integration process is slightly differen
 - [Solid Integration](/developers/embedding/solid)
 - [Preact Integration](/developers/embedding/preact)
 - [Angular Integration](/developers/embedding/angular)
+- [Web Components](/developers/embedding/web-components)
 - [CSS Variables](/developers/embedding/css-variables)

apps/documentation/pages/developers/embedding/web-components.mdx

@@ -0,0 +1,89 @@
+---
+title: Web Components Integration
+description: Learn how to use our embedding SDK via Web Components on a framework-less web application.
+---
+
+# Web Components Integration
+
+Our Web Components SDK provides a simple way to embed a signing experience within your framework-less web application. It supports both direct link templates and signing tokens.
+
+## Installation
+
+To install the SDK, run the following command:
+
+```bash
+npm install @documenso/embed-webcomponent
+```
+
+Then in your html file, add the following to add the script, replacing the path with the proper path to the web component script.
+
+```html
+<script src="YOUR_PATH_HERE"></script>
+```
+
+## Usage
+
+To embed a signing experience, you'll need to provide the token for the document you want to embed. This can be done in a few different ways, depending on your use case.
+
+### Direct Link Template
+
+If you have a direct link template, you can simply provide the token for the template to the `documenso-embed-direct-template` tag.
+
+```html
+<documenso-embed-direct-template
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-direct-template>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| email               | string (optional)   | The email the signer that will be used by default for signing                              |
+| lockEmail           | boolean (optional)  | Whether or not the email field should be locked disallowing modifications                  |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+| onFieldSigned       | function (optional) | A callback function that will be called when a field is signed                             |
+| onFieldUnsigned     | function (optional) | A callback function that will be called when a field is unsigned                           |
+
+### Signing Token
+
+If you have a signing token, you can provide it to the `documenso-embed-sign-document` tag.
+
+```html
+<documenso-embed-sign-document
+  token="YOUR_TOKEN_HERE"
+</documenso-embed-sign-document>
+```
+
+#### Attributes
+
+| Attribute                | Type                | Description                                                                                |
+| ------------------- | ------------------- | ------------------------------------------------------------------------------------------ |
+| token               | string              | The token for the document you want to embed                                               |
+| host                | string (optional)   | The host to be used for the signing experience, relevant for self-hosters                  |
+| name                | string (optional)   | The name the signer that will be used by default for signing                               |
+| lockName            | boolean (optional)  | Whether or not the name field should be locked disallowing modifications                   |
+| onDocumentReady     | function (optional) | A callback function that will be called when the document is loaded and ready to be signed |
+| onDocumentCompleted | function (optional) | A callback function that will be called when the document has been completed               |
+| onDocumentError     | function (optional) | A callback function that will be called when an error occurs with the document             |
+
+### Creating via JavaScript
+
+You can also create the tag element using javascript, for dynamic generation of either modes. For example, this would add the sign document embed to the DOM.
+
+```javascript
+document.getElementById('my-wrapper-here').innerHTML = '';
+
+const tag = document.createElement('documenso-embed-sign-document');
+tag.setAttribute('token', data.token);
+tag.style.width = '100%';
+tag.style.height = '100%';
+
+document.getElementById('my-wrapper-here').appendChild(tag);
+```

apps/documentation/pages/developers/public-api/index.mdx

@@ -21,14 +21,25 @@ Check out the [API V1 documentation](https://app.documenso.com/api/v1/openapi) f
 
 ## API V2 - Beta
 
-Our new API V2 is currently in Beta. The new API features typed SDKs for TypeScript, Python and Go and example code for many more.
+<Callout type="warning">API V2 is currently beta, and will be subject to breaking changes</Callout>
 
-<Callout type="warning">
-  NOW IN BETA: [API V2 Documentation](https://documen.so/api-v2-docs)
+Check out the [API V2 documentation](https://documen.so/api-v2-docs) for details about the API endpoints, request parameters, response formats, and authentication methods.
+
+Our new API V2 supports the following typed SDKs:
+
+- [TypeScript](https://github.com/documenso/sdk-typescript)
+- [Python](https://github.com/documenso/sdk-python)
+- [Go](https://github.com/documenso/sdk-go)
+
+<Callout type="info">
+  For the staging API, please use the following base URL:
+  `https://stg-app.documenso.dev/api/v2-beta/`
 </Callout>
 
 🚀 [V2 Announcement](https://documen.so/sdk-blog)
 
+📖 [Documentation](https://documen.so/api-v2-docs)
+
 💬 [Leave Feedback](https://documen.so/sdk-feedback)
 
 🔔 [Breaking Changes](https://documen.so/sdk-breaking)

apps/documentation/pages/users/signing-documents/index.mdx

@@ -85,12 +85,13 @@ You can also set the recipient's role, which determines their actions and permis
 
 Documenso has 4 roles for recipients with different permissions and actions.
 
-|   Role   |                                    Function                                     | Action required | Signature |
-| :------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
-|  Signer  |                Needs to sign signatures fields assigned to them.                |       Yes       |    Yes    |
-| Approver |          Needs to approve the document as a whole. Signature optional.          |       Yes       | Optional  |
-|  Viewer  |                   Needs to confirm they viewed the document.                    |       Yes       |    No     |
-|   BCC    | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
+|   Role    |                                    Function                                     | Action required | Signature |
+| :-------: | :-----------------------------------------------------------------------------: | :-------------: | :-------: |
+|  Signer   |                Needs to sign signatures fields assigned to them.                |       Yes       |    Yes    |
+| Approver  |          Needs to approve the document as a whole. Signature optional.          |       Yes       | Optional  |
+|  Viewer   |                   Needs to confirm they viewed the document.                    |       Yes       |    No     |
+| Assistant | Can help prepare the document by filling in fields on behalf of other signers.  |       Yes       |    No     |
+|    CC     | Receives a copy of the signed document after completion. No action is required. |       No        |    No     |
 
 ### Fields
 

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.9.0-rc.12",
+  "version": "1.9.1-rc.8",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -189,6 +189,7 @@ export const SignDirectTemplateForm = ({
                   field={field}
                   onSignField={onSignField}
                   onUnsignField={onUnsignField}
+                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
                 />
               ))
               .with(FieldType.INITIALS, () => (
@@ -342,6 +343,7 @@ export const SignDirectTemplateForm = ({
                     onChange={(value) => {
                       setSignature(value);
                     }}
+                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
                   />
                 </CardContent>
               </Card>

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

@@ -44,7 +44,12 @@ export const CheckboxField = ({ field, onSignField, onUnsignField }: CheckboxFie
   const [isPending, startTransition] = useTransition();
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
-  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(
+    field.fieldMeta ?? {
+      type: 'checkbox',
+      values: [{ id: 1, checked: false, value: '' }],
+    },
+  );
 
   const values = parsedFieldMeta.values?.map((item) => ({
     ...item,

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

@@ -311,7 +311,11 @@ export const SigningForm = ({
             <>
               <form onSubmit={handleSubmit(onFormSubmit)}>
                 <p className="text-muted-foreground mt-2 text-sm">
-                  <Trans>Please review the document before signing.</Trans>
+                  {recipient.role === RecipientRole.APPROVER && !hasSignatureField ? (
+                    <Trans>Please review the document before approving.</Trans>
+                  ) : (
+                    <Trans>Please review the document before signing.</Trans>
+                  )}
                 </p>
 
                 <hr className="border-border mb-8 mt-4" />
@@ -335,38 +339,40 @@ export const SigningForm = ({
                       />
                     </div>
 
-                    <div>
-                      <Label htmlFor="Signature">
-                        <Trans>Signature</Trans>
-                      </Label>
+                    {hasSignatureField && (
+                      <div>
+                        <Label htmlFor="Signature">
+                          <Trans>Signature</Trans>
+                        </Label>
 
-                      <Card className="mt-2" gradient degrees={-120}>
-                        <CardContent className="p-0">
-                          <SignaturePad
-                            className="h-44 w-full"
-                            disabled={isSubmitting}
-                            defaultValue={signature ?? undefined}
-                            onValidityChange={(isValid) => {
-                              setSignatureValid(isValid);
-                            }}
-                            onChange={(value) => {
-                              if (signatureValid) {
-                                setSignature(value);
-                              }
-                            }}
-                            allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
-                          />
-                        </CardContent>
-                      </Card>
+                        <Card className="mt-2" gradient degrees={-120}>
+                          <CardContent className="p-0">
+                            <SignaturePad
+                              className="h-44 w-full"
+                              disabled={isSubmitting}
+                              defaultValue={signature ?? undefined}
+                              onValidityChange={(isValid) => {
+                                setSignatureValid(isValid);
+                              }}
+                              onChange={(value) => {
+                                if (signatureValid) {
+                                  setSignature(value);
+                                }
+                              }}
+                              allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
+                            />
+                          </CardContent>
+                        </Card>
 
-                      {hasSignatureField && !signatureValid && (
-                        <div className="text-destructive mt-2 text-sm">
-                          <Trans>
-                            Signature is too small. Please provide a more complete signature.
-                          </Trans>
-                        </div>
-                      )}
-                    </div>
+                        {!signatureValid && (
+                          <div className="text-destructive mt-2 text-sm">
+                            <Trans>
+                              Signature is too small. Please provide a more complete signature.
+                            </Trans>
+                          </div>
+                        )}
+                      </div>
+                    )}
                   </div>
 
                   <div className="flex flex-col gap-4 md:flex-row">

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

@@ -179,14 +179,8 @@ export const NumberField = ({ field, onSignField, onUnsignField }: NumberFieldPr
 
   const onRemove = async () => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TRemovedSignedFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
       };
 

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

@@ -68,26 +68,16 @@ export const RadioField = ({ field, onSignField, onUnsignField }: RadioFieldProp
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (isAssistantMode && !targetSigner) {
-        return;
-      }
-
       if (!selectedOption) {
         return;
       }
 
-      const signingRecipient = isAssistantMode && targetSigner ? targetSigner : recipient;
-
       const payload: TSignFieldWithTokenMutationSchema = {
-        token: signingRecipient.token,
+        token: recipient.token,
         fieldId: field.id,
         value: selectedOption,
         isBase64: true,
         authOptions,
-        ...(isAssistantMode && {
-          isAssistantPrefill: true,
-          assistantId: recipient.id,
-        }),
       };
 
       if (onSignField) {

apps/web/src/app/(signing)/sign/[token]/reject-document-dialog.tsx

@@ -43,9 +43,10 @@ type TRejectDocumentFormSchema = z.infer<typeof ZRejectDocumentFormSchema>;
 export interface RejectDocumentDialogProps {
   document: Pick<Document, 'id'>;
   token: string;
+  onRejected?: (reason: string) => void | Promise<void>;
 }
 
-export function RejectDocumentDialog({ document, token }: RejectDocumentDialogProps) {
+export function RejectDocumentDialog({ document, token, onRejected }: RejectDocumentDialogProps) {
   const { toast } = useToast();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -79,7 +80,11 @@ export function RejectDocumentDialog({ document, token }: RejectDocumentDialogPr
 
       setIsOpen(false);
 
-      router.push(`/sign/${token}/rejected`);
+      if (onRejected) {
+        await onRejected(reason);
+      } else {
+        router.push(`/sign/${token}/rejected`);
+      }
     } catch (err) {
       toast({
         title: 'Error',

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

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/macro';
+import { match } from 'ts-pattern';
 
 import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
 import type { Field } from '@documenso/prisma/client';
@@ -58,62 +59,88 @@ export const SignDialog = ({
           loading={isSubmitting}
           disabled={disabled}
         >
-          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+          {match({ isComplete, role })
+            .with({ isComplete: false }, () => <Trans>Next field</Trans>)
+            .with({ isComplete: true, role: RecipientRole.APPROVER }, () => <Trans>Approve</Trans>)
+            .with({ isComplete: true, role: RecipientRole.VIEWER }, () => (
+              <Trans>Mark as viewed</Trans>
+            ))
+            .with({ isComplete: true }, () => <Trans>Complete</Trans>)
+            .exhaustive()}
         </Button>
       </DialogTrigger>
 
       <DialogContent>
         <DialogTitle>
           <div className="text-foreground text-xl font-semibold">
-            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
-            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
-            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+            {match(role)
+              .with(RecipientRole.VIEWER, () => <Trans>Complete Viewing</Trans>)
+              .with(RecipientRole.SIGNER, () => <Trans>Complete Signing</Trans>)
+              .with(RecipientRole.APPROVER, () => <Trans>Complete Approval</Trans>)
+              .with(RecipientRole.CC, () => <Trans>Complete Viewing</Trans>)
+              .with(RecipientRole.ASSISTANT, () => <Trans>Complete Assisting</Trans>)
+              .exhaustive()}
           </div>
         </DialogTitle>
 
         <div className="text-muted-foreground max-w-[50ch]">
-          {role === RecipientRole.VIEWER && (
-            <span>
-              <Trans>
-                <span className="inline-flex flex-wrap">
-                  You are about to complete viewing "
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
-                    {documentTitle}
+          {match(role)
+            .with(RecipientRole.VIEWER, () => (
+              <span>
+                <Trans>
+                  <span className="inline-flex flex-wrap">
+                    You are about to complete viewing "
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      {documentTitle}
+                    </span>
+                    ".
                   </span>
-                  ".
-                </span>
-                <br /> Are you sure?
-              </Trans>
-            </span>
-          )}
-          {role === RecipientRole.SIGNER && (
-            <span>
-              <Trans>
-                <span className="inline-flex flex-wrap">
-                  You are about to complete signing "
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
-                    {documentTitle}
+                  <br /> Are you sure?
+                </Trans>
+              </span>
+            ))
+            .with(RecipientRole.SIGNER, () => (
+              <span>
+                <Trans>
+                  <span className="inline-flex flex-wrap">
+                    You are about to complete signing "
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      {documentTitle}
+                    </span>
+                    ".
                   </span>
-                  ".
-                </span>
-                <br /> Are you sure?
-              </Trans>
-            </span>
-          )}
-          {role === RecipientRole.APPROVER && (
-            <span>
-              <Trans>
-                <span className="inline-flex flex-wrap">
-                  You are about to complete approving{' '}
-                  <span className="inline-block max-w-[11rem] truncate align-baseline">
-                    "{documentTitle}"
+                  <br /> Are you sure?
+                </Trans>
+              </span>
+            ))
+            .with(RecipientRole.APPROVER, () => (
+              <span>
+                <Trans>
+                  <span className="inline-flex flex-wrap">
+                    You are about to complete approving{' '}
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      "{documentTitle}"
+                    </span>
+                    .
                   </span>
-                  .
-                </span>
-                <br /> Are you sure?
-              </Trans>
-            </span>
-          )}
+                  <br /> Are you sure?
+                </Trans>
+              </span>
+            ))
+            .otherwise(() => (
+              <span>
+                <Trans>
+                  <span className="inline-flex flex-wrap">
+                    You are about to complete viewing "
+                    <span className="inline-block max-w-[11rem] truncate align-baseline">
+                      {documentTitle}
+                    </span>
+                    ".
+                  </span>
+                  <br /> Are you sure?
+                </Trans>
+              </span>
+            ))}
         </div>
 
         <SigningDisclosure className="mt-4" />
@@ -138,9 +165,13 @@ export const SignDialog = ({
               loading={isSubmitting}
               onClick={onSignatureComplete}
             >
-              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
-              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
-              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+              {match(role)
+                .with(RecipientRole.VIEWER, () => <Trans>Mark as Viewed</Trans>)
+                .with(RecipientRole.SIGNER, () => <Trans>Sign</Trans>)
+                .with(RecipientRole.APPROVER, () => <Trans>Approve</Trans>)
+                .with(RecipientRole.CC, () => <Trans>Mark as Viewed</Trans>)
+                .with(RecipientRole.ASSISTANT, () => <Trans>Complete</Trans>)
+                .exhaustive()}
             </Button>
           </div>
         </DialogFooter>

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

@@ -182,6 +182,23 @@ export const SigningFieldContainer = ({
           </button>
         )}
 
+        {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
+          field.fieldMeta?.label && (
+            <div
+              className={cn(
+                'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
+                {
+                  'bg-foreground/5 border-border border': !field.inserted,
+                },
+                {
+                  'bg-documenso-200 border-primary border': field.inserted,
+                },
+              )}
+            >
+              {field.fieldMeta.label}
+            </div>
+          )}
+
         {children}
       </FieldRootContainer>
     </div>

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

@@ -179,7 +179,13 @@ export const SigningPageView = ({
             )
             .map((field) =>
               match(field.type)
-                .with(FieldType.SIGNATURE, () => <SignatureField key={field.id} field={field} />)
+                .with(FieldType.SIGNATURE, () => (
+                  <SignatureField
+                    key={field.id}
+                    field={field}
+                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                  />
+                ))
                 .with(FieldType.INITIALS, () => <InitialsField key={field.id} field={field} />)
                 .with(FieldType.NAME, () => <NameField key={field.id} field={field} />)
                 .with(FieldType.DATE, () => (

apps/web/src/app/embed/completed.tsx

@@ -12,7 +12,7 @@ export type EmbedDocumentCompletedPageProps = {
 export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
   console.log({ signature });
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <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="text-foreground text-2xl font-semibold">
         <Trans>Document Completed!</Trans>
       </h3>

apps/web/src/app/embed/direct/[[...url]]/client.tsx

@@ -49,7 +49,7 @@ export type EmbedDirectTemplateClientPageProps = {
   fields: Field[];
   metadata?: DocumentMeta | TemplateMeta | null;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhiteLabelling?: boolean;
 };
 
 export const EmbedDirectTemplateClientPage = ({
@@ -60,7 +60,7 @@ export const EmbedDirectTemplateClientPage = ({
   fields,
   metadata,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhiteLabelling = false,
 }: EmbedDirectTemplateClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -288,7 +288,7 @@ export const EmbedDirectTemplateClientPage = ({
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (isPlatformOrEnterprise) {
+      if (allowWhiteLabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -349,7 +349,7 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
@@ -360,19 +360,34 @@ export const EmbedDirectTemplateClientPage = ({
                   <Trans>Sign document</Trans>
                 </h3>
 
-                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                  {isExpanded ? (
-                    <LucideChevronDown
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(false)}
-                    />
-                  ) : (
-                    <LucideChevronUp
-                      className="text-muted-foreground h-5 w-5"
-                      onClick={() => setIsExpanded(true)}
-                    />
-                  )}
-                </Button>
+                {isExpanded ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(false)}
+                  >
+                    <LucideChevronDown className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : pendingFields.length > 0 ? (
+                  <Button
+                    variant="outline"
+                    className="h-8 w-8 p-0 md:hidden"
+                    onClick={() => setIsExpanded(true)}
+                  >
+                    <LucideChevronUp className="text-muted-foreground h-5 w-5" />
+                  </Button>
+                ) : (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="md:hidden"
+                    disabled={isThrottled || (hasSignatureField && !signatureValid)}
+                    loading={isSubmitting}
+                    onClick={() => throttledOnCompleteClick()}
+                  >
+                    <Trans>Complete</Trans>
+                  </Button>
+                )}
               </div>
             </div>
 
@@ -417,40 +432,42 @@ export const EmbedDirectTemplateClientPage = ({
                   />
                 </div>
 
-                <div>
-                  <Label htmlFor="Signature">
-                    <Trans>Signature</Trans>
-                  </Label>
+                {hasSignatureField && (
+                  <div>
+                    <Label htmlFor="Signature">
+                      <Trans>Signature</Trans>
+                    </Label>
 
-                  <Card className="mt-2" gradient degrees={-120}>
-                    <CardContent className="p-0">
-                      <SignaturePad
-                        className="h-44 w-full"
-                        disabled={isThrottled || isSubmitting}
-                        defaultValue={signature ?? undefined}
-                        onChange={(value) => {
-                          setSignature(value);
-                        }}
-                        onValidityChange={(isValid) => {
-                          setSignatureValid(isValid);
-                        }}
-                        allowTypedSignature={Boolean(
-                          metadata &&
-                            'typedSignatureEnabled' in metadata &&
-                            metadata.typedSignatureEnabled,
-                        )}
-                      />
-                    </CardContent>
-                  </Card>
+                    <Card className="mt-2" gradient degrees={-120}>
+                      <CardContent className="p-0">
+                        <SignaturePad
+                          className="h-44 w-full"
+                          disabled={isThrottled || isSubmitting}
+                          defaultValue={signature ?? undefined}
+                          onChange={(value) => {
+                            setSignature(value);
+                          }}
+                          onValidityChange={(isValid) => {
+                            setSignatureValid(isValid);
+                          }}
+                          allowTypedSignature={Boolean(
+                            metadata &&
+                              'typedSignatureEnabled' in metadata &&
+                              metadata.typedSignatureEnabled,
+                          )}
+                        />
+                      </CardContent>
+                    </Card>
 
-                  {hasSignatureField && !signatureValid && (
-                    <div className="text-destructive mt-2 text-sm">
-                      <Trans>
-                        Signature is too small. Please provide a more complete signature.
-                      </Trans>
-                    </div>
-                  )}
-                </div>
+                    {hasSignatureField && !signatureValid && (
+                      <div className="text-destructive mt-2 text-sm">
+                        <Trans>
+                          Signature is too small. Please provide a more complete signature.
+                        </Trans>
+                      </div>
+                    )}
+                  </div>
+                )}
               </div>
             </div>
 

apps/web/src/app/embed/direct/[[...url]]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
@@ -55,12 +56,16 @@ export default async function EmbedDirectTemplatePage({ params }: EmbedDirectTem
     documentAuth: template.authOptions,
   });
 
-  const [isPlatformDocument, isEnterpriseDocument] = await Promise.all([
+  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
     isDocumentPlatform(template),
     isUserEnterprise({
       userId: template.userId,
       teamId: template.teamId ?? undefined,
     }),
+    isUserCommunityPlan({
+      userId: template.userId,
+      teamId: template.teamId ?? undefined,
+    }),
   ]);
 
   const isAccessAuthValid = match(derivedRecipientAccessAuth)
@@ -105,8 +110,10 @@ export default async function EmbedDirectTemplatePage({ params }: EmbedDirectTem
             recipient={recipient}
             fields={fields}
             metadata={template.templateMeta}
-            hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
-            isPlatformOrEnterprise={isPlatformDocument || isEnterpriseDocument}
+            hidePoweredBy={
+              isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+            }
+            allowWhiteLabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           />
         </RecipientProvider>
       </DocumentAuthProvider>

apps/web/src/app/embed/rejected.tsx

@@ -0,0 +1,40 @@
+import { Trans } from '@lingui/macro';
+import { XCircle } from 'lucide-react';
+
+import type { Signature } from '@documenso/prisma/client';
+
+export type EmbedDocumentRejectedPageProps = {
+  name?: string;
+  signature?: Signature;
+};
+
+export const EmbedDocumentRejected = ({ name }: EmbedDocumentRejectedPageProps) => {
+  return (
+    <div className="embed--DocumentRejected relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <XCircle className="text-destructive h-10 w-10" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Document Rejected</Trans>
+          </h2>
+        </div>
+
+        <div className="text-destructive mt-4 flex items-center text-center text-sm">
+          <Trans>You have rejected this document</Trans>
+        </div>
+
+        <p className="text-muted-foreground mt-6 max-w-[60ch] text-center text-sm">
+          <Trans>
+            The document owner has been notified of your decision. They may contact you with further
+            instructions if necessary.
+          </Trans>
+        </p>
+
+        <p className="text-muted-foreground mt-2 max-w-[60ch] text-center text-sm">
+          <Trans>No further action is required from you at this time.</Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -10,7 +10,13 @@ import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn'
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { DocumentMeta, TemplateMeta } from '@documenso/prisma/client';
-import { type DocumentData, type Field, FieldType, RecipientRole } from '@documenso/prisma/client';
+import {
+  type DocumentData,
+  type Field,
+  FieldType,
+  RecipientRole,
+  SigningStatus,
+} from '@documenso/prisma/client';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
@@ -26,11 +32,13 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
 import { RecipientProvider } from '~/app/(signing)/sign/[token]/recipient-context';
+import { RejectDocumentDialog } from '~/app/(signing)/sign/[token]/reject-document-dialog';
 import { Logo } from '~/components/branding/logo';
 
 import { EmbedClientLoading } from '../../client-loading';
 import { EmbedDocumentCompleted } from '../../completed';
 import { EmbedDocumentFields } from '../../document-fields';
+import { EmbedDocumentRejected } from '../../rejected';
 import { injectCss } from '../../util';
 import { ZSignDocumentEmbedDataSchema } from './schema';
 
@@ -43,7 +51,7 @@ export type EmbedSignDocumentClientPageProps = {
   metadata?: DocumentMeta | TemplateMeta | null;
   isCompleted?: boolean;
   hidePoweredBy?: boolean;
-  isPlatformOrEnterprise?: boolean;
+  allowWhitelabelling?: boolean;
   allRecipients?: RecipientWithFields[];
 };
 
@@ -56,7 +64,7 @@ export const EmbedSignDocumentClientPage = ({
   metadata,
   isCompleted,
   hidePoweredBy = false,
-  isPlatformOrEnterprise = false,
+  allowWhitelabelling = false,
   allRecipients = [],
 }: EmbedSignDocumentClientPageProps) => {
   const { _ } = useLingui();
@@ -75,6 +83,9 @@ export const EmbedSignDocumentClientPage = ({
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
   const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
+  const [hasRejectedDocument, setHasRejectedDocument] = useState(
+    recipient.signingStatus === SigningStatus.REJECTED,
+  );
   const [selectedSignerId, setSelectedSignerId] = useState<number | null>(
     allRecipients.length > 0 ? allRecipients[0].id : null,
   );
@@ -83,6 +94,8 @@ export const EmbedSignDocumentClientPage = ({
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
+  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
+
   const selectedSigner = allRecipients.find((r) => r.id === selectedSignerId);
   const isAssistantMode = recipient.role === RecipientRole.ASSISTANT;
 
@@ -161,6 +174,25 @@ export const EmbedSignDocumentClientPage = ({
     }
   };
 
+  const onDocumentRejected = (reason: string) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-rejected',
+          data: {
+            token,
+            documentId,
+            recipientId: recipient.id,
+            reason,
+          },
+        },
+        '*',
+      );
+    }
+
+    setHasRejectedDocument(true);
+  };
+
   useLayoutEffect(() => {
     const hash = window.location.hash.slice(1);
 
@@ -174,12 +206,13 @@ export const EmbedSignDocumentClientPage = ({
       // Since a recipient can be provided a name we can lock it without requiring
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
+      setAllowDocumentRejection(!!data.allowDocumentRejection);
 
       if (data.darkModeDisabled) {
         document.documentElement.classList.add('dark-mode-disabled');
       }
 
-      if (isPlatformOrEnterprise) {
+      if (allowWhitelabelling) {
         injectCss({
           css: data.css,
           cssVars: data.cssVars,
@@ -208,6 +241,10 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
+  if (hasRejectedDocument) {
+    return <EmbedDocumentRejected name={fullName} />;
+  }
+
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -226,12 +263,22 @@ export const EmbedSignDocumentClientPage = ({
 
   return (
     <RecipientProvider recipient={recipient} targetSigner={selectedSigner ?? null}>
-      <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <div className="embed--Root relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
         {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
 
-        <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        {allowDocumentRejection && (
+          <div className="embed--Actions mb-4 flex w-full flex-row-reverse items-baseline justify-between">
+            <RejectDocumentDialog
+              document={{ id: documentId }}
+              token={token}
+              onRejected={onDocumentRejected}
+            />
+          </div>
+        )}
+
+        <div className="embed--DocumentContainer relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
           {/* Viewer */}
-          <div className="flex-1">
+          <div className="embed--DocumentViewer flex-1">
             <LazyPDFViewer
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
@@ -241,12 +288,12 @@ export const EmbedSignDocumentClientPage = ({
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
               {/* Header */}
-              <div>
+              <div className="embed--DocumentWidgetHeader">
                 <div className="flex items-center justify-between gap-x-2">
                   <h3 className="text-foreground text-xl font-semibold md:text-2xl">
                     {isAssistantMode ? (
@@ -256,23 +303,40 @@ export const EmbedSignDocumentClientPage = ({
                     )}
                   </h3>
 
-                  <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
-                    {isExpanded ? (
-                      <LucideChevronDown
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(false)}
-                      />
-                    ) : (
-                      <LucideChevronUp
-                        className="text-muted-foreground h-5 w-5"
-                        onClick={() => setIsExpanded(true)}
-                      />
-                    )}
-                  </Button>
+                  {isExpanded ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(false)}
+                    >
+                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : pendingFields.length > 0 ? (
+                    <Button
+                      variant="outline"
+                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      onClick={() => setIsExpanded(true)}
+                    >
+                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="default"
+                      size="sm"
+                      className="md:hidden"
+                      disabled={
+                        isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
+                      }
+                      loading={isSubmitting}
+                      onClick={() => throttledOnCompleteClick()}
+                    >
+                      <Trans>Complete</Trans>
+                    </Button>
+                  )}
                 </div>
               </div>
 
-              <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetContent hidden group-data-[expanded]/document-widget:block md:block">
                 <p className="text-muted-foreground mt-2 text-sm">
                   {isAssistantMode ? (
                     <Trans>Help complete the document for other signers.</Trans>
@@ -285,7 +349,7 @@ export const EmbedSignDocumentClientPage = ({
               </div>
 
               {/* Form */}
-              <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="embed--DocumentWidgetForm -mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
                 <div className="flex flex-1 flex-col gap-y-4">
                   {isAssistantMode && (
                     <div>
@@ -372,40 +436,42 @@ export const EmbedSignDocumentClientPage = ({
                         />
                       </div>
 
-                      <div>
-                        <Label htmlFor="Signature">
-                          <Trans>Signature</Trans>
-                        </Label>
+                      {hasSignatureField && (
+                        <div>
+                          <Label htmlFor="Signature">
+                            <Trans>Signature</Trans>
+                          </Label>
 
-                        <Card className="mt-2" gradient degrees={-120}>
-                          <CardContent className="p-0">
-                            <SignaturePad
-                              className="h-44 w-full"
-                              disabled={isThrottled || isSubmitting}
-                              defaultValue={signature ?? undefined}
-                              onChange={(value) => {
-                                setSignature(value);
-                              }}
-                              onValidityChange={(isValid) => {
-                                setSignatureValid(isValid);
-                              }}
-                              allowTypedSignature={Boolean(
-                                metadata &&
-                                  'typedSignatureEnabled' in metadata &&
-                                  metadata.typedSignatureEnabled,
-                              )}
-                            />
-                          </CardContent>
-                        </Card>
+                          <Card className="mt-2" gradient degrees={-120}>
+                            <CardContent className="p-0">
+                              <SignaturePad
+                                className="h-44 w-full"
+                                disabled={isThrottled || isSubmitting}
+                                defaultValue={signature ?? undefined}
+                                onChange={(value) => {
+                                  setSignature(value);
+                                }}
+                                onValidityChange={(isValid) => {
+                                  setSignatureValid(isValid);
+                                }}
+                                allowTypedSignature={Boolean(
+                                  metadata &&
+                                    'typedSignatureEnabled' in metadata &&
+                                    metadata.typedSignatureEnabled,
+                                )}
+                              />
+                            </CardContent>
+                          </Card>
 
-                        {hasSignatureField && !signatureValid && (
-                          <div className="text-destructive mt-2 text-sm">
-                            <Trans>
-                              Signature is too small. Please provide a more complete signature.
-                            </Trans>
-                          </div>
-                        )}
-                      </div>
+                          {hasSignatureField && !signatureValid && (
+                            <div className="text-destructive mt-2 text-sm">
+                              <Trans>
+                                Signature is too small. Please provide a more complete signature.
+                              </Trans>
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </>
                   )}
                 </div>
@@ -413,14 +479,14 @@ export const EmbedSignDocumentClientPage = ({
 
               <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
 
-              <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              <div className="embed--DocumentWidgetFooter mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
                 {pendingFields.length > 0 ? (
                   <Button className="col-start-2" onClick={() => onNextFieldClick()}>
                     <Trans>Next</Trans>
                   </Button>
                 ) : (
                   <Button
-                    className="col-start-2"
+                    className={allowDocumentRejection ? 'col-start-2' : 'col-span-2'}
                     disabled={
                       isThrottled || (!isAssistantMode && hasSignatureField && !signatureValid)
                     }

apps/web/src/app/embed/sign/[[...url]]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { isCommunityPlan as isUserCommunityPlan } from '@documenso/ee/server-only/util/is-community-plan';
 import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { isDocumentPlatform } from '@documenso/ee/server-only/util/is-document-platform';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
@@ -62,12 +63,16 @@ export default async function EmbedSignDocumentPage({ params }: EmbedSignDocumen
     return <EmbedPaywall />;
   }
 
-  const [isPlatformDocument, isEnterpriseDocument] = await Promise.all([
+  const [isPlatformDocument, isEnterpriseDocument, isCommunityPlan] = await Promise.all([
     isDocumentPlatform(document),
     isUserEnterprise({
       userId: document.userId,
       teamId: document.teamId ?? undefined,
     }),
+    isUserCommunityPlan({
+      userId: document.userId,
+      teamId: document.teamId ?? undefined,
+    }),
   ]);
 
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
@@ -126,8 +131,10 @@ export default async function EmbedSignDocumentPage({ params }: EmbedSignDocumen
           fields={fields}
           metadata={document.documentMeta}
           isCompleted={document.status === DocumentStatus.COMPLETED}
-          hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
-          isPlatformOrEnterprise={isPlatformDocument || isEnterpriseDocument}
+          hidePoweredBy={
+            isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+          }
+          allowWhitelabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           allRecipients={allRecipients}
         />
       </DocumentAuthProvider>

apps/web/src/app/embed/sign/[[...url]]/schema.ts

@@ -13,4 +13,5 @@ export const ZSignDocumentEmbedDataSchema = ZBaseEmbedDataSchema.extend({
     .optional()
     .transform((value) => value || undefined),
   lockName: z.boolean().optional().default(false),
+  allowDocumentRejection: z.boolean().optional(),
 });

apps/web/src/app/embed/waiting-for-turn.tsx

@@ -26,7 +26,7 @@ export const EmbedWaitingForTurn = () => {
   }
 
   return (
-    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+    <div className="embed--WaitingForTurn relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
       <h3 className="text-foreground text-center text-2xl font-bold">
         <Trans>Waiting for Your Turn</Trans>
       </h3>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.9.0-rc.12",
+  "version": "1.9.1-rc.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.9.0-rc.12",
+      "version": "1.9.1-rc.8",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -106,7 +106,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.9.0-rc.12",
+      "version": "1.9.1-rc.8",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.0-rc.12",
+  "version": "1.9.1-rc.8",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",

packages/api/v1/implementation.ts

@@ -586,6 +586,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
         userId: user.id,
         teamId: team?.id,
         recipients: body.recipients,
+        prefillFields: body.prefillFields,
         override: {
           title: body.title,
           ...body.meta,

packages/api/v1/schema.ts

@@ -11,7 +11,7 @@ import {
   ZRecipientActionAuthTypesSchema,
 } from '@documenso/lib/types/document-auth';
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { ZFieldMetaPrefillFieldsSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import {
   DocumentDataType,
   DocumentDistributionMethod,
@@ -299,6 +299,7 @@ export const ZGenerateDocumentFromTemplateMutationSchema = z.object({
     })
     .optional(),
   formValues: z.record(z.string(), z.union([z.string(), z.boolean(), z.number()])).optional(),
+  prefillFields: z.array(ZFieldMetaPrefillFieldsSchema).optional(),
 });
 
 export type TGenerateDocumentFromTemplateMutationSchema = z.infer<

packages/app-tests/e2e/api/v1/template-field-prefill.spec.ts

@@ -0,0 +1,612 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import type { TCheckboxFieldMeta, TRadioFieldMeta } from '@documenso/lib/types/field-meta';
+import { prisma } from '@documenso/prisma';
+import { FieldType, RecipientRole } from '@documenso/prisma/client';
+import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../../fixtures/authentication';
+
+test.describe('Template Field Prefill API v1', () => {
+  test('should create a document from template with prefilled fields', async ({
+    page,
+    request,
+  }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template with seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template with Advanced Fields',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add fields to the template
+    // Add TEXT field
+    const textField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.TEXT,
+        page: 1,
+        positionX: 5,
+        positionY: 5,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'text',
+          label: 'Text Field',
+        },
+      },
+    });
+
+    // Add NUMBER field
+    const numberField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.NUMBER,
+        page: 1,
+        positionX: 5,
+        positionY: 15,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'number',
+          label: 'Number Field',
+        },
+      },
+    });
+
+    // Add RADIO field
+    const radioField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.RADIO,
+        page: 1,
+        positionX: 5,
+        positionY: 25,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'radio',
+          label: 'Radio Field',
+          values: [
+            { id: 1, value: 'Option A', checked: false },
+            { id: 2, value: 'Option B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // Add CHECKBOX field
+    const checkboxField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.CHECKBOX,
+        page: 1,
+        positionX: 5,
+        positionY: 35,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'checkbox',
+          label: 'Checkbox Field',
+          values: [
+            { id: 1, value: 'Check A', checked: false },
+            { id: 2, value: 'Check B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // Add DROPDOWN field
+    const dropdownField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.DROPDOWN,
+        page: 1,
+        positionX: 5,
+        positionY: 45,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'dropdown',
+          label: 'Dropdown Field',
+          values: [{ value: 'Select A' }, { value: 'Select B' }],
+        },
+      },
+    });
+
+    // 6. Sign in as the user
+    await apiSignin({
+      page,
+      email: user.email,
+    });
+
+    // 7. Navigate to the template
+    await page.goto(`${WEBAPP_BASE_URL}/templates/${template.id}`);
+
+    // 8. Create a document from the template with prefilled fields
+    const response = await request.post(
+      `${WEBAPP_BASE_URL}/api/v1/templates/${template.id}/generate-document`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          title: 'Document with Prefilled Fields',
+          recipients: [
+            {
+              id: recipient.id,
+              email: 'recipient@example.com',
+              name: 'Test Recipient',
+              role: 'SIGNER',
+            },
+          ],
+          prefillFields: [
+            {
+              id: textField.id,
+              type: 'text',
+              label: 'Prefilled Text',
+              value: 'This is prefilled text',
+            },
+            {
+              id: numberField.id,
+              type: 'number',
+              label: 'Prefilled Number',
+              value: '42',
+            },
+            {
+              id: radioField.id,
+              type: 'radio',
+              label: 'Prefilled Radio',
+              value: 'Option A',
+            },
+            {
+              id: checkboxField.id,
+              type: 'checkbox',
+              label: 'Prefilled Checkbox',
+              value: ['Check A', 'Check B'],
+            },
+            {
+              id: dropdownField.id,
+              type: 'dropdown',
+              label: 'Prefilled Dropdown',
+              value: 'Select B',
+            },
+          ],
+        },
+      },
+    );
+    const responseData = await response.json();
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.documentId).toBeDefined();
+
+    // 9. Verify the document was created with prefilled fields
+    const document = await prisma.document.findUnique({
+      where: {
+        id: responseData.documentId,
+      },
+      include: {
+        fields: true,
+      },
+    });
+
+    expect(document).not.toBeNull();
+
+    // 10. Verify each field has the correct prefilled values
+    const documentTextField = document?.fields.find(
+      (field) => field.type === FieldType.TEXT && field.fieldMeta?.type === 'text',
+    );
+    expect(documentTextField?.fieldMeta).toMatchObject({
+      type: 'text',
+      label: 'Prefilled Text',
+      text: 'This is prefilled text',
+    });
+
+    const documentNumberField = document?.fields.find(
+      (field) => field.type === FieldType.NUMBER && field.fieldMeta?.type === 'number',
+    );
+    expect(documentNumberField?.fieldMeta).toMatchObject({
+      type: 'number',
+      label: 'Prefilled Number',
+      value: '42',
+    });
+
+    const documentRadioField = document?.fields.find(
+      (field) => field.type === FieldType.RADIO && field.fieldMeta?.type === 'radio',
+    );
+    expect(documentRadioField?.fieldMeta).toMatchObject({
+      type: 'radio',
+      label: 'Prefilled Radio',
+    });
+    // Check that the correct radio option is selected
+    const radioValues = (documentRadioField?.fieldMeta as TRadioFieldMeta)?.values || [];
+    const selectedRadioOption = radioValues.find((option) => option.checked);
+    expect(selectedRadioOption?.value).toBe('Option A');
+
+    const documentCheckboxField = document?.fields.find(
+      (field) => field.type === FieldType.CHECKBOX && field.fieldMeta?.type === 'checkbox',
+    );
+    expect(documentCheckboxField?.fieldMeta).toMatchObject({
+      type: 'checkbox',
+      label: 'Prefilled Checkbox',
+    });
+    // Check that the correct checkbox options are selected
+    const checkboxValues = (documentCheckboxField?.fieldMeta as TCheckboxFieldMeta)?.values || [];
+    const checkedOptions = checkboxValues.filter((option) => option.checked);
+    expect(checkedOptions.length).toBe(2);
+    expect(checkedOptions.map((option) => option.value)).toContain('Check A');
+    expect(checkedOptions.map((option) => option.value)).toContain('Check B');
+
+    const documentDropdownField = document?.fields.find(
+      (field) => field.type === FieldType.DROPDOWN && field.fieldMeta?.type === 'dropdown',
+    );
+    expect(documentDropdownField?.fieldMeta).toMatchObject({
+      type: 'dropdown',
+      label: 'Prefilled Dropdown',
+      defaultValue: 'Select B',
+    });
+
+    // 11. Sign in as the recipient and verify the prefilled fields are visible
+    const documentRecipient = await prisma.recipient.findFirst({
+      where: {
+        documentId: document?.id,
+        email: 'recipient@example.com',
+      },
+    });
+
+    // Send the document to the recipient
+    const sendResponse = await request.post(
+      `${WEBAPP_BASE_URL}/api/v1/documents/${document?.id}/send`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          sendEmail: false,
+        },
+      },
+    );
+
+    expect(sendResponse.ok()).toBeTruthy();
+    expect(sendResponse.status()).toBe(200);
+
+    expect(documentRecipient).not.toBeNull();
+
+    // Visit the signing page
+    await page.goto(`${WEBAPP_BASE_URL}/sign/${documentRecipient?.token}`);
+
+    // Verify the prefilled fields are visible with correct values
+    // Text field
+    await expect(page.getByText('This is prefilled')).toBeVisible();
+
+    // Number field
+    await expect(page.getByText('42')).toBeVisible();
+
+    // Radio field
+    await expect(page.getByText('Option A')).toBeVisible();
+    await expect(page.getByRole('radio', { name: 'Option A' })).toBeChecked();
+
+    // Checkbox field
+    await expect(page.getByText('Check A')).toBeVisible();
+    await expect(page.getByText('Check B')).toBeVisible();
+    await expect(page.getByRole('checkbox', { name: 'Check A' })).toBeChecked();
+    await expect(page.getByRole('checkbox', { name: 'Check B' })).toBeChecked();
+
+    // Dropdown field
+    await expect(page.getByText('Select B')).toBeVisible();
+  });
+
+  test('should create a document from template without prefilled fields', async ({
+    page,
+    request,
+  }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template with seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template with Default Fields',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add fields to the template
+    // Add TEXT field
+    const textField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.TEXT,
+        page: 1,
+        positionX: 5,
+        positionY: 5,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'text',
+          label: 'Default Text Field',
+        },
+      },
+    });
+
+    // Add NUMBER field
+    const numberField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.NUMBER,
+        page: 1,
+        positionX: 5,
+        positionY: 15,
+        width: 10,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'number',
+          label: 'Default Number Field',
+        },
+      },
+    });
+
+    // 6. Sign in as the user
+    await apiSignin({
+      page,
+      email: user.email,
+    });
+
+    // 7. Navigate to the template
+    await page.goto(`${WEBAPP_BASE_URL}/templates/${template.id}`);
+
+    // 8. Create a document from the template without prefilled fields
+    const response = await request.post(
+      `${WEBAPP_BASE_URL}/api/v1/templates/${template.id}/generate-document`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          title: 'Document with Default Fields',
+          recipients: [
+            {
+              id: recipient.id,
+              email: 'recipient@example.com',
+              name: 'Test Recipient',
+              role: 'SIGNER',
+            },
+          ],
+        },
+      },
+    );
+
+    const responseData = await response.json();
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.documentId).toBeDefined();
+
+    // 9. Verify the document was created with default fields
+    const document = await prisma.document.findUnique({
+      where: {
+        id: responseData.documentId,
+      },
+      include: {
+        fields: true,
+      },
+    });
+
+    expect(document).not.toBeNull();
+
+    // 10. Verify fields have their default values
+    const documentTextField = document?.fields.find((field) => field.type === FieldType.TEXT);
+    expect(documentTextField?.fieldMeta).toMatchObject({
+      type: 'text',
+      label: 'Default Text Field',
+    });
+
+    const documentNumberField = document?.fields.find((field) => field.type === FieldType.NUMBER);
+    expect(documentNumberField?.fieldMeta).toMatchObject({
+      type: 'number',
+      label: 'Default Number Field',
+    });
+
+    // 11. Sign in as the recipient and verify the default fields are visible
+    const documentRecipient = await prisma.recipient.findFirst({
+      where: {
+        documentId: document?.id,
+        email: 'recipient@example.com',
+      },
+    });
+
+    expect(documentRecipient).not.toBeNull();
+
+    const sendResponse = await request.post(
+      `${WEBAPP_BASE_URL}/api/v1/documents/${document?.id}/send`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          sendEmail: false,
+        },
+      },
+    );
+
+    expect(sendResponse.ok()).toBeTruthy();
+    expect(sendResponse.status()).toBe(200);
+
+    // Visit the signing page
+    await page.goto(`${WEBAPP_BASE_URL}/sign/${documentRecipient?.token}`);
+
+    // Verify the default fields are visible with correct labels
+    await expect(page.getByText('Default Text Field')).toBeVisible();
+    await expect(page.getByText('Default Number Field')).toBeVisible();
+  });
+
+  test('should handle invalid field prefill values', async ({ request }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template using seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template for Invalid Test',
+        visibility: 'EVERYONE',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add a field to the template
+    const field = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.RADIO,
+        page: 1,
+        positionX: 100,
+        positionY: 100,
+        width: 100,
+        height: 50,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'radio',
+          label: 'Radio Field',
+          values: [
+            { id: 1, value: 'Option A', checked: false },
+            { id: 2, value: 'Option B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // 6. Try to create a document with invalid prefill value
+    const response = await request.post(
+      `${WEBAPP_BASE_URL}/api/v1/templates/${template.id}/generate-document`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        data: {
+          title: 'Document with Invalid Prefill',
+          recipients: [
+            {
+              id: recipient.id,
+              email: 'recipient@example.com',
+              name: 'Test Recipient',
+              role: 'SIGNER',
+            },
+          ],
+          prefillFields: [
+            {
+              id: field.id,
+              type: 'radio',
+              label: 'Invalid Radio',
+              value: 'Non-existent Option', // This option doesn't exist
+            },
+          ],
+        },
+      },
+    );
+
+    // 7. Verify the request fails with appropriate error
+    expect(response.ok()).toBeFalsy();
+    expect(response.status()).toBe(400);
+
+    const errorData = await response.json();
+    expect(errorData.message).toContain('not found in options for RADIO field');
+  });
+});

packages/app-tests/e2e/api/v2/template-field-prefill.spec.ts

@@ -0,0 +1,600 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import type { TCheckboxFieldMeta, TRadioFieldMeta } from '@documenso/lib/types/field-meta';
+import { prisma } from '@documenso/prisma';
+import { FieldType, RecipientRole } from '@documenso/prisma/client';
+import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../../fixtures/authentication';
+
+test.describe('Template Field Prefill API v2', () => {
+  test('should create a document from template with prefilled fields', async ({
+    page,
+    request,
+  }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template with seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template with Advanced Fields V2',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add fields to the template
+    // Add TEXT field
+    const textField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.TEXT,
+        page: 1,
+        positionX: 5,
+        positionY: 5,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'text',
+          label: 'Text Field',
+        },
+      },
+    });
+
+    // Add NUMBER field
+    const numberField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.NUMBER,
+        page: 1,
+        positionX: 5,
+        positionY: 15,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'number',
+          label: 'Number Field',
+        },
+      },
+    });
+
+    // Add RADIO field
+    const radioField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.RADIO,
+        page: 1,
+        positionX: 5,
+        positionY: 25,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'radio',
+          label: 'Radio Field',
+          values: [
+            { id: 1, value: 'Option A', checked: false },
+            { id: 2, value: 'Option B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // Add CHECKBOX field
+    const checkboxField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.CHECKBOX,
+        page: 1,
+        positionX: 5,
+        positionY: 35,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'checkbox',
+          label: 'Checkbox Field',
+          values: [
+            { id: 1, value: 'Check A', checked: false },
+            { id: 2, value: 'Check B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // Add DROPDOWN field
+    const dropdownField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.DROPDOWN,
+        page: 1,
+        positionX: 5,
+        positionY: 45,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'dropdown',
+          label: 'Dropdown Field',
+          values: [{ value: 'Select A' }, { value: 'Select B' }],
+        },
+      },
+    });
+
+    // 6. Sign in as the user
+    await apiSignin({
+      page,
+      email: user.email,
+    });
+
+    // 7. Navigate to the template
+    await page.goto(`${WEBAPP_BASE_URL}/templates/${template.id}`);
+
+    // 8. Create a document from the template with prefilled fields using v2 API
+    const response = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/template/use`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: {
+        templateId: template.id,
+        recipients: [
+          {
+            id: recipient.id,
+            email: 'recipient@example.com',
+            name: 'Test Recipient',
+          },
+        ],
+        prefillFields: [
+          {
+            id: textField.id,
+            type: 'text',
+            label: 'Prefilled Text',
+            value: 'This is prefilled text',
+          },
+          {
+            id: numberField.id,
+            type: 'number',
+            label: 'Prefilled Number',
+            value: '42',
+          },
+          {
+            id: radioField.id,
+            type: 'radio',
+            label: 'Prefilled Radio',
+            value: 'Option A',
+          },
+          {
+            id: checkboxField.id,
+            type: 'checkbox',
+            label: 'Prefilled Checkbox',
+            value: ['Check A', 'Check B'],
+          },
+          {
+            id: dropdownField.id,
+            type: 'dropdown',
+            label: 'Prefilled Dropdown',
+            value: 'Select B',
+          },
+        ],
+      },
+    });
+
+    const responseData = await response.json();
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.id).toBeDefined();
+
+    // 9. Verify the document was created with prefilled fields
+    const document = await prisma.document.findUnique({
+      where: {
+        id: responseData.id,
+      },
+      include: {
+        fields: true,
+      },
+    });
+
+    expect(document).not.toBeNull();
+
+    // 10. Verify each field has the correct prefilled values
+    const documentTextField = document?.fields.find(
+      (field) => field.type === FieldType.TEXT && field.fieldMeta?.type === 'text',
+    );
+    expect(documentTextField?.fieldMeta).toMatchObject({
+      type: 'text',
+      label: 'Prefilled Text',
+      text: 'This is prefilled text',
+    });
+
+    const documentNumberField = document?.fields.find(
+      (field) => field.type === FieldType.NUMBER && field.fieldMeta?.type === 'number',
+    );
+    expect(documentNumberField?.fieldMeta).toMatchObject({
+      type: 'number',
+      label: 'Prefilled Number',
+      value: '42',
+    });
+
+    const documentRadioField = document?.fields.find(
+      (field) => field.type === FieldType.RADIO && field.fieldMeta?.type === 'radio',
+    );
+    expect(documentRadioField?.fieldMeta).toMatchObject({
+      type: 'radio',
+      label: 'Prefilled Radio',
+    });
+    // Check that the correct radio option is selected
+    const radioValues = (documentRadioField?.fieldMeta as TRadioFieldMeta)?.values || [];
+    const selectedRadioOption = radioValues.find((option) => option.checked);
+    expect(selectedRadioOption?.value).toBe('Option A');
+
+    const documentCheckboxField = document?.fields.find(
+      (field) => field.type === FieldType.CHECKBOX && field.fieldMeta?.type === 'checkbox',
+    );
+    expect(documentCheckboxField?.fieldMeta).toMatchObject({
+      type: 'checkbox',
+      label: 'Prefilled Checkbox',
+    });
+    // Check that the correct checkbox options are selected
+    const checkboxValues = (documentCheckboxField?.fieldMeta as TCheckboxFieldMeta)?.values || [];
+    const checkedOptions = checkboxValues.filter((option) => option.checked);
+    expect(checkedOptions.length).toBe(2);
+    expect(checkedOptions.map((option) => option.value)).toContain('Check A');
+    expect(checkedOptions.map((option) => option.value)).toContain('Check B');
+
+    const documentDropdownField = document?.fields.find(
+      (field) => field.type === FieldType.DROPDOWN && field.fieldMeta?.type === 'dropdown',
+    );
+    expect(documentDropdownField?.fieldMeta).toMatchObject({
+      type: 'dropdown',
+      label: 'Prefilled Dropdown',
+      defaultValue: 'Select B',
+    });
+
+    const sendResponse = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/document/distribute`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: {
+        documentId: document?.id,
+        meta: {
+          subject: 'Test Subject',
+          message: 'Test Message',
+        },
+      },
+    });
+
+    await expect(sendResponse.ok()).toBeTruthy();
+    await expect(sendResponse.status()).toBe(200);
+
+    // 11. Sign in as the recipient and verify the prefilled fields are visible
+    const documentRecipient = await prisma.recipient.findFirst({
+      where: {
+        documentId: document?.id,
+        email: 'recipient@example.com',
+      },
+    });
+
+    expect(documentRecipient).not.toBeNull();
+
+    // Visit the signing page
+    await page.goto(`${WEBAPP_BASE_URL}/sign/${documentRecipient?.token}`);
+
+    // Verify the prefilled fields are visible with correct values
+    // Text field
+    await expect(page.getByText('This is prefilled')).toBeVisible();
+
+    // Number field
+    await expect(page.getByText('42')).toBeVisible();
+
+    // Radio field
+    await expect(page.getByText('Option A')).toBeVisible();
+    await expect(page.getByRole('radio', { name: 'Option A' })).toBeChecked();
+
+    // Checkbox field
+    await expect(page.getByText('Check A')).toBeVisible();
+    await expect(page.getByText('Check B')).toBeVisible();
+    await expect(page.getByRole('checkbox', { name: 'Check A' })).toBeChecked();
+    await expect(page.getByRole('checkbox', { name: 'Check B' })).toBeChecked();
+
+    // Dropdown field
+    await expect(page.getByText('Select B')).toBeVisible();
+  });
+
+  test('should create a document from template without prefilled fields', async ({
+    page,
+    request,
+  }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template with seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template with Default Fields V2',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add fields to the template
+    // Add TEXT field
+    const textField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.TEXT,
+        page: 1,
+        positionX: 5,
+        positionY: 5,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'text',
+          label: 'Default Text Field',
+        },
+      },
+    });
+
+    // Add NUMBER field
+    const numberField = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.NUMBER,
+        page: 1,
+        positionX: 5,
+        positionY: 15,
+        width: 20,
+        height: 5,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'number',
+          label: 'Default Number Field',
+        },
+      },
+    });
+
+    // 6. Sign in as the user
+    await apiSignin({
+      page,
+      email: user.email,
+    });
+
+    // 7. Navigate to the template
+    await page.goto(`${WEBAPP_BASE_URL}/templates/${template.id}`);
+
+    // 8. Create a document from the template without prefilled fields using v2 API
+    const response = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/template/use`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: {
+        templateId: template.id,
+        recipients: [
+          {
+            id: recipient.id,
+            email: 'recipient@example.com',
+            name: 'Test Recipient',
+          },
+        ],
+      },
+    });
+
+    const responseData = await response.json();
+
+    expect(response.ok()).toBeTruthy();
+    expect(response.status()).toBe(200);
+
+    expect(responseData.id).toBeDefined();
+
+    // 9. Verify the document was created with default fields
+    const document = await prisma.document.findUnique({
+      where: {
+        id: responseData.id,
+      },
+      include: {
+        fields: true,
+      },
+    });
+
+    expect(document).not.toBeNull();
+
+    // 10. Verify fields have their default values
+    const documentTextField = document?.fields.find((field) => field.type === FieldType.TEXT);
+    expect(documentTextField?.fieldMeta).toMatchObject({
+      type: 'text',
+      label: 'Default Text Field',
+    });
+
+    const documentNumberField = document?.fields.find((field) => field.type === FieldType.NUMBER);
+    expect(documentNumberField?.fieldMeta).toMatchObject({
+      type: 'number',
+      label: 'Default Number Field',
+    });
+
+    const sendResponse = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/document/distribute`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: {
+        documentId: document?.id,
+        meta: {
+          subject: 'Test Subject',
+          message: 'Test Message',
+        },
+      },
+    });
+
+    await expect(sendResponse.ok()).toBeTruthy();
+    await expect(sendResponse.status()).toBe(200);
+
+    // 11. Sign in as the recipient and verify the default fields are visible
+    const documentRecipient = await prisma.recipient.findFirst({
+      where: {
+        documentId: document?.id,
+        email: 'recipient@example.com',
+      },
+    });
+
+    expect(documentRecipient).not.toBeNull();
+
+    // Visit the signing page
+    await page.goto(`${WEBAPP_BASE_URL}/sign/${documentRecipient?.token}`);
+
+    await expect(page.getByText('This is prefilled')).not.toBeVisible();
+  });
+
+  test('should handle invalid field prefill values', async ({ request }) => {
+    // 1. Create a user
+    const user = await seedUser();
+
+    // 2. Create an API token for the user
+    const { token } = await createApiToken({
+      userId: user.id,
+      tokenName: 'test-token',
+      expiresIn: null,
+    });
+
+    // 3. Create a template using seedBlankTemplate
+    const template = await seedBlankTemplate(user, {
+      createTemplateOptions: {
+        title: 'Template for Invalid Test V2',
+        visibility: 'EVERYONE',
+      },
+    });
+
+    // 4. Create a recipient for the template
+    const recipient = await prisma.recipient.create({
+      data: {
+        templateId: template.id,
+        email: 'recipient@example.com',
+        name: 'Test Recipient',
+        role: RecipientRole.SIGNER,
+        token: 'test-token',
+        readStatus: 'NOT_OPENED',
+        sendStatus: 'NOT_SENT',
+        signingStatus: 'NOT_SIGNED',
+      },
+    });
+
+    // 5. Add a field to the template
+    const field = await prisma.field.create({
+      data: {
+        templateId: template.id,
+        recipientId: recipient.id,
+        type: FieldType.RADIO,
+        page: 1,
+        positionX: 100,
+        positionY: 100,
+        width: 100,
+        height: 50,
+        customText: '',
+        inserted: false,
+        fieldMeta: {
+          type: 'radio',
+          label: 'Radio Field',
+          values: [
+            { id: 1, value: 'Option A', checked: false },
+            { id: 2, value: 'Option B', checked: false },
+          ],
+        },
+      },
+    });
+
+    // 7. Try to create a document with invalid prefill value
+    const response = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/template/use`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      data: {
+        templateId: template.id,
+        recipients: [
+          {
+            id: recipient.id,
+            email: 'recipient@example.com',
+            name: 'Test Recipient',
+          },
+        ],
+        prefillFields: [
+          {
+            id: field.id,
+            type: 'radio',
+            label: 'Invalid Radio',
+            value: 'Non-existent Option', // This option doesn't exist
+          },
+        ],
+      },
+    });
+
+    // 8. Verify the request fails with appropriate error
+    expect(response.ok()).toBeFalsy();
+    expect(response.status()).toBe(400);
+
+    const errorData = await response.json();
+    expect(errorData.message).toContain('not found in options for RADIO field');
+  });
+});

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -384,7 +384,9 @@ test('[DOCUMENT_FLOW]: should be able to approve a document', async ({ page }) =
       await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
     }
 
-    await page.getByRole('button', { name: 'Complete' }).click();
+    await page
+      .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Complete' : 'Approve' })
+      .click();
     await page
       .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Sign' : 'Approve' })
       .click();
@@ -454,7 +456,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a
   const { status } = await getDocumentByToken(token);
   expect(status).toBe(DocumentStatus.PENDING);
 
-  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Approve' }).click();
   await expect(page.getByRole('dialog').getByText('Complete Approval').first()).toBeVisible();
   await page.getByRole('button', { name: 'Approve' }).click();
 

packages/ee/server-only/stripe/get-prices-by-plan.ts

@@ -4,15 +4,14 @@ import { stripe } from '@documenso/lib/server-only/stripe';
 type PlanType = (typeof STRIPE_PLAN_TYPE)[keyof typeof STRIPE_PLAN_TYPE];
 
 export const getPricesByPlan = async (plan: PlanType | PlanType[]) => {
-  const planTypes = typeof plan === 'string' ? [plan] : plan;
+  const planTypes: string[] = typeof plan === 'string' ? [plan] : plan;
 
-  const query = planTypes.map((planType) => `metadata['plan']:'${planType}'`).join(' OR ');
-
-  const { data: prices } = await stripe.prices.search({
-    query,
+  const prices = await stripe.prices.list({
     expand: ['data.product'],
     limit: 100,
   });
 
-  return prices.filter((price) => price.type === 'recurring');
+  return prices.data.filter(
+    (price) => price.type === 'recurring' && planTypes.includes(price.metadata.plan),
+  );
 };

packages/ee/server-only/util/is-community-plan.ts

@@ -0,0 +1,56 @@
+import { subscriptionsContainsActivePlan } from '@documenso/lib/utils/billing';
+import { prisma } from '@documenso/prisma';
+import type { Subscription } from '@documenso/prisma/client';
+
+import { getCommunityPlanPriceIds } from '../stripe/get-community-plan-prices';
+
+export type IsCommunityPlanOptions = {
+  userId: number;
+  teamId?: number;
+};
+
+/**
+ * Whether the user or team is on the community plan.
+ */
+export const isCommunityPlan = async ({
+  userId,
+  teamId,
+}: IsCommunityPlanOptions): Promise<boolean> => {
+  let subscriptions: Subscription[] = [];
+
+  if (teamId) {
+    subscriptions = await prisma.team
+      .findFirstOrThrow({
+        where: {
+          id: teamId,
+        },
+        select: {
+          owner: {
+            include: {
+              subscriptions: true,
+            },
+          },
+        },
+      })
+      .then((team) => team.owner.subscriptions);
+  } else {
+    subscriptions = await prisma.user
+      .findFirstOrThrow({
+        where: {
+          id: userId,
+        },
+        select: {
+          subscriptions: true,
+        },
+      })
+      .then((user) => user.subscriptions);
+  }
+
+  if (subscriptions.length === 0) {
+    return false;
+  }
+
+  const communityPlanPriceIds = await getCommunityPlanPriceIds();
+
+  return subscriptionsContainsActivePlan(subscriptions, communityPlanPriceIds);
+};

packages/lib/server-only/document/complete-document-with-token.ts

@@ -12,6 +12,7 @@ import {
   WebhookTriggerEvents,
 } from '@documenso/prisma/client';
 
+import { AppError, AppErrorCode } from '../../errors/app-error';
 import { jobs } from '../../jobs/client';
 import type { TRecipientActionAuth } from '../../types/document-auth';
 import {
@@ -72,6 +73,13 @@ export const completeDocumentWithToken = async ({
     throw new Error(`Recipient ${recipient.id} has already signed`);
   }
 
+  if (recipient.signingStatus === SigningStatus.REJECTED) {
+    throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
+      message: 'Recipient has already rejected the document',
+      statusCode: 400,
+    });
+  }
+
   if (document.documentMeta?.signingOrder === DocumentSigningOrder.SEQUENTIAL) {
     const isRecipientsTurn = await getIsRecipientsTurnToSign({ token: recipient.token });
 

packages/lib/server-only/document/find-documents.ts

@@ -88,6 +88,7 @@ export const findDocuments = async ({
   const searchFilter: Prisma.DocumentWhereInput = {
     OR: [
       { title: { contains: query, mode: 'insensitive' } },
+      { externalId: { contains: query, mode: 'insensitive' } },
       { recipients: { some: { name: { contains: query, mode: 'insensitive' } } } },
       { recipients: { some: { email: { contains: query, mode: 'insensitive' } } } },
     ],

packages/lib/server-only/document/search-documents-with-keyword.ts

@@ -34,6 +34,14 @@ export const searchDocumentsWithKeyword = async ({
           userId: userId,
           deletedAt: null,
         },
+        {
+          externalId: {
+            contains: query,
+            mode: 'insensitive',
+          },
+          userId: userId,
+          deletedAt: null,
+        },
         {
           recipients: {
             some: {
@@ -88,6 +96,23 @@ export const searchDocumentsWithKeyword = async ({
           },
           deletedAt: null,
         },
+        {
+          externalId: {
+            contains: query,
+            mode: 'insensitive',
+          },
+          teamId: {
+            not: null,
+          },
+          team: {
+            members: {
+              some: {
+                userId: userId,
+              },
+            },
+          },
+          deletedAt: null,
+        },
       ],
     },
     include: {

packages/lib/server-only/template/create-document-from-template.ts

@@ -1,3 +1,5 @@
+import { match } from 'ts-pattern';
+
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
 import type { DocumentDistributionMethod } from '@documenso/prisma/client';
@@ -17,7 +19,20 @@ import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
 import { ZRecipientAuthOptionsSchema } from '../../types/document-auth';
 import type { TDocumentEmailSettings } from '../../types/document-email';
-import { ZFieldMetaSchema } from '../../types/field-meta';
+import type {
+  TCheckboxFieldMeta,
+  TDropdownFieldMeta,
+  TFieldMetaPrefillFieldsSchema,
+  TNumberFieldMeta,
+  TRadioFieldMeta,
+  TTextFieldMeta,
+} from '../../types/field-meta';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZFieldMetaSchema,
+  ZRadioFieldMeta,
+} from '../../types/field-meta';
 import {
   ZWebhookDocumentSchema,
   mapDocumentToWebhookDocumentPayload,
@@ -50,6 +65,7 @@ export type CreateDocumentFromTemplateOptions = {
     email: string;
     signingOrder?: number | null;
   }[];
+  prefillFields?: TFieldMetaPrefillFieldsSchema[];
   customDocumentDataId?: string;
 
   /**
@@ -72,6 +88,165 @@ export type CreateDocumentFromTemplateOptions = {
   requestMetadata: ApiRequestMetadata;
 };
 
+const getUpdatedFieldMeta = (field: Field, prefillField?: TFieldMetaPrefillFieldsSchema) => {
+  if (!prefillField) {
+    return field.fieldMeta;
+  }
+
+  const advancedField = ['NUMBER', 'RADIO', 'CHECKBOX', 'DROPDOWN', 'TEXT'].includes(field.type);
+
+  if (!advancedField) {
+    throw new AppError(AppErrorCode.INVALID_BODY, {
+      message: `Field ${field.id} is not an advanced field and cannot have field meta information. Allowed types: NUMBER, RADIO, CHECKBOX, DROPDOWN, TEXT.`,
+    });
+  }
+
+  // We've already validated that the field types match at a higher level
+  // Start with the existing field meta or an empty object
+  const existingMeta = field.fieldMeta || {};
+
+  // Apply type-specific updates based on the prefill field type using ts-pattern
+  return match(prefillField)
+    .with({ type: 'text' }, (field) => {
+      if (typeof field.value !== 'string') {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid value for TEXT field ${field.id}: expected string, got ${typeof field.value}`,
+        });
+      }
+
+      const meta: TTextFieldMeta = {
+        ...existingMeta,
+        type: 'text',
+        label: field.label,
+        text: field.value,
+      };
+
+      return meta;
+    })
+    .with({ type: 'number' }, (field) => {
+      if (typeof field.value !== 'string') {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid value for NUMBER field ${field.id}: expected string, got ${typeof field.value}`,
+        });
+      }
+
+      const meta: TNumberFieldMeta = {
+        ...existingMeta,
+        type: 'number',
+        label: field.label,
+        value: field.value,
+      };
+
+      return meta;
+    })
+    .with({ type: 'radio' }, (field) => {
+      if (typeof field.value !== 'string') {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid value for RADIO field ${field.id}: expected string, got ${typeof field.value}`,
+        });
+      }
+
+      const result = ZRadioFieldMeta.safeParse(existingMeta);
+
+      if (!result.success) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid field meta for RADIO field ${field.id}`,
+        });
+      }
+
+      const radioMeta = result.data;
+
+      // Validate that the value exists in the options
+      const valueExists = radioMeta.values?.some((option) => option.value === field.value);
+
+      if (!valueExists) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Value "${field.value}" not found in options for RADIO field ${field.id}`,
+        });
+      }
+
+      const newValues = radioMeta.values?.map((option) => ({
+        ...option,
+        checked: option.value === field.value,
+      }));
+
+      const meta: TRadioFieldMeta = {
+        ...existingMeta,
+        type: 'radio',
+        label: field.label,
+        values: newValues,
+      };
+
+      return meta;
+    })
+    .with({ type: 'checkbox' }, (field) => {
+      const result = ZCheckboxFieldMeta.safeParse(existingMeta);
+
+      if (!result.success) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid field meta for CHECKBOX field ${field.id}`,
+        });
+      }
+
+      const checkboxMeta = result.data;
+
+      // Validate that all values exist in the options
+      for (const value of field.value) {
+        const valueExists = checkboxMeta.values?.some((option) => option.value === value);
+
+        if (!valueExists) {
+          throw new AppError(AppErrorCode.INVALID_BODY, {
+            message: `Value "${value}" not found in options for CHECKBOX field ${field.id}`,
+          });
+        }
+      }
+
+      const newValues = checkboxMeta.values?.map((option) => ({
+        ...option,
+        checked: field.value.includes(option.value),
+      }));
+
+      const meta: TCheckboxFieldMeta = {
+        ...existingMeta,
+        type: 'checkbox',
+        label: field.label,
+        values: newValues,
+      };
+
+      return meta;
+    })
+    .with({ type: 'dropdown' }, (field) => {
+      const result = ZDropdownFieldMeta.safeParse(existingMeta);
+
+      if (!result.success) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Invalid field meta for DROPDOWN field ${field.id}`,
+        });
+      }
+
+      const dropdownMeta = result.data;
+
+      // Validate that the value exists in the options if values are defined
+      const valueExists = dropdownMeta.values?.some((option) => option.value === field.value);
+
+      if (!valueExists) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `Value "${field.value}" not found in options for DROPDOWN field ${field.id}`,
+        });
+      }
+
+      const meta: TDropdownFieldMeta = {
+        ...existingMeta,
+        type: 'dropdown',
+        label: field.label,
+        defaultValue: field.value,
+      };
+
+      return meta;
+    })
+    .otherwise(() => field.fieldMeta);
+};
+
 export const createDocumentFromTemplate = async ({
   templateId,
   externalId,
@@ -81,6 +256,7 @@ export const createDocumentFromTemplate = async ({
   customDocumentDataId,
   override,
   requestMetadata,
+  prefillFields,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
     where: {
@@ -258,6 +434,47 @@ export const createDocumentFromTemplate = async ({
 
     let fieldsToCreate: Omit<Field, 'id' | 'secondaryId' | 'templateId'>[] = [];
 
+    // Get all template field IDs first so we can validate later
+    const allTemplateFieldIds = finalRecipients.flatMap((recipient) =>
+      recipient.fields.map((field) => field.id),
+    );
+
+    if (prefillFields?.length) {
+      // Validate that all prefill field IDs exist in the template
+      const invalidFieldIds = prefillFields
+        .map((prefillField) => prefillField.id)
+        .filter((id) => !allTemplateFieldIds.includes(id));
+
+      if (invalidFieldIds.length > 0) {
+        throw new AppError(AppErrorCode.INVALID_BODY, {
+          message: `The following field IDs do not exist in the template: ${invalidFieldIds.join(', ')}`,
+        });
+      }
+
+      // Validate that all prefill fields have the correct type
+      for (const prefillField of prefillFields) {
+        const templateField = finalRecipients
+          .flatMap((recipient) => recipient.fields)
+          .find((field) => field.id === prefillField.id);
+
+        if (!templateField) {
+          // This should never happen due to the previous validation, but just in case
+          throw new AppError(AppErrorCode.INVALID_BODY, {
+            message: `Field with ID ${prefillField.id} not found in the template`,
+          });
+        }
+
+        const expectedType = templateField.type.toLowerCase();
+        const actualType = prefillField.type;
+
+        if (expectedType !== actualType) {
+          throw new AppError(AppErrorCode.INVALID_BODY, {
+            message: `Field type mismatch for field ${prefillField.id}: expected ${expectedType}, got ${actualType}`,
+          });
+        }
+      }
+    }
+
     Object.values(finalRecipients).forEach(({ email, fields }) => {
       const recipient = document.recipients.find((recipient) => recipient.email === email);
 
@@ -266,19 +483,25 @@ export const createDocumentFromTemplate = async ({
       }
 
       fieldsToCreate = fieldsToCreate.concat(
-        fields.map((field) => ({
-          documentId: document.id,
-          recipientId: recipient.id,
-          type: field.type,
-          page: field.page,
-          positionX: field.positionX,
-          positionY: field.positionY,
-          width: field.width,
-          height: field.height,
-          customText: '',
-          inserted: false,
-          fieldMeta: field.fieldMeta,
-        })),
+        fields.map((field) => {
+          const prefillField = prefillFields?.find((value) => value.id === field.id);
+          // Use type assertion to help TypeScript understand the structure
+          const updatedFieldMeta = getUpdatedFieldMeta(field, prefillField);
+
+          return {
+            documentId: document.id,
+            recipientId: recipient.id,
+            type: field.type,
+            page: field.page,
+            positionX: field.positionX,
+            positionY: field.positionY,
+            width: field.width,
+            height: field.height,
+            customText: '',
+            inserted: false,
+            fieldMeta: updatedFieldMeta,
+          };
+        }),
       );
     });
 

packages/lib/types/field-meta.ts

@@ -123,6 +123,42 @@ export const ZFieldMetaNotOptionalSchema = z.discriminatedUnion('type', [
 
 export type TFieldMetaNotOptionalSchema = z.infer<typeof ZFieldMetaNotOptionalSchema>;
 
+export const ZFieldMetaPrefillFieldsSchema = z
+  .object({
+    id: z.number(),
+  })
+  .and(
+    z.discriminatedUnion('type', [
+      z.object({
+        type: z.literal('text'),
+        label: z.string(),
+        value: z.string(),
+      }),
+      z.object({
+        type: z.literal('number'),
+        label: z.string(),
+        value: z.string(),
+      }),
+      z.object({
+        type: z.literal('radio'),
+        label: z.string(),
+        value: z.string(),
+      }),
+      z.object({
+        type: z.literal('checkbox'),
+        label: z.string(),
+        value: z.array(z.string()),
+      }),
+      z.object({
+        type: z.literal('dropdown'),
+        label: z.string(),
+        value: z.string(),
+      }),
+    ]),
+  );
+
+export type TFieldMetaPrefillFieldsSchema = z.infer<typeof ZFieldMetaPrefillFieldsSchema>;
+
 export const ZFieldMetaSchema = z
   .union([
     // Handles an empty object being provided as fieldMeta.

packages/prisma/migrations/20250217120859_add_session_fields/migration.sql

@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `expires` on the `Session` table. All the data in the column will be lost.
+  - Added the required column `expiresAt` to the `Session` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `updatedAt` to the `Session` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Account" ADD COLUMN     "password" TEXT;
+
+-- AlterTable
+ALTER TABLE "Session" DROP COLUMN "expires",
+ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "expiresAt" TIMESTAMP(3) NOT NULL,
+ADD COLUMN     "ipAddress" TEXT,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL,
+ADD COLUMN     "userAgent" TEXT;

packages/prisma/schema.prisma

@@ -270,18 +270,25 @@ model Account {
   scope             String?
   id_token          String? @db.Text
   session_state     String?
+  password          String?
 
-  user User? @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 
   @@unique([provider, providerAccountId])
 }
 
 model Session {
-  id           String   @id @default(cuid())
-  sessionToken String   @unique
+  id           String @id @default(cuid())
+  sessionToken String @unique
   userId       Int
-  expires      DateTime
-  user         User?    @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  ipAddress String?
+  userAgent String?
+  expiresAt DateTime
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  user User? @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 enum DocumentStatus {

packages/prisma/seed/initial-seed.ts

@@ -5,6 +5,18 @@ import { hashSync } from '@documenso/lib/server-only/auth/hash';
 
 import { prisma } from '..';
 import { DocumentDataType, DocumentSource, Role, TeamMemberRole } from '../client';
+import { seedPendingDocument } from './documents';
+import { seedDirectTemplate, seedTemplate } from './templates';
+
+const createDocumentData = async ({ documentData }: { documentData: string }) => {
+  return prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: documentData,
+      initialData: documentData,
+    },
+  });
+};
 
 export const seedDatabase = async () => {
   const examplePdf = fs
@@ -39,35 +51,80 @@ export const seedDatabase = async () => {
     update: {},
   });
 
-  const examplePdfData = await prisma.documentData.upsert({
-    where: {
-      id: 'clmn0kv5k0000pe04vcqg5zla',
-    },
-    create: {
-      id: 'clmn0kv5k0000pe04vcqg5zla',
-      type: DocumentDataType.BYTES_64,
-      data: examplePdf,
-      initialData: examplePdf,
-    },
-    update: {},
-  });
+  for (let i = 1; i <= 4; i++) {
+    const documentData = await createDocumentData({ documentData: examplePdf });
 
-  await prisma.document.create({
-    data: {
-      source: DocumentSource.DOCUMENT,
-      title: 'Example Document',
-      documentDataId: examplePdfData.id,
-      userId: exampleUser.id,
-      recipients: {
-        create: {
-          name: String(adminUser.name),
-          email: adminUser.email,
-          token: Math.random().toString(36).slice(2, 9),
+    await prisma.document.create({
+      data: {
+        source: DocumentSource.DOCUMENT,
+        title: `Example Document ${i}`,
+        documentDataId: documentData.id,
+        userId: exampleUser.id,
+        recipients: {
+          create: {
+            name: String(adminUser.name),
+            email: adminUser.email,
+            token: Math.random().toString(36).slice(2, 9),
+          },
         },
       },
+    });
+  }
+
+  for (let i = 1; i <= 4; i++) {
+    const documentData = await createDocumentData({ documentData: examplePdf });
+
+    await prisma.document.create({
+      data: {
+        source: DocumentSource.DOCUMENT,
+        title: `Document ${i}`,
+        documentDataId: documentData.id,
+        userId: adminUser.id,
+        recipients: {
+          create: {
+            name: String(exampleUser.name),
+            email: exampleUser.email,
+            token: Math.random().toString(36).slice(2, 9),
+          },
+        },
+      },
+    });
+  }
+
+  await seedPendingDocument(exampleUser, [adminUser], {
+    key: 'example-pending',
+    createDocumentOptions: {
+      title: 'Pending Document',
     },
   });
 
+  await seedPendingDocument(adminUser, [exampleUser], {
+    key: 'admin-pending',
+    createDocumentOptions: {
+      title: 'Pending Document',
+    },
+  });
+
+  await Promise.all([
+    seedTemplate({
+      title: 'Template 1',
+      userId: exampleUser.id,
+    }),
+    seedDirectTemplate({
+      title: 'Direct Template 1',
+      userId: exampleUser.id,
+    }),
+
+    seedTemplate({
+      title: 'Template 1',
+      userId: adminUser.id,
+    }),
+    seedDirectTemplate({
+      title: 'Direct Template 1',
+      userId: adminUser.id,
+    }),
+  ]);
+
   const testUsers = [
     'test@documenso.com',
     'test2@documenso.com',

packages/trpc/server/template-router/router.ts

@@ -227,7 +227,8 @@ export const templateRouter = router({
     .output(ZCreateDocumentFromTemplateResponseSchema)
     .mutation(async ({ ctx, input }) => {
       const { teamId } = ctx;
-      const { templateId, recipients, distributeDocument, customDocumentDataId } = input;
+      const { templateId, recipients, distributeDocument, customDocumentDataId, prefillFields } =
+        input;
 
       const limits = await getServerLimits({ email: ctx.user.email, teamId });
 
@@ -242,6 +243,7 @@ export const templateRouter = router({
         recipients,
         customDocumentDataId,
         requestMetadata: ctx.metadata,
+        prefillFields,
       });
 
       if (distributeDocument) {

packages/trpc/server/template-router/schema.ts

@@ -6,6 +6,7 @@ import {
   ZDocumentActionAuthTypesSchema,
 } from '@documenso/lib/types/document-auth';
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
+import { ZFieldMetaPrefillFieldsSchema } from '@documenso/lib/types/field-meta';
 import { ZFindResultResponse, ZFindSearchParamsSchema } from '@documenso/lib/types/search-params';
 import {
   ZTemplateLiteSchema,
@@ -67,6 +68,7 @@ export const ZCreateDocumentFromTemplateRequestSchema = z.object({
       'The data ID of an alternative PDF to use when creating the document. If not provided, the PDF attached to the template will be used.',
     )
     .optional(),
+  prefillFields: z.array(ZFieldMetaPrefillFieldsSchema).optional(),
 });
 
 export const ZCreateDocumentFromTemplateResponseSchema = ZDocumentSchema;

packages/ui/components/field/field.tsx

@@ -31,7 +31,8 @@ const getCardClassNames = (
   checkBoxOrRadio: boolean,
   cardClassName?: string,
 ) => {
-  const baseClasses = 'field-card-container relative z-20 h-full w-full transition-all';
+  const baseClasses =
+    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
 
   const insertedClasses =
     'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
@@ -141,6 +142,7 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
       <Card
         id={`field-${field.id}`}
         ref={ref}
+        data-field-type={field.type}
         data-inserted={field.inserted ? 'true' : 'false'}
         className={cardClassNames}
       >

packages/ui/primitives/document-flow/field-item.tsx

@@ -12,6 +12,7 @@ import { match } from 'ts-pattern';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { ZCheckboxFieldMeta, ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
+import { FieldType } from '@documenso/prisma/client';
 
 import { useSignerColors } from '../../lib/signer-colors';
 import { cn } from '../../lib/utils';
@@ -185,11 +186,35 @@ export const FieldItem = ({
     () => hasFieldMetaValues('CHECKBOX', field.fieldMeta, ZCheckboxFieldMeta),
     [field.fieldMeta],
   );
+
   const radioHasValues = useMemo(
     () => hasFieldMetaValues('RADIO', field.fieldMeta, ZRadioFieldMeta),
     [field.fieldMeta],
   );
 
+  const hasCheckedValues = (fieldMeta: TFieldMetaSchema, type: FieldType) => {
+    if (!fieldMeta || (type !== FieldType.RADIO && type !== FieldType.CHECKBOX)) {
+      return false;
+    }
+
+    if (type === FieldType.RADIO) {
+      const parsed = ZRadioFieldMeta.parse(fieldMeta);
+      return parsed.values?.some((value) => value.checked) ?? false;
+    }
+
+    if (type === FieldType.CHECKBOX) {
+      const parsed = ZCheckboxFieldMeta.parse(fieldMeta);
+      return parsed.values?.some((value) => value.checked) ?? false;
+    }
+
+    return false;
+  };
+
+  const fieldHasCheckedValues = useMemo(
+    () => hasCheckedValues(field.fieldMeta, field.type),
+    [field.fieldMeta, field.type],
+  );
+
   const fixedSize = checkBoxHasValues || radioHasValues;
 
   return createPortal(
@@ -229,6 +254,21 @@ export const FieldItem = ({
         onMove?.(d.node);
       }}
     >
+      {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
+        field.fieldMeta?.label && (
+          <div
+            className={cn(
+              'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
+              {
+                'bg-foreground/5 border-primary border': !fieldHasCheckedValues,
+                'bg-documenso-200 border-primary border': fieldHasCheckedValues,
+              },
+            )}
+          >
+            {field.fieldMeta.label}
+          </div>
+        )}
+
       <div
         className={cn(
           'relative flex h-full w-full items-center justify-center bg-white',

packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx

@@ -126,6 +126,18 @@ export const CheckboxFieldAdvancedSettings = ({
 
   return (
     <div className="flex flex-col gap-4">
+      <div className="mb-2">
+        <Label>
+          <Trans>Label</Trans>
+        </Label>
+        <Input
+          id="label"
+          className="bg-background mt-2"
+          placeholder={_(msg`Field label`)}
+          value={fieldState.label}
+          onChange={(e) => handleFieldChange('label', e.target.value)}
+        />
+      </div>
       <div className="flex flex-row items-center gap-x-4">
         <div className="flex w-2/3 flex-col">
           <Label>

packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx

@@ -105,8 +105,12 @@ export const DropdownFieldAdvancedSettings = ({
           <Trans>Select default option</Trans>
         </Label>
         <Select
-          defaultValue={defaultValue}
+          value={defaultValue}
           onValueChange={(val) => {
+            if (!val) {
+              return;
+            }
+
             setDefaultValue(val);
             handleFieldChange('defaultValue', val);
           }}
@@ -172,7 +176,7 @@ export const DropdownFieldAdvancedSettings = ({
               />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center  text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(index)}
               >
                 <Trash className="h-5 w-5" />

packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect, useState } from 'react';
 
-import { Trans } from '@lingui/macro';
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
 import { ChevronDown, ChevronUp, Trash } from 'lucide-react';
 
 import { validateRadioField } from '@documenso/lib/advanced-fields-validation/validate-radio';
@@ -27,6 +28,8 @@ export const RadioFieldAdvancedSettings = ({
   handleFieldChange,
   handleErrors,
 }: RadioFieldAdvancedSettingsProps) => {
+  const { _ } = useLingui();
+
   const [showValidation, setShowValidation] = useState(false);
   const [values, setValues] = useState(
     fieldState.values ?? [{ id: 1, checked: false, value: 'Default value' }],
@@ -102,6 +105,18 @@ export const RadioFieldAdvancedSettings = ({
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
+        <div>
+          <Label>
+            <Trans>Label</Trans>
+          </Label>
+          <Input
+            id="label"
+            className="bg-background mt-2"
+            placeholder={_(msg`Field label`)}
+            value={fieldState.label}
+            onChange={(e) => handleFieldChange('label', e.target.value)}
+          />
+        </div>
         <div className="flex flex-row items-center gap-2">
           <Switch
             className="bg-background"

packages/ui/primitives/document-flow/field-items-advanced-settings/text-field.tsx

@@ -126,7 +126,13 @@ export const TextFieldAdvancedSettings = ({
 
         <Select
           value={fieldState.textAlign}
-          onValueChange={(value) => handleInput('textAlign', value)}
+          onValueChange={(value) => {
+            if (!value) {
+              return;
+            }
+
+            handleInput('textAlign', value);
+          }}
         >
           <SelectTrigger className="bg-background mt-2">
             <SelectValue placeholder="Select text align" />