- >({});
+
+ const handleHideField = (fieldId: string) => {
+ setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
+ };
+
+ return (
+
+ {fields.map(
+ (field) =>
+ !hiddenFieldIds[field.secondaryId] && (
+
+
+ ),
+ )}
+
+ );
+};
diff --git a/packages/lib/server-only/field/get-completed-fields-for-document.ts b/packages/lib/server-only/field/get-completed-fields-for-document.ts
new file mode 100644
index 000000000..304be95ba
--- /dev/null
+++ b/packages/lib/server-only/field/get-completed-fields-for-document.ts
@@ -0,0 +1,29 @@
+import { prisma } from '@documenso/prisma';
+import { SigningStatus } from '@documenso/prisma/client';
+
+export type GetCompletedFieldsForDocumentOptions = {
+ documentId: number;
+};
+
+export const getCompletedFieldsForDocument = async ({
+ documentId,
+}: GetCompletedFieldsForDocumentOptions) => {
+ return await prisma.field.findMany({
+ where: {
+ documentId,
+ Recipient: {
+ signingStatus: SigningStatus.SIGNED,
+ },
+ inserted: true,
+ },
+ include: {
+ Signature: true,
+ Recipient: {
+ select: {
+ name: true,
+ email: true,
+ },
+ },
+ },
+ });
+};
diff --git a/packages/lib/server-only/field/get-completed-fields-for-token.ts b/packages/lib/server-only/field/get-completed-fields-for-token.ts
new file mode 100644
index 000000000..d84fa1343
--- /dev/null
+++ b/packages/lib/server-only/field/get-completed-fields-for-token.ts
@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+import { SigningStatus } from '@documenso/prisma/client';
+
+export type GetCompletedFieldsForTokenOptions = {
+ token: string;
+};
+
+export const getCompletedFieldsForToken = async ({ token }: GetCompletedFieldsForTokenOptions) => {
+ return await prisma.field.findMany({
+ where: {
+ Document: {
+ Recipient: {
+ some: {
+ token,
+ },
+ },
+ },
+ Recipient: {
+ signingStatus: SigningStatus.SIGNED,
+ },
+ inserted: true,
+ },
+ include: {
+ Signature: true,
+ Recipient: {
+ select: {
+ name: true,
+ email: true,
+ },
+ },
+ },
+ });
+};
diff --git a/packages/lib/server-only/template/create-document-from-template.ts b/packages/lib/server-only/template/create-document-from-template.ts
index 8ae5fecaf..79a3f6f25 100644
--- a/packages/lib/server-only/template/create-document-from-template.ts
+++ b/packages/lib/server-only/template/create-document-from-template.ts
@@ -89,6 +89,10 @@ export const createDocumentFromTemplate = async ({
const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
+ if (!documentRecipient) {
+ throw new Error('Recipient not found.');
+ }
+
return {
type: field.type,
page: field.page,
@@ -99,7 +103,7 @@ export const createDocumentFromTemplate = async ({
customText: field.customText,
inserted: field.inserted,
documentId: document.id,
- recipientId: documentRecipient?.id || null,
+ recipientId: documentRecipient.id,
};
}),
});
diff --git a/packages/lib/server-only/template/duplicate-template.ts b/packages/lib/server-only/template/duplicate-template.ts
index 97b3f0a0b..963d78bde 100644
--- a/packages/lib/server-only/template/duplicate-template.ts
+++ b/packages/lib/server-only/template/duplicate-template.ts
@@ -81,6 +81,10 @@ export const duplicateTemplate = async ({
(doc) => doc.email === recipient?.email,
);
+ if (!duplicatedTemplateRecipient) {
+ throw new Error('Recipient not found.');
+ }
+
return {
type: field.type,
page: field.page,
@@ -91,7 +95,7 @@ export const duplicateTemplate = async ({
customText: field.customText,
inserted: field.inserted,
templateId: duplicatedTemplate.id,
- recipientId: duplicatedTemplateRecipient?.id || null,
+ recipientId: duplicatedTemplateRecipient.id,
};
}),
});
diff --git a/packages/lib/types/fields.ts b/packages/lib/types/fields.ts
new file mode 100644
index 000000000..1b999310d
--- /dev/null
+++ b/packages/lib/types/fields.ts
@@ -0,0 +1,3 @@
+import type { getCompletedFieldsForToken } from '../server-only/field/get-completed-fields-for-token';
+
+export type CompletedField = Awaited>[number];
diff --git a/packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql b/packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql
new file mode 100644
index 000000000..ee027d90e
--- /dev/null
+++ b/packages/prisma/migrations/20240418140819_remove_impossible_field_optional_states/migration.sql
@@ -0,0 +1,11 @@
+/*
+ Warnings:
+
+ - Made the column `recipientId` on table `Field` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- Drop all Fields where the recipientId is null
+DELETE FROM "Field" WHERE "recipientId" IS NULL;
+
+-- AlterTable
+ALTER TABLE "Field" ALTER COLUMN "recipientId" SET NOT NULL;
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 97b6e9eeb..8acfbedfa 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -387,7 +387,7 @@ model Field {
secondaryId String @unique @default(cuid())
documentId Int?
templateId Int?
- recipientId Int?
+ recipientId Int
type FieldType
page Int
positionX Decimal @default(0)
@@ -398,7 +398,7 @@ model Field {
inserted Boolean
Document Document? @relation(fields: [documentId], references: [id], onDelete: Cascade)
Template Template? @relation(fields: [templateId], references: [id], onDelete: Cascade)
- Recipient Recipient? @relation(fields: [recipientId], references: [id], onDelete: Cascade)
+ Recipient Recipient @relation(fields: [recipientId], references: [id], onDelete: Cascade)
Signature Signature?
@@index([documentId])
diff --git a/packages/ui/components/field/field.tsx b/packages/ui/components/field/field.tsx
index e40b2e3d9..ce62443de 100644
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@@ -19,6 +19,7 @@ export type FieldContainerPortalProps = {
field: Field;
className?: string;
children: React.ReactNode;
+ cardClassName?: string;
};
export function FieldContainerPortal({
@@ -44,7 +45,7 @@ export function FieldContainerPortal({
);
}
-export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
const [isValidating, setIsValidating] = useState(false);
const ref = React.useRef(null);
@@ -78,6 +79,7 @@ export function FieldRootContainer({ field, children }: FieldContainerPortalProp
{
'border-orange-300 ring-1 ring-orange-300': !field.inserted && isValidating,
},
+ cardClassName,
)}
ref={ref}
data-inserted={field.inserted ? 'true' : 'false'}
diff --git a/packages/ui/primitives/popover.tsx b/packages/ui/primitives/popover.tsx
index e84f6cc6d..62462322b 100644
--- a/packages/ui/primitives/popover.tsx
+++ b/packages/ui/primitives/popover.tsx
@@ -30,4 +30,66 @@ const PopoverContent = React.forwardRef<
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-export { Popover, PopoverTrigger, PopoverContent };
+type PopoverHoverProps = {
+ trigger: React.ReactNode;
+ children: React.ReactNode;
+ contentProps?: React.ComponentPropsWithoutRef;
+};
+
+const PopoverHover = ({ trigger, children, contentProps }: PopoverHoverProps) => {
+ const [open, setOpen] = React.useState(false);
+
+ const isControlled = React.useRef(false);
+ const isMouseOver = React.useRef(false);
+
+ const onMouseEnter = () => {
+ isMouseOver.current = true;
+
+ if (isControlled.current) {
+ return;
+ }
+
+ setOpen(true);
+ };
+
+ const onMouseLeave = () => {
+ isMouseOver.current = false;
+
+ if (isControlled.current) {
+ return;
+ }
+
+ setTimeout(() => {
+ setOpen(isMouseOver.current);
+ }, 200);
+ };
+
+ const onOpenChange = (newOpen: boolean) => {
+ isControlled.current = newOpen;
+
+ setOpen(newOpen);
+ };
+
+ return (
+
+
+ {trigger}
+
+
+
+ {children}
+
+
+ );
+};
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverHover };
Completed
- {completedRecipients.map((recipient: Recipient) => ( -
-
+ )}
- {waitingRecipients.length > 0 && (
-
-
+ {recipient.email}
-- {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName} -
-
+
+ ))}
+ Completed
+ {completedRecipients.map((recipient: Recipient) => ( +
+
- )}
+
+
- ))}
- {recipient.email}
++ {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName} +
-
- )}
+ {waitingRecipients.length > 0 && (
+ Waiting
- {waitingRecipients.map((recipient: Recipient) => ( -
+
+ )}
- {openedRecipients.length > 0 && (
- Waiting
+ {waitingRecipients.map((recipient: Recipient) => ( +
-
- )}
+ {openedRecipients.length > 0 && (
+ Opened
- {openedRecipients.map((recipient: Recipient) => ( -
+
+ )}
- {uncompletedRecipients.length > 0 && (
- Opened
+ {openedRecipients.map((recipient: Recipient) => ( +
-
- )}
-
-
+ {uncompletedRecipients.length > 0 && (
+ Uncompleted
- {uncompletedRecipients.map((recipient: Recipient) => ( -
+
+ )}
+
);
};
diff --git a/apps/web/src/components/document/document-read-only-fields.tsx b/apps/web/src/components/document/document-read-only-fields.tsx
new file mode 100644
index 000000000..95a907d8f
--- /dev/null
+++ b/apps/web/src/components/document/document-read-only-fields.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from 'react';
+
+import { P, match } from 'ts-pattern';
+
+import {
+ DEFAULT_DOCUMENT_DATE_FORMAT,
+ convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { DocumentMeta } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+
+export type DocumentReadOnlyFieldsProps = {
+ fields: CompletedField[];
+ documentMeta?: DocumentMeta;
+};
+
+export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnlyFieldsProps) => {
+ const [hiddenFieldIds, setHiddenFieldIds] = useStateUncompleted
+ {uncompletedRecipients.map((recipient: Recipient) => ( +
+
+
+ {extractInitials(field.Recipient.name || field.Recipient.email)}
+
+
+ }
+ contentProps={{
+ className: 'flex w-fit flex-col py-2.5 text-sm',
+ }}
+ >
+
+
+
+ + + {field.Recipient.name + ? `${field.Recipient.name} (${field.Recipient.email})` + : field.Recipient.email}{' '} + + inserted a {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()} +
+ + +
+ {match(field)
+ .with({ type: FieldType.SIGNATURE }, (field) =>
+ field.Signature?.signatureImageAsBase64 ? (
+ 
+ ) : (
+
+ + {field.Signature?.typedSignature} +
+ ), + ) + .with( + { type: P.union(FieldType.NAME, FieldType.TEXT, FieldType.EMAIL) }, + () => field.customText, + ) + .with({ type: FieldType.DATE }, () => + convertToLocalSystemFormat( + field.customText, + documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT, + documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE, + ), + ) + .with({ type: FieldType.FREE_SIGNATURE }, () => null) + .exhaustive()} +