chore: add translations

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -152,18 +152,6 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
-                    onChange={(e) => {
-                      const values = form.getValues();
-                      const characterLimit = values.characterLimit || 0;
-                      let textValue = e.target.value;
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        textValue = textValue.slice(0, characterLimit);
-                      }
-
-                      e.target.value = textValue;
-                      field.onChange(e);
-                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -187,18 +175,6 @@ export const EditorFieldTextForm = ({
                     className="bg-background"
                     placeholder={t`Field character limit`}
                     {...field}
-                    onChange={(e) => {
-                      field.onChange(e);
-
-                      const values = form.getValues();
-                      const characterLimit = parseInt(e.target.value, 10) || 0;
-
-                      const textValue = values.text || '';
-
-                      if (characterLimit > 0 && textValue.length > characterLimit) {
-                        form.setValue('text', textValue.slice(0, characterLimit));
-                      }
-                    }}
                   />
                 </FormControl>
                 <FormMessage />

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -13,7 +13,6 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   isFieldUnsignedAndRequired,
   isRequiredField,
@@ -52,11 +51,7 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (
+  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
-    _fieldId: number,
-    _value: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -289,11 +284,7 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (
+  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
-    fieldId: number,
-    fieldValue: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
       handleDirectTemplateFieldInsertion(fieldId, fieldValue);
@@ -304,7 +295,7 @@ export const EnvelopeSigningProvider = ({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions,
+      authOptions: undefined,
     });
   };
 

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -103,6 +103,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
+    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -27,8 +27,7 @@ import type {
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -113,29 +112,7 @@ export const EnvelopeEditorFieldsPage = () => {
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex flex-col items-center justify-center">
+        <div className="mt-4 flex h-full justify-center p-4">
-          {envelope.recipients.length === 0 && (
-            <Alert
-              variant="neutral"
-              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
-            >
-              <div className="flex flex-col gap-1">
-                <AlertTitle>
-                  <Trans>Missing Recipients</Trans>
-                </AlertTitle>
-                <AlertDescription>
-                  <Trans>You need at least one recipient to add fields</Trans>
-                </AlertDescription>
-              </div>
-
-              <Button asChild variant="outline">
-                <Link to={`${relativePath.editorPath}`}>
-                  <Trans>Add Recipients</Trans>
-                </Link>
-              </Button>
-            </Alert>
-          )}
-
           {currentEnvelopeItem !== null ? (
             <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
@@ -153,7 +130,7 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && envelope.recipients.length > 0 && (
+      {currentEnvelopeItem && (
         <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
@@ -161,15 +138,29 @@ export const EnvelopeEditorFieldsPage = () => {
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            <RecipientSelector
+            {envelope.recipients.length === 0 ? (
-              selectedRecipient={editorFields.selectedRecipient}
+              <Alert variant="warning">
-              onSelectedRecipientChange={(recipient) =>
+                <AlertDescription className="flex flex-col gap-2">
-                editorFields.setSelectedRecipient(recipient.id)
+                  <Trans>You need at least one recipient to add fields</Trans>
-              }
+
-              recipients={envelope.recipients}
+                  <Link to={`${relativePath.editorPath}`} className="text-sm">
-              className="w-full"
+                    <p>
-              align="end"
+                      <Trans>Click here to add a recipient</Trans>
-            />
+                    </p>
+                  </Link>
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <RecipientSelector
+                selectedRecipient={editorFields.selectedRecipient}
+                onSelectedRecipientChange={(recipient) =>
+                  editorFields.setSelectedRecipient(recipient.id)
+                }
+                recipients={envelope.recipients}
+                className="w-full"
+                align="end"
+              />
+            )}
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -323,7 +323,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="bg-accent/20 flex w-80 flex-col border-r">
+        <div className="flex w-80 flex-col border-r bg-gray-50">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -203,6 +203,7 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
+  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -10,17 +10,14 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
-import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
@@ -31,24 +28,20 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
-import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerPageRenderer() {
-  const { t, i18n } = useLingui();
+  const { i18n } = useLingui();
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
 
-  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
-  const { toast } = useToast();
-
   const {
     envelopeData,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField: signFieldInternal,
+    signField,
     email,
     setEmail,
     fullName,
@@ -325,6 +318,7 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
+          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -335,21 +329,11 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
+                await signField(field.id, payload);
+              }
 
-                if (payload.value) {
+              if (payload?.value) {
-                  void executeActionAuthProcedure({
+                setSignature(payload.value);
-                    onReauthFormSubmit: async (authOptions) => {
-                      await signField(field.id, payload, authOptions);
-
-                      loadingSpinnerGroup.destroy();
-                    },
-                    actionTarget: field.type,
-                  });
-
-                  setSignature(payload.value);
-                } else {
-                  await signField(field.id, payload);
-                }
               }
             })
             .finally(() => {
@@ -363,26 +347,6 @@ export default function EnvelopeSignerPageRenderer() {
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
-  const signField = async (
-    fieldId: number,
-    payload: TSignEnvelopeFieldValue,
-    authOptions?: TRecipientActionAuth,
-  ) => {
-    try {
-      await signFieldInternal(fieldId, payload, authOptions);
-    } catch (err) {
-      console.error(err);
-
-      toast({
-        title: t`Error`,
-        description: t`An error occurred while signing the field.`,
-        variant: 'destructive',
-      });
-
-      throw err;
-    }
-  };
-
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -78,6 +78,7 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
+    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);
@@ -168,6 +169,7 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
+    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -62,15 +62,16 @@ export const renderCheckboxFieldElement = (
     const rectWidth = fieldRect.width() * groupScaleX;
     const rectHeight = fieldRect.height() * groupScaleY;
 
+    // Todo: Envelopes - check sorting more than 10
+    // arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+
     const squares = fieldGroup
       .find('.checkbox-square')
-      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+      .sort((a, b) => a.id().localeCompare(b.id()));
     const checkmarks = fieldGroup
       .find('.checkbox-checkmark')
-      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+      .sort((a, b) => a.id().localeCompare(b.id()));
-    const text = fieldGroup
+    const text = fieldGroup.find('.checkbox-text').sort((a, b) => a.id().localeCompare(b.id()));
-      .find('.checkbox-text')
-      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
 
     const groupedItems = squares.map((square, i) => ({
       squareElement: square,

packages/lib/universal/field-renderer/render-field.ts

@@ -8,9 +8,9 @@ import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import type { TFieldMetaSchema } from '../../types/field-meta';
 import { renderCheckboxFieldElement } from './render-checkbox-field';
 import { renderDropdownFieldElement } from './render-dropdown-field';
-import { renderGenericTextFieldElement } from './render-generic-text-field';
 import { renderRadioFieldElement } from './render-radio-field';
 import { renderSignatureFieldElement } from './render-signature-field';
+import { renderTextFieldElement } from './render-text-field';
 
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
@@ -43,9 +43,9 @@ type RenderFieldOptions = {
    *
    * @default 'edit'
    *
-   * - `edit` - The field is rendered in editor page.
+   * - `edit` - The field is rendered in edit mode.
-   * - `sign` - The field is rendered for the signing page.
+   * - `sign` - The field is rendered in sign mode. No interactive elements.
-   * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
+   * - `export` - The field is rendered in export mode. No backgrounds, interactive elements, etc.
    */
   mode: 'edit' | 'sign' | 'export';
 
@@ -76,21 +76,10 @@ export const renderField = ({
   };
 
   return match(field.type)
-    .with(
+    .with(FieldType.TEXT, () => renderTextFieldElement(field, options))
-      FieldType.INITIALS,
-      FieldType.NAME,
-      FieldType.EMAIL,
-      FieldType.DATE,
-      FieldType.TEXT,
-      FieldType.NUMBER,
-      () => renderGenericTextFieldElement(field, options),
-    )
     .with(FieldType.CHECKBOX, () => renderCheckboxFieldElement(field, options))
     .with(FieldType.RADIO, () => renderRadioFieldElement(field, options))
     .with(FieldType.DROPDOWN, () => renderDropdownFieldElement(field, options))
     .with(FieldType.SIGNATURE, () => renderSignatureFieldElement(field, options))
-    .with(FieldType.FREE_SIGNATURE, () => {
+    .otherwise(() => renderTextFieldElement(field, options)); // Todo: Envelopes
-      throw new Error('Free signature fields are not supported');
-    })
-    .exhaustive();
 };

packages/lib/universal/field-renderer/render-text-field.ts

@@ -12,8 +12,6 @@ import {
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
-const DEFAULT_TEXT_ALIGN = 'left';
-
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
@@ -33,8 +31,8 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   // Calculate text positioning based on alignment
   const textX = 0;
   const textY = 0;
-  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || DEFAULT_TEXT_ALIGN;
+  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || 'left';
-  const textVerticalAlign: 'top' | 'middle' | 'bottom' = 'middle';
+  let textVerticalAlign: 'top' | 'middle' | 'bottom' = 'top';
   const textFontSize = textMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
   const textPadding = 10;
 
@@ -42,33 +40,51 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
 
   // Handle edit mode.
   if (mode === 'edit') {
-    if (textMeta?.text) {
+    textToRender = fieldTypeName;
-      textToRender = textMeta.text;
+    textAlign = 'center';
-    } else if (textMeta?.label) {
+    textVerticalAlign = 'middle';
+
+    if (textMeta?.label) {
       textToRender = textMeta.label;
-    } else {
+    } else if (textMeta?.text) {
-      // Show field name which is centered for the edit mode if no label/text is avaliable.
+      textToRender = textMeta.text;
-      textToRender = fieldTypeName;
+      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-      textAlign = 'center';
+
+      // Todo: Envelopes - Handle this on signatures
+      if (textMeta.characterLimit) {
+        textToRender = textToRender.slice(0, textMeta.characterLimit);
+      }
     }
   }
 
   // Handle sign mode.
   if (mode === 'sign' || mode === 'export') {
-    if (!field.inserted) {
+    textToRender = fieldTypeName;
-      if (textMeta?.text) {
+    textAlign = 'center';
-        textToRender = textMeta.text;
+    textVerticalAlign = 'middle';
-      } else if (textMeta?.label) {
+
-        textToRender = textMeta.label;
+    if (textMeta?.label) {
-      } else if (mode === 'sign') {
+      textToRender = textMeta.label;
-        // Only show the field name in sign mode if no text/label is avaliable.
+    }
-        textToRender = fieldTypeName;
+
-        textAlign = 'center';
+    if (textMeta?.text) {
+      textToRender = textMeta.text;
+      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
+
+      // Todo: Envelopes - Handle this on signatures
+      if (textMeta.characterLimit) {
+        textToRender = textToRender.slice(0, textMeta.characterLimit);
       }
     }
 
     if (field.inserted) {
       textToRender = field.customText;
+      textAlign = textMeta?.textAlign || 'center'; // Todo: Envelopes - What is the default
+
+      // Todo: Envelopes - Handle this on signatures
+      if (textMeta?.characterLimit) {
+        textToRender = textToRender.slice(0, textMeta.characterLimit);
+      }
     }
   }
 
@@ -90,7 +106,7 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   return fieldText;
 };
 
-export const renderGenericTextFieldElement = (
+export const renderTextFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {

packages/trpc/server/envelope-router/sign-envelope-field.ts

@@ -133,49 +133,6 @@ export const signEnvelopeFieldRoute = procedure
 
     const insertionValues = extractFieldInsertionValues({ fieldValue, field, documentMeta });
 
-    // Early return for uninserting fields.
-    if (!insertionValues.inserted) {
-      return await prisma.$transaction(async (tx) => {
-        const updatedField = await tx.field.update({
-          where: {
-            id: field.id,
-          },
-          data: {
-            customText: '',
-            inserted: false,
-          },
-        });
-
-        await tx.signature.deleteMany({
-          where: {
-            fieldId: field.id,
-          },
-        });
-
-        if (recipient.role !== RecipientRole.ASSISTANT) {
-          await tx.documentAuditLog.create({
-            data: createDocumentAuditLogData({
-              type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
-              envelopeId: envelope.id,
-              user: {
-                name: recipient.name,
-                email: recipient.email,
-              },
-              requestMetadata: metadata.requestMetadata,
-              data: {
-                field: field.type,
-                fieldId: field.secondaryId,
-              },
-            }),
-          });
-        }
-
-        return {
-          signedField: updatedField,
-        };
-      });
-    }
-
     const derivedRecipientActionAuth = await validateFieldAuth({
       documentAuthOptions: envelope.authOptions,
       recipient,