diff --git a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx index 148117b55..14fe95c44 100644 --- a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx +++ b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx @@ -181,6 +181,23 @@ export const DocumentSigningFieldContainer = ({ )} + {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) && + field.fieldMeta?.label && ( +
+ {field.fieldMeta.label} +
+ )} + {children} diff --git a/packages/ui/primitives/document-flow/field-item.tsx b/packages/ui/primitives/document-flow/field-item.tsx index 3682f84a2..e78cf7429 100644 --- a/packages/ui/primitives/document-flow/field-item.tsx +++ b/packages/ui/primitives/document-flow/field-item.tsx @@ -8,6 +8,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'; @@ -174,11 +175,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( @@ -218,6 +243,21 @@ export const FieldItem = ({ onMove?.(d.node); }} > + {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) && + field.fieldMeta?.label && ( +
+ {field.fieldMeta.label} +
+ )} +
+
+ + handleFieldChange('label', e.target.value)} + /> +