fix: checkbox error

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -106,6 +106,7 @@ export const DirectTemplateConfigureForm = ({
               directTemplateRecipient.fields,
               recipientsWithBlankDirectRecipientEmail,
             )}
+            recipientIds={recipients.map((recipient) => recipient.id)}
             showRecipientColors={true}
           />
         )}

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -97,6 +97,11 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      // Do nothing, since the user clicked on a non checkbox area.
+      if (checkedValues.length === 0) {
+        return;
+      }
+
       const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,

apps/remix/app/routes/_authenticated+/documents.$id._index.tsx

@@ -206,6 +206,7 @@ export default function DocumentPage() {
             documentMeta={documentMeta || undefined}
             showRecipientTooltip={true}
             showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
           />
         )}
 

apps/remix/app/routes/_authenticated+/templates.$id._index.tsx

@@ -153,6 +153,7 @@ export default function TemplatePage() {
           showFieldStatus={false}
           showRecipientTooltip={true}
           showRecipientColors={true}
+          recipientIds={recipients.map((recipient) => recipient.id)}
           documentMeta={mockedDocumentMeta}
         />
 

packages/ui/components/document/document-read-only-fields.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -18,7 +18,7 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
 
-import { buildRecipientsColorMap } from '../../lib/recipient-colors';
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
 import { FieldContent } from '../../primitives/document-flow/field-content';
 
 export type DocumentReadOnlyFieldsProps = {
@@ -27,6 +27,14 @@ export type DocumentReadOnlyFieldsProps = {
 
   showFieldStatus?: boolean;
 
+  /**
+   * Required if you want to show colors.
+   *
+   * Can't derive this from the fields because sometimes recipients don't have fields
+   * yet.
+   */
+  recipientIds?: number[];
+
   /**
    * Whether to show the recipient tooltip.
    *
@@ -61,6 +69,7 @@ export const mapFieldsWithRecipients = (
 export const DocumentReadOnlyFields = ({
   documentMeta,
   fields,
+  recipientIds = [],
   showFieldStatus = true,
   showRecipientTooltip = false,
   showRecipientColors = false,
@@ -73,17 +82,6 @@ export const DocumentReadOnlyFields = ({
     setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
   };
 
-  /**
-   * Create a map of recipient IDs to their color styles.
-   */
-  const recipientColors = useMemo(() => {
-    if (!showRecipientColors) {
-      return {};
-    }
-
-    return buildRecipientsColorMap(fields);
-  }, [fields, showRecipientColors]);
-
   return (
     <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
       {fields.map(
@@ -92,7 +90,16 @@ export const DocumentReadOnlyFields = ({
             <FieldRootContainer
               field={field}
               key={field.id}
-              color={recipientColors[field.recipientId]}
+              color={
+                showRecipientColors
+                  ? getRecipientColorStyles(
+                      Math.max(
+                        recipientIds.findIndex((id) => id === field.recipientId),
+                        0,
+                      ),
+                    )
+                  : undefined
+              }
             >
               {showRecipientTooltip && (
                 <div className="absolute -right-3 -top-3">

packages/ui/lib/recipient-colors.ts

@@ -2,7 +2,8 @@
 // !: therefore doing this at runtime is not possible without whitelisting a set of classnames.
 // !:
 // !: This will later be improved as we move to a CSS variable approach and rotate the lightness
-import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
+
+export type RecipientColorMap = Record<number, RecipientColorStyles>;
 
 export type RecipientColorStyles = {
   base: string;
@@ -92,20 +93,3 @@ export const getRecipientColorStyles = (index: number) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   return useRecipientColors(index);
 };
-
-export type RecipientColorMap = Record<number, RecipientColorStyles>;
-
-export const buildRecipientsColorMap = (fields: DocumentField[]): RecipientColorMap => {
-  // Unique recipient IDs sorted from lowest to highest.
-  const recipientIds = [...new Set(fields.map((field) => field.recipientId))].sort();
-
-  return recipientIds.reduce(
-    (acc, recipientId, index) => {
-      acc[recipientId] = getRecipientColorStyles(index);
-
-      return acc;
-    },
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    {} as RecipientColorMap,
-  );
-};

packages/ui/primitives/document-flow/add-settings.tsx

@@ -151,6 +151,7 @@ export const AddSettingsFormPartial = ({
         {isDocumentPdfLoaded && (
           <DocumentReadOnlyFields
             showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
             fields={mapFieldsWithRecipients(fields, recipients)}
           />
         )}

packages/ui/primitives/document-flow/add-signers.tsx

@@ -367,6 +367,7 @@ export const AddSignersFormPartial = ({
         {isDocumentPdfLoaded && (
           <DocumentReadOnlyFields
             showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
             fields={mapFieldsWithRecipients(fields, recipients)}
           />
         )}

packages/ui/primitives/document-flow/add-subject.tsx

@@ -107,6 +107,7 @@ export const AddSubjectFormPartial = ({
           {isDocumentPdfLoaded && (
             <DocumentReadOnlyFields
               showRecipientColors={true}
+              recipientIds={recipients.map((recipient) => recipient.id)}
               fields={mapFieldsWithRecipients(fields, recipients)}
             />
           )}

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -392,6 +392,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
         {isDocumentPdfLoaded && (
           <DocumentReadOnlyFields
             showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
             fields={mapFieldsWithRecipients(fields, recipients)}
           />
         )}

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

@@ -152,6 +152,7 @@ export const AddTemplateSettingsFormPartial = ({
         {isDocumentPdfLoaded && (
           <DocumentReadOnlyFields
             showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
             fields={mapFieldsWithRecipients(fields, recipients)}
           />
         )}