v1.7.0

Introduces `NEXT_PRIVATE_INTERNAL_WEBAPP_URL` used for requesting the
app by itself (backend) [e.g. for background jobs]

.env.example

@@ -27,6 +27,8 @@ NEXT_PRIVATE_OIDC_SKIP_VERIFY=""
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
+# URL used by the web app to request itself (e.g. local background jobs)
+NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"

.github/workflows/e2e-tests.yml

@@ -32,6 +32,9 @@ jobs:
 
       - name: Run Playwright tests
         run: npm run ci
+        env:
+          # Needed since we use next start which will set the NODE_ENV to production
+          NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH: './example/cert.p12'
 
       - uses: actions/upload-artifact@v4
         if: always()

README.md

@@ -303,6 +303,10 @@ WantedBy=multi-user.target
 
 [![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
 
+## Elestio
+
+[![Deploy on Elestio](https://elest.io/images/logos/deploy-to-elestio-btn.png)](https://elest.io/open-source/documenso)
+
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

apps/documentation/pages/developers/local-development/_meta.json

@@ -3,5 +3,6 @@
   "quickstart": "Developer Quickstart",
   "manual": "Manual Setup",
   "gitpod": "Gitpod",
-  "signing-certificate": "Signing Certificate"
+  "signing-certificate": "Signing Certificate",
+  "translations": "Translations"
 }

apps/documentation/pages/developers/local-development/translations.mdx

@@ -0,0 +1,128 @@
+---
+title: Translations
+description: Handling translations in code.
+---
+
+# About
+
+Documenso uses the following stack to handle translations:
+
+- [Lingui](https://lingui.dev/) - React i10n library
+- [Crowdin](https://crowdin.com/) - Handles syncing translations
+- [OpenAI](https://openai.com/) - Provides AI translations
+
+Additional reading can be found in the [Lingui documentation](https://lingui.dev/introduction).
+
+## Requirements
+
+You **must** insert **`setupI18nSSR()`** when creating any of the following files:
+
+- Server layout.tsx
+- Server page.tsx
+- Server loading.tsx
+
+Server meaning it does not have `'use client'` in it.
+
+```tsx
+import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
+
+export default function SomePage() {
+  setupI18nSSR(); // Required if there are translations within the page, or nested in components.
+
+  // Rest of code...
+}
+```
+
+Additional information can be found [here.](https://lingui.dev/tutorials/react-rsc#pages-layouts-and-lingui)
+
+## Quick guide
+
+If you require more in-depth information, please see the [Lingui documentation](https://lingui.dev/introduction).
+
+### HTML
+
+Wrap all text to translate in **`<Trans></Trans>`** tags exported from **@lingui/macro** (not @lingui/react).
+
+```html
+<h1>
+  <Trans>Title</Trans>
+</h1>
+```
+
+For text that is broken into elements, but represent a whole sentence, you must wrap it in a Trans tag so ensure the full message is extracted correctly.
+
+```html
+<h1>
+  <Trans>
+    This is one
+    <span className="text-foreground/60">full</span>
+    <a href="https://documenso.com">sentence</a>
+  </Trans>
+</h1>
+```
+
+### Constants outside of react components
+
+```tsx
+import { Trans, msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+// Wrap text in msg`text to translate` when it's in a constant here, or another file/package.
+export const CONSTANT_WITH_MSG = {
+  foo: msg`Hello`,
+  bar: msg`World`,
+};
+
+export const SomeComponent = () => {
+  const { _ } = useLingui();
+
+  return (
+    <div>
+      {/* This will render the correct translated text. */}
+      <p>{_(CONSTANT_WITH_MSG.foo)}</p>
+    </div>
+  );
+};
+```
+
+### Plurals
+
+Lingui provides a Plural component to make it easy. See full documentation [here.](https://lingui.dev/ref/macro#plural-1)
+
+```tsx
+// Basic usage.
+<Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+```
+
+### Dates
+
+Lingui provides a [DateTime instance](https://lingui.dev/ref/core#i18n.date) with the configured locale.
+
+#### Server components
+
+Note that the i18n instance is coming from **setupI18nSSR**.
+
+```tsx
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  const { i18n } = setupI18nSSR();
+
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```
+
+#### Client components
+
+Note that the i18n instance is coming from the **import**.
+
+```tsx
+import { i18n } from '@lingui/core';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+
+export const SomeComponent = () => {
+  return <Trans>The current date is {i18n.date(new Date(), { dateStyle: 'short' })}</Trans>;
+};
+```

apps/marketing/content/blog/introducing-embedding.mdx

@@ -0,0 +1,72 @@
+---
+title: 'Introducing Embedding Support for Documenso'
+description: 'Embedding is now here! Learn how we built it and how it can be used to bring e-signing to your own applications.'
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2024-09-06
+tags:
+  - Development
+---
+
+When we first launched Documenso, one of the most requested features was embedding. We knew it was important and aligned with our desire to not just be a e-signing application but to instead provide the e-signature infrastructure for the web and beyond.
+
+With that said, we decided to hold off initially so we could focus on building a solid, well-featured core application. Looking back, this was definitely the right call. Embedding is only as good as the features behind it, and we didn't want to release something that wasn't ready to meet user and developer expectations.
+
+Over the past year, we've been busy adding tons of new features and reaching new levels of compliance, like 21 CFR Part 11. We've also introduced [new fields](/blog/introducing-advanced-signing-fields), [built out an API](/blog/public-api), [added webhooks, integrations with Zapier](/blog/launch-week-2-day-4), and a lot more.
+
+Now that we've laid a solid foundation, it's finally time to focus on embedding, the top-requested feature from both our users and those self-hosting our platform.
+
+## Why Embedding Took Time
+
+In previous projects, I’ve often seen embedding built by bundling components for use in a client’s website or app. This method gives users maximum flexibility for styling and behavior, while avoiding certain cross-origin issues. However, it can also introduce problems like code conflicts or performance bottlenecks. For example, third-party tools such as Google Tag Manager (GTM) or other marketing scripts can interfere with your SDK. Additionally, the SDK must remain lightweight to avoid slowing down the client’s page.
+
+For Documenso, we decided to explore a different approach. After carefully researching our options, we opted for an iframe-based solution. While iframes are typically less flexible—especially when it comes to theming or passing pre-filled data containing personally identifiable information (PII)—we identified ways to mitigate these concerns.
+
+One of the biggest challenges was ensuring that we could pass sensitive data, like emails for pre-filling forms, without exposing PII to our server. To solve this, we used [fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) in the URL, which are processed client-side and never sent in network requests. This method ensures that PII is protected and not logged by our server or any intermediate web services.
+
+### Using the PostMessage API for Communication
+
+To maintain a high level of interactivity, our iframes communicate with the parent window using the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). This allows us to notify the parent app when specific events occur inside the iframe, creating a more dynamic user experience and bridging the gap between our iframe-based solution and typical fat SDKs.
+
+Additionally, props are passed into the iframe via the [fragment identifier](https://developer.mozilla.org/en-US/docs/Web/API/URL/hash) of the URL. This avoids the need for complex two-way data synchronization between the parent and child frames, making the system stable and more reliable.
+
+### Building the Embeds with Mitosis
+
+Given that our iframe solution is quite lightweight, we saw this as a great opportunity to experiment with [Mitosis](https://mitosis.builder.io/) which would let us do something truly special. For those unfamiliar, Mitosis is a project by Builder.io that lets you write components once and then transpile them into a variety of frameworks like React, Vue, and Svelte.
+
+We used Mitosis to build two key components: a direct template embed and a document signing embed. The direct template allows users to use a template as if it were an evergreen document—meaning that, when someone completes the template, a new document is automatically generated. This is the use case we expect most users to adopt for embedding. For more advanced workflows, we also offer a document signing embed, which can handle multi-recipient workflows and other complex scenarios intended for use in deeper, rich integrations.
+
+Mitosis allowed us to quickly target several popular frameworks, including [React](https://www.npmjs.com/package/@documenso/embed-react), [Preact](https://www.npmjs.com/package/@documenso/embed-preact), [Vue](https://www.npmjs.com/package/@documenso/embed-vue), [Svelte](https://www.npmjs.com/package/@documenso/embed-svelte), and [SolidJS](https://www.npmjs.com/package/@documenso/embed-solid).
+
+I had also hoped to include Angular, but while Mitosis makes it really easy to transpile component, we still have to take care of bundling and packaging the resulting component ourselves. While the above frameworks can all be bundled using Vite.js, Angular still has it's own set of tooling that we would need to learn and use. Given this constraint we opted to put Angular on hold for now while we wait for the newer Vite.js support to mature.
+
+### Challenges and Lessons with Mitosis and more
+
+While our experience with Mitosis was largely positive, there were some challenges along the way. For instance, certain state properties with the same names as props caused issues during the transpilation process, leading to type errors and unexpected transpilation results with some targets.
+
+This was also a challenge since our initial implementation of the two components had some minor separation of concerns which also resulted in some transpilation issues with some targets. We addressed this by removing the separation of concerns for now since it was mostly for show rather than out of necessity.
+
+On top of that, packaging and publishing the embeds posed its own set of challenges, particularly given the growing complexity of JavaScript package management. Tools like [Publint](https://www.npmjs.com/package/publint) helped streamline the process by ensuring we followed best practices for both CommonJS and ESM formats.
+
+### To the Future, The Documenso Platform
+
+With the embedding feature now in place, we're excited to continue expanding Documenso's capabilities. Embeds are just the beginning of what we're calling the Documenso platform. Through our user research, we've learned that while many businesses appreciate having a flexible e-signature solution, they're even more interested in using our tools to build signing functionality directly into their own apps—without worrying about the technical complexities of compliance and security that come with e-signing.
+
+Over the coming months, we'll be working on enhancing our API, strengthening integrations with tools like Zapier, and improving our webhook system. Our goal is to give users the ability to embed e-signatures and document management wherever they need it, whether that's through self-hosting or by using Documenso as a platform. We can't wait to see how our users and self-hosters leverage these new capabilities!
+
+### Ready to Get Started?
+
+If you're ready to embed document signing into your own app or website, check out our [Embedding Documentation](https://docs.documenso.com/developers/embedding?utm_source=blog&utm_campaign=introducing-embedding) to see how easy it is to get started. You'll find everything you need to get started today!
+
+<video
+  src="/blog/introducing-embedding/embedding-demo.mp4"
+  className="aspect-video w-full"
+  autoPlay
+  loop
+  controls
+/>
+
+We're always here to help! If you have questions or need support, join our [Discord](https://documen.so/discord) or [book a demo](https://documen.so/book-a-demo). We'd love to hear how you're using Documenso or wanting to use Documenso to enhance your workflow.
+
+Stay tuned for more updates as we continue to evolve the Documenso platform and make it even easier to bring document signing into your workflows.

apps/marketing/content/changelog.mdx

@@ -8,6 +8,80 @@ Check out what's new in the latest version and read our thoughts on it. For more
 
 ---
 
+# Documenso v1.7.0: Embedded Signing, Copy and Paste, and More
+
+We're thrilled to announce the release of Documenso v1.7.0, packed with exciting new features and improvements that enhance document signing flexibility, user experience, and global accessibility.
+
+We're excited to see what you'll create with this release and we'd love to hear your feedback. Let's dive into the highlights:
+
+## 🌟 Key Features
+
+### Embedded Signing Experience
+
+Take your document signing to the next level with our new embedded signing feature. Now you can seamlessly integrate Documenso's signing process directly into your own website or application, providing a smooth, branded experience for your users.
+
+<video
+  src="/blog/introducing-embedding/embedding-demo.mp4"
+  className="aspect-video w-full"
+  controls
+/>
+
+Check out our [Embedding documentation](https://docs.documenso.com/developers/embedding) to learn more about how to get started.
+
+### Copy and Paste Fields
+
+Streamline your document preparation with our new copy and paste functionality for fields. This feature allows you to quickly duplicate fields across your document, saving time and ensuring consistency in your templates.
+
+### Customizable Signature Colors
+
+Recipients can now select a signature color from our list of available colors, supporting workflows where specific colors are required for each recipient, location, or document.
+
+### Enhanced Internationalization (i18n)
+
+Following on from our last release we've now expanded our i18n support to the main web application. We haven't yet added support for any additional languages but that will be coming quickly now that we have completed the hard work of wrapping all of our content in our new i18n system.
+
+These enhancements make Documenso more accessible to users worldwide.
+
+## 🔧 Other Improvements
+
+- **API Enhancements**:
+
+  - New endpoint to prefill fields via API
+  - Updated createFields API endpoint for more flexibility
+  - Automatically set public profile URL for OIDC users
+
+- **Security and Performance**:
+
+  - Document sealing moved to a background job for improved performance
+  - Disable 2FA with backup codes for enhanced account recovery options
+  - Extended lifespan for invites and confirmations
+
+- **User Experience**:
+
+  - Updated email templates to reflect team-specific information
+  - Fixed issues with dialog closing on page refresh
+  - Improved field editing in document templates
+
+- **Other Items**:
+  - Added Elestio as a one-click deploy option
+  - Updated README for manual self-hosting
+  - New environment variable for internal webapp URL configuration
+
+## 📚 New Content
+
+- [Advanced fields article to help you make the most of Documenso's capabilities](/blog/introducing-advanced-signing-fields)
+- [Embedding blog post to guide you through how we implemented embedding](/blog/introducing-embedding)
+
+## 👏 Community Contributions
+
+A big thank you to our vibrant community! This release includes contributions from several new contributors, further enriching Documenso's capabilities.
+
+We're excited to see how you'll use these new features to streamline your document workflows. As always, we appreciate your feedback and support in making Documenso the best open-source document signing solution available.
+
+Enjoy exploring v1.7.0!
+
+---
+
 # Documenso v1.6.1: Internationalization, Enhanced OIDC, and More
 
 We're excited to announce the release of Documenso v1.6.1, which brings several improvements to enhance your document signing experience. Here are the key updates:

apps/marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.7.0-rc.4",
+  "version": "1.7.0",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/marketing/process-env.d.ts

@@ -2,6 +2,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     NEXT_PUBLIC_WEBAPP_URL?: string;
     NEXT_PUBLIC_MARKETING_URL?: string;
+    NEXT_PRIVATE_INTERNAL_WEBAPP_URL?:string;
     
     NEXT_PRIVATE_DATABASE_URL: string;
 

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.7.0-rc.4",
+  "version": "1.7.0",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {

apps/web/process-env.d.ts

@@ -2,6 +2,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     NEXT_PUBLIC_WEBAPP_URL?: string;
     NEXT_PUBLIC_MARKETING_URL?: string;
+    NEXT_PRIVATE_INTERNAL_WEBAPP_URL?:string;
 
     NEXT_PRIVATE_DATABASE_URL: string;
 

docker/README.md

@@ -74,6 +74,7 @@ docker run -d \
   -e NEXT_PRIVATE_ENCRYPTION_KEY="<your-next-private-encryption-key>"
   -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="<your-next-private-encryption-secondary-key>"
   -e NEXT_PUBLIC_WEBAPP_URL="<your-next-public-webapp-url>"
+  -e NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
   -e NEXT_PRIVATE_DATABASE_URL="<your-next-private-database-url>"
   -e NEXT_PRIVATE_DIRECT_DATABASE_URL="<your-next-private-database-url>"
   -e NEXT_PRIVATE_SMTP_TRANSPORT="<your-next-private-smtp-transport>"

docker/production/compose.yml

@@ -29,6 +29,7 @@ services:
       - NEXT_PRIVATE_GOOGLE_CLIENT_ID=${NEXT_PRIVATE_GOOGLE_CLIENT_ID}
       - NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=${NEXT_PRIVATE_GOOGLE_CLIENT_SECRET}
       - NEXT_PUBLIC_WEBAPP_URL=${NEXT_PUBLIC_WEBAPP_URL:?err}
+      - NEXT_PRIVATE_INTERNAL_WEBAPP_URL=${NEXT_PRIVATE_INTERNAL_WEBAPP_URL:-http://localhost:$PORT}
       - NEXT_PUBLIC_MARKETING_URL=${NEXT_PUBLIC_MARKETING_URL:-https://documenso.com}
       - NEXT_PRIVATE_DATABASE_URL=${NEXT_PRIVATE_DATABASE_URL:?err}
       - NEXT_PRIVATE_DIRECT_DATABASE_URL=${NEXT_PRIVATE_DIRECT_DATABASE_URL:-${NEXT_PRIVATE_DATABASE_URL}}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.7.0-rc.4",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.7.0-rc.4",
+      "version": "1.7.0",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -80,7 +80,7 @@
     },
     "apps/marketing": {
       "name": "@documenso/marketing",
-      "version": "1.7.0-rc.4",
+      "version": "1.7.0",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/assets": "*",
@@ -424,7 +424,7 @@
     },
     "apps/web": {
       "name": "@documenso/web",
-      "version": "1.7.0-rc.4",
+      "version": "1.7.0",
       "license": "AGPL-3.0",
       "dependencies": {
         "@documenso/api": "*",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.7.0-rc.4",
+  "version": "1.7.0",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",

packages/api/v1/implementation.ts

@@ -1050,7 +1050,8 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
   updateField: authenticatedMiddleware(async (args, user, team) => {
     const { id: documentId, fieldId } = args.params;
-    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY } = args.body;
+    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY, fieldMeta } =
+      args.body;
 
     const document = await getDocumentById({
       id: Number(documentId),
@@ -1112,6 +1113,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
       pageWidth,
       pageHeight,
       requestMetadata: extractNextApiRequestMetadata(args.req),
+      fieldMeta: fieldMeta ? ZFieldMetaSchema.parse(fieldMeta) : undefined,
     });
 
     const remappedField = {

packages/lib/constants/app.ts

@@ -6,6 +6,7 @@ export const APP_DOCUMENT_UPLOAD_SIZE_LIMIT =
 
 export const NEXT_PUBLIC_WEBAPP_URL = () => env('NEXT_PUBLIC_WEBAPP_URL');
 export const NEXT_PUBLIC_MARKETING_URL = () => env('NEXT_PUBLIC_MARKETING_URL');
+export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL = process.env.NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? NEXT_PUBLIC_WEBAPP_URL();
 
 export const IS_APP_MARKETING = process.env.NEXT_PUBLIC_PROJECT === 'marketing';
 export const IS_APP_WEB = process.env.NEXT_PUBLIC_PROJECT === 'web';

packages/lib/jobs/client/local.ts

@@ -6,7 +6,7 @@ import { json } from 'micro';
 import { prisma } from '@documenso/prisma';
 import { BackgroundJobStatus, Prisma } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { sign } from '../../server-only/crypto/sign';
 import { verify } from '../../server-only/crypto/verify';
 import {
@@ -229,7 +229,7 @@ export class LocalJobProvider extends BaseJobProvider {
   }) {
     const { jobId, jobDefinitionId, data, isRetry } = options;
 
-    const endpoint = `${NEXT_PUBLIC_WEBAPP_URL()}/api/jobs/${jobDefinitionId}/${jobId}`;
+    const endpoint = `${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/jobs/${jobDefinitionId}/${jobId}`;
     const signature = sign(data);
 
     const headers: Record<string, string> = {

packages/lib/server-only/feature-flags/all.ts

@@ -5,7 +5,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 import { extractDistinctUserId, mapJwtToFlagProperties } from './get';
 
 /**
@@ -46,6 +46,10 @@ export default async function handlerFeatureFlagAll(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/feature-flags/get.ts

@@ -7,7 +7,7 @@ import { getToken } from 'next-auth/jwt';
 import { LOCAL_FEATURE_FLAGS, extractPostHogConfig } from '@documenso/lib/constants/feature-flags';
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
 
-import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL, NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../constants/app';
 
 /**
  * Evaluate a single feature flag based on the current user if possible.
@@ -67,6 +67,10 @@ export default async function handleFeatureFlagGet(req: Request) {
     if (origin.startsWith(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001')) {
       res.headers.set('Access-Control-Allow-Origin', origin);
     }
+    
+    if (origin.startsWith(NEXT_PRIVATE_INTERNAL_WEBAPP_URL ?? 'http://localhost:3000')) {
+      res.headers.set('Access-Control-Allow-Origin', origin);
+    }
   }
 
   return res;

packages/lib/server-only/field/update-field.ts

@@ -65,6 +65,11 @@ export const updateField = async ({
     },
   });
 
+  const newFieldMeta = {
+    ...(oldField.fieldMeta as FieldMeta),
+    ...fieldMeta,
+  };
+
   const field = prisma.$transaction(async (tx) => {
     const updatedField = await tx.field.update({
       where: {
@@ -78,36 +83,13 @@ export const updateField = async ({
         positionY: pageY,
         width: pageWidth,
         height: pageHeight,
-        fieldMeta,
+        fieldMeta: newFieldMeta,
       },
       include: {
         Recipient: true,
       },
     });
 
-    await tx.documentAuditLog.create({
-      data: createDocumentAuditLogData({
-        type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
-        documentId,
-        user: {
-          id: team?.id ?? user.id,
-          email: team?.name ?? user.email,
-          name: team ? '' : user.name,
-        },
-        data: {
-          fieldId: updatedField.secondaryId,
-          fieldRecipientEmail: updatedField.Recipient?.email ?? '',
-          fieldRecipientId: recipientId ?? -1,
-          fieldType: updatedField.type,
-          changes: diffFieldChanges(oldField, updatedField),
-        },
-        requestMetadata,
-      }),
-    });
-
-    return updatedField;
-  });
-
     const user = await prisma.user.findFirstOrThrow({
       where: {
         id: userId,
@@ -134,5 +116,28 @@ export const updateField = async ({
       });
     }
 
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
+        documentId,
+        user: {
+          id: team?.id ?? user.id,
+          email: team?.name ?? user.email,
+          name: team ? '' : user.name,
+        },
+        data: {
+          fieldId: updatedField.secondaryId,
+          fieldRecipientEmail: updatedField.Recipient?.email ?? '',
+          fieldRecipientId: recipientId ?? -1,
+          fieldType: updatedField.type,
+          changes: diffFieldChanges(oldField, updatedField),
+        },
+        requestMetadata,
+      }),
+    });
+
+    return updatedField;
+  });
+
   return field;
 };

packages/lib/server-only/webhooks/trigger/trigger-webhook.ts

@@ -1,6 +1,6 @@
 import type { WebhookTriggerEvents } from '@documenso/prisma/client';
 
-import { NEXT_PUBLIC_WEBAPP_URL } from '../../../constants/app';
+import { NEXT_PRIVATE_INTERNAL_WEBAPP_URL } from '../../../constants/app';
 import { sign } from '../../crypto/sign';
 import { getAllWebhooksByEventTrigger } from '../get-all-webhooks-by-event-trigger';
 
@@ -29,7 +29,7 @@ export const triggerWebhook = async ({ event, data, userId, teamId }: TriggerWeb
     const signature = sign(body);
 
     await Promise.race([
-      fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/api/webhook/trigger`, {
+      fetch(`${NEXT_PRIVATE_INTERNAL_WEBAPP_URL}/api/webhook/trigger`, {
         method: 'POST',
         headers: {
           'content-type': 'application/json',

packages/lib/translations/de/common.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
@@ -116,7 +116,7 @@ msgid "Advanced Options"
 msgstr "Erweiterte Optionen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:369
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
 msgid "Advanced settings"
 msgstr "Erweiterte Einstellungen"
 
@@ -140,6 +140,14 @@ msgstr "Genehmiger"
 msgid "Approving"
 msgstr "Genehmigung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr ""
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -167,7 +175,7 @@ msgid "Character Limit"
 msgstr "Zeichenbeschränkung"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -179,7 +187,7 @@ msgstr "Checkbox-Werte"
 msgid "Clear filters"
 msgstr "Filter löschen"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"
 
@@ -196,7 +204,7 @@ msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
 msgid "Configure the {0} field"
 msgstr "Konfigurieren Sie das Feld {0}"
 
@@ -213,7 +221,7 @@ msgid "Custom Text"
 msgstr "Benutzerdefinierter Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:651
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
 msgid "Date"
 msgstr "Datum"
 
@@ -245,7 +253,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -257,7 +265,7 @@ msgstr "Dropdown-Optionen"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:599
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -312,6 +320,10 @@ msgstr "Globale Empfängerauthentifizierung"
 msgid "Go Back"
 msgstr "Zurück"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "Ich bin ein Unterzeichner dieses Dokuments"
@@ -367,7 +379,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -386,12 +398,12 @@ msgid "Needs to view"
 msgstr "Muss sehen"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:464
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
 msgid "No recipient matching this description was found."
 msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:480
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
 msgid "No recipients with this role"
 msgstr "Keine Empfänger mit dieser Rolle"
 
@@ -416,7 +428,7 @@ msgid "No value found."
 msgstr "Kein Wert gefunden."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
 msgid "Number"
 msgstr "Nummer"
 
@@ -451,7 +463,7 @@ msgid "Placeholder"
 msgstr "Platzhalter"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
 msgid "Radio"
 msgstr "Radio"
 
@@ -477,6 +489,10 @@ msgstr "Erhält Kopie"
 msgid "Recipient action authentication"
 msgstr "Empfängeraktion Authentifizierung"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -502,7 +518,7 @@ msgstr "Zeilen pro Seite"
 msgid "Save"
 msgstr "Speichern"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:797
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
 msgid "Save Template"
 msgstr "Vorlage speichern"
 
@@ -552,7 +568,7 @@ msgstr "Unterschreiben"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:547
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
 msgid "Signature"
 msgstr "Unterschrift"
 
@@ -598,7 +614,7 @@ msgid "Template title"
 msgstr "Vorlagentitel"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
 msgid "Text"
 msgstr "Text"
 
@@ -733,6 +749,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr ""
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "Sie sind dabei, dieses Dokument an die Empfänger zu senden. Sind Sie sicher, dass Sie fortfahren möchten?"

packages/lib/translations/de/marketing.po

@@ -8,7 +8,7 @@ msgstr ""
 "Language: de\n"
 "Project-Id-Version: documenso-app\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2024-08-27 16:03\n"
+"PO-Revision-Date: 2024-09-05 06:04\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"

packages/lib/translations/en/common.po

@@ -111,7 +111,7 @@ msgid "Advanced Options"
 msgstr "Advanced Options"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:510
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:369
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
 msgid "Advanced settings"
 msgstr "Advanced settings"
 
@@ -135,6 +135,14 @@ msgstr "Approver"
 msgid "Approving"
 msgstr "Approving"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:276
+msgid "Black"
+msgstr "Black"
+
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:290
+msgid "Blue"
+msgstr "Blue"
+
 #: packages/ui/primitives/document-flow/field-item-advanced-settings.tsx:297
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:58
 msgid "Cancel"
@@ -162,7 +170,7 @@ msgid "Character Limit"
 msgstr "Character Limit"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:932
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:755
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:756
 msgid "Checkbox"
 msgstr "Checkbox"
 
@@ -174,7 +182,7 @@ msgstr "Checkbox values"
 msgid "Clear filters"
 msgstr "Clear filters"
 
-#: packages/ui/primitives/signature-pad/signature-pad.tsx:256
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:310
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
@@ -191,7 +199,7 @@ msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:511
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:370
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:371
 msgid "Configure the {0} field"
 msgstr "Configure the {0} field"
 
@@ -208,7 +216,7 @@ msgid "Custom Text"
 msgstr "Custom Text"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:828
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:651
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:652
 msgid "Date"
 msgstr "Date"
 
@@ -240,7 +248,7 @@ msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:958
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:781
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:782
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -252,7 +260,7 @@ msgstr "Dropdown options"
 #: packages/ui/primitives/document-flow/add-signature.tsx:272
 #: packages/ui/primitives/document-flow/add-signers.tsx:232
 #: packages/ui/primitives/document-flow/add-signers.tsx:239
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:599
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:600
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:210
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:217
 msgid "Email"
@@ -307,6 +315,10 @@ msgstr "Global recipient action authentication"
 msgid "Go Back"
 msgstr "Go Back"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:297
+msgid "Green"
+msgstr "Green"
+
 #: packages/lib/constants/recipient-roles.ts:72
 msgid "I am a signer of this document"
 msgstr "I am a signer of this document"
@@ -362,7 +374,7 @@ msgstr "Min"
 #: packages/ui/primitives/document-flow/add-fields.tsx:802
 #: packages/ui/primitives/document-flow/add-signature.tsx:298
 #: packages/ui/primitives/document-flow/add-signers.tsx:265
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:625
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:626
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:245
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx:251
 msgid "Name"
@@ -381,12 +393,12 @@ msgid "Needs to view"
 msgstr "Needs to view"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:613
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:464
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:465
 msgid "No recipient matching this description was found."
 msgstr "No recipient matching this description was found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:629
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:480
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:481
 msgid "No recipients with this role"
 msgstr "No recipients with this role"
 
@@ -411,7 +423,7 @@ msgid "No value found."
 msgstr "No value found."
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:880
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:703
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:704
 msgid "Number"
 msgstr "Number"
 
@@ -446,7 +458,7 @@ msgid "Placeholder"
 msgstr "Placeholder"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:906
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:729
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:730
 msgid "Radio"
 msgstr "Radio"
 
@@ -472,6 +484,10 @@ msgstr "Receives copy"
 msgid "Recipient action authentication"
 msgstr "Recipient action authentication"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:283
+msgid "Red"
+msgstr "Red"
+
 #: packages/ui/primitives/document-flow/add-settings.tsx:298
 #: packages/ui/primitives/template-flow/add-template-settings.tsx:332
 msgid "Redirect URL"
@@ -497,7 +513,7 @@ msgstr "Rows per page"
 msgid "Save"
 msgstr "Save"
 
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:797
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:798
 msgid "Save Template"
 msgstr "Save Template"
 
@@ -547,7 +563,7 @@ msgstr "Sign"
 #: packages/ui/primitives/document-flow/add-fields.tsx:724
 #: packages/ui/primitives/document-flow/add-signature.tsx:323
 #: packages/ui/primitives/document-flow/field-icon.tsx:52
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:547
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:548
 msgid "Signature"
 msgstr "Signature"
 
@@ -593,7 +609,7 @@ msgid "Template title"
 msgstr "Template title"
 
 #: packages/ui/primitives/document-flow/add-fields.tsx:854
-#: packages/ui/primitives/template-flow/add-template-fields.tsx:677
+#: packages/ui/primitives/template-flow/add-template-fields.tsx:678
 msgid "Text"
 msgstr "Text"
 
@@ -728,6 +744,10 @@ msgstr "Viewer"
 msgid "Viewing"
 msgstr "Viewing"
 
+#: packages/ui/primitives/signature-pad/signature-pad.tsx:280
+#~ msgid "White"
+#~ msgstr "White"
+
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx:44
 msgid "You are about to send this document to the recipients. Are you sure you want to continue?"
 msgstr "You are about to send this document to the recipients. Are you sure you want to continue?"

packages/signing/transports/local-cert.ts

@@ -28,9 +28,18 @@ export const signWithLocalCert = async ({ pdf }: SignWithLocalCertOptions) => {
   }
 
   if (!cert) {
-    cert = Buffer.from(
+    let certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || '/opt/documenso/cert.p12';
-      fs.readFileSync(process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12'),
+
-    );
+    // We don't want to make the development server suddenly crash when using the `dx` script
+    // so we retain this when NODE_ENV isn't set to production which it should be in most production
+    // deployments.
+    //
+    // Our docker image automatically sets this so it shouldn't be an issue for self-hosters.
+    if (process.env.NODE_ENV !== 'production') {
+      certPath = process.env.NEXT_PRIVATE_SIGNING_LOCAL_FILE_PATH || './example/cert.p12';
+    }
+
+    cert = Buffer.from(fs.readFileSync(certPath));
   }
 
   const signature = signWithP12({

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -9,6 +9,13 @@ import type { StrokeOptions } from 'perfect-freehand';
 import { getStroke } from 'perfect-freehand';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
 
 import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
@@ -36,6 +43,7 @@ export const SignaturePad = ({
   const [isPressed, setIsPressed] = useState(false);
   const [lines, setLines] = useState<Point[][]>([]);
   const [currentLine, setCurrentLine] = useState<Point[]>([]);
+  const [selectedColor, setSelectedColor] = useState('black');
 
   const perfectFreehandOptions = useMemo(() => {
     const size = $el.current ? Math.min($el.current.height, $el.current.width) * 0.03 : 10;
@@ -85,6 +93,7 @@ export const SignaturePad = ({
           ctx.restore();
           ctx.imageSmoothingEnabled = true;
           ctx.imageSmoothingQuality = 'high';
+          ctx.fillStyle = selectedColor;
 
           lines.forEach((line) => {
             const pathData = new Path2D(
@@ -129,6 +138,7 @@ export const SignaturePad = ({
 
         ctx.imageSmoothingEnabled = true;
         ctx.imageSmoothingQuality = 'high';
+        ctx.fillStyle = selectedColor;
 
         newLines.forEach((line) => {
           const pathData = new Path2D(
@@ -237,7 +247,13 @@ export const SignaturePad = ({
     >
       <canvas
         ref={$el}
-        className={cn('relative block dark:invert', className)}
+        className={cn(
+          'relative block',
+          {
+            'dark:hue-rotate-180 dark:invert': selectedColor === 'black',
+          },
+          className,
+        )}
         style={{ touchAction: 'none' }}
         onPointerMove={(event) => onMouseMove(event)}
         onPointerDown={(event) => onMouseDown(event)}
@@ -247,6 +263,44 @@ export const SignaturePad = ({
         {...props}
       />
 
+      <div className="text-foreground absolute right-2 top-2 filter">
+        <Select defaultValue={selectedColor} onValueChange={(value) => setSelectedColor(value)}>
+          <SelectTrigger className="h-auto w-auto border-none p-1">
+            <SelectValue placeholder="" />
+          </SelectTrigger>
+
+          <SelectContent className="w-[150px]" align="end">
+            <SelectItem value="black">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-black shadow-sm" />
+                <Trans>Black</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="red">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[red] shadow-sm" />
+                <Trans>Red</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="blue">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[blue] shadow-sm" />
+                <Trans>Blue</Trans>
+              </div>
+            </SelectItem>
+
+            <SelectItem value="green">
+              <div className="text-muted-foreground flex items-center px-1 text-sm">
+                <div className="border-border mr-2 h-5 w-5 rounded-full border-2 bg-[green] shadow-sm" />
+                <Trans>Green</Trans>
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       <div className="absolute bottom-4 right-4 flex gap-2">
         <button
           type="button"

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -112,6 +112,7 @@ export const AddTemplateFieldsFormPartial = ({
           recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
         signerToken:
           recipients.find((recipient) => recipient.id === field.recipientId)?.token ?? '',
+        fieldMeta: field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined,
       })),
     },
   });

render.yaml

@@ -43,6 +43,8 @@ services:
           envVarKey: RENDER_EXTERNAL_URL
       - key: NEXT_PUBLIC_MARKETING_URL
         value: 'http://localhost:3001'
+      - key: NEXT_PRIVATE_INTERNAL_WEBAPP_URL
+        value: 'http://localhost:10000'
 
       # SMTP
       - key: NEXT_PRIVATE_SMTP_TRANSPORT

turbo.json

@@ -48,6 +48,7 @@
     "NEXT_PUBLIC_PROJECT",
     "NEXT_PUBLIC_WEBAPP_URL",
     "NEXT_PUBLIC_MARKETING_URL",
+    "NEXT_PRIVATE_INTERNAL_WEBAPP_URL",
     "NEXT_PUBLIC_POSTHOG_KEY",
     "NEXT_PUBLIC_FEATURE_BILLING_ENABLED",
     "NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID",