diff --git a/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx b/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx index 626c2c332..39272b3b1 100644 --- a/apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx +++ b/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} /> )} diff --git a/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx index 54da41439..221d4a979 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx +++ b/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, diff --git a/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx b/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx index c4f5cabd9..4e6ff6a0a 100644 --- a/apps/remix/app/routes/_authenticated+/documents.$id._index.tsx +++ b/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)} /> )} diff --git a/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx b/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx index 6ee752f6a..e315b87cc 100644 --- a/apps/remix/app/routes/_authenticated+/templates.$id._index.tsx +++ b/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} /> diff --git a/packages/ui/components/document/document-read-only-fields.tsx b/packages/ui/components/document/document-read-only-fields.tsx index d5557c471..a1f0bc8a3 100644 --- a/packages/ui/components/document/document-read-only-fields.tsx +++ b/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 ( {fields.map( @@ -92,7 +90,16 @@ export const DocumentReadOnlyFields = ({ id === field.recipientId), + 0, + ), + ) + : undefined + } > {showRecipientTooltip && (
diff --git a/packages/ui/lib/recipient-colors.ts b/packages/ui/lib/recipient-colors.ts index 8b301a33f..6a9c30227 100644 --- a/packages/ui/lib/recipient-colors.ts +++ b/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; 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; - -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, - ); -}; diff --git a/packages/ui/primitives/document-flow/add-settings.tsx b/packages/ui/primitives/document-flow/add-settings.tsx index 41d49055d..07e64a107 100644 --- a/packages/ui/primitives/document-flow/add-settings.tsx +++ b/packages/ui/primitives/document-flow/add-settings.tsx @@ -151,6 +151,7 @@ export const AddSettingsFormPartial = ({ {isDocumentPdfLoaded && ( recipient.id)} fields={mapFieldsWithRecipients(fields, recipients)} /> )} diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx index 25fae4c09..429e60703 100644 --- a/packages/ui/primitives/document-flow/add-signers.tsx +++ b/packages/ui/primitives/document-flow/add-signers.tsx @@ -367,6 +367,7 @@ export const AddSignersFormPartial = ({ {isDocumentPdfLoaded && ( recipient.id)} fields={mapFieldsWithRecipients(fields, recipients)} /> )} diff --git a/packages/ui/primitives/document-flow/add-subject.tsx b/packages/ui/primitives/document-flow/add-subject.tsx index 4ffc96638..69467db6e 100644 --- a/packages/ui/primitives/document-flow/add-subject.tsx +++ b/packages/ui/primitives/document-flow/add-subject.tsx @@ -107,6 +107,7 @@ export const AddSubjectFormPartial = ({ {isDocumentPdfLoaded && ( recipient.id)} fields={mapFieldsWithRecipients(fields, recipients)} /> )} diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx index a5ecfc854..92086e0e0 100644 --- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx +++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx @@ -392,6 +392,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({ {isDocumentPdfLoaded && ( recipient.id)} fields={mapFieldsWithRecipients(fields, recipients)} /> )} diff --git a/packages/ui/primitives/template-flow/add-template-settings.tsx b/packages/ui/primitives/template-flow/add-template-settings.tsx index 7cc16c3eb..097dc806c 100644 --- a/packages/ui/primitives/template-flow/add-template-settings.tsx +++ b/packages/ui/primitives/template-flow/add-template-settings.tsx @@ -152,6 +152,7 @@ export const AddTemplateSettingsFormPartial = ({ {isDocumentPdfLoaded && ( recipient.id)} fields={mapFieldsWithRecipients(fields, recipients)} /> )}