{formErrorCode && (
diff --git a/apps/remix/app/components/general/document-signing/document-signing-auth-set-password.tsx b/apps/remix/app/components/general/document-signing/document-signing-auth-set-password.tsx
new file mode 100644
index 000000000..b827c1cbf
--- /dev/null
+++ b/apps/remix/app/components/general/document-signing/document-signing-auth-set-password.tsx
@@ -0,0 +1,63 @@
+import { isSigninEnabledForProvider } from '@documenso/lib/constants/auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import { Trans } from '@lingui/react/macro';
+
+import { PasswordSetupRequest } from '~/components/forms/password-setup-request';
+
+export type DocumentSigningAuthSetPasswordProps = {
+ onOpenChange: (value: boolean) => void;
+};
+
+/**
+ * Shown in place of the password reauth form when the signed in user has no
+ * password (e.g. they signed up via OAuth or a passkey).
+ *
+ * Password based action auth is meant to prove more than possession of a session,
+ * so rather than letting the session set a password inline we send the user the
+ * verified reset link and ask them to come back.
+ */
+export const DocumentSigningAuthSetPassword = ({ onOpenChange }: DocumentSigningAuthSetPasswordProps) => {
+ const isEmailPasswordSigninEnabled = isSigninEnabledForProvider('email');
+
+ return (
+
+ {isEmailPasswordSigninEnabled ? (
+ <>
+
+
+ No password set
+
+
+
+ Signing this field requires a password, but your account does not have one. We can email you a link to
+ set one. Once done, sign in again and return to this document to continue.
+
+
+
+
+
+
+ ) : (
+
+
+ Password authentication unavailable
+
+
+
+ Your account does not have a password and password sign in is disabled for this instance. Please contact
+ the document sender to use a different authentication method.
+
+
+
+ )}
+
+
+ onOpenChange(false)}>
+ Close
+
+
+
+ );
+};
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 7e9a7adb6..dcf2e2d81 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
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningCheckboxField = ({
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -126,6 +128,13 @@ export const DocumentSigningCheckboxField = ({
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -157,6 +166,13 @@ export const DocumentSigningCheckboxField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
@@ -216,6 +232,13 @@ export const DocumentSigningCheckboxField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while updating the signature.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
index ee4b0b626..f5508f727 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import { type TRecipientAccessAuth, ZDocumentAccessAuthSchema } from '@documenso/lib/types/document-auth';
import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -14,6 +15,7 @@ import {
} from '@documenso/ui/primitives/dialog';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, useLingui } from '@lingui/react/macro';
import type { Field, Recipient } from '@prisma/client';
@@ -27,6 +29,8 @@ import { useEmbedSigningContext } from '~/components/embed/embed-signing-context
import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form';
import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+import { getSigningCompletionErrorMessage } from '~/utils/toast-error-messages';
+
import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
export type DocumentSigningCompleteDialogProps = {
@@ -85,7 +89,9 @@ export const DocumentSigningCompleteDialog = ({
position,
disableNameInput = false,
}: DocumentSigningCompleteDialogProps) => {
- const { t } = useLingui();
+ const analytics = useAnalytics();
+ const { t, i18n } = useLingui();
+ const { toast } = useToast();
const [showDialog, setShowDialog] = useState(false);
@@ -174,6 +180,23 @@ export const DocumentSigningCompleteDialog = ({
return;
}
+
+ analytics.captureException(error, {
+ source: 'signing',
+ location: 'complete_document',
+ });
+
+ // This dialog owns the completion error toast for every signing surface
+ // so the user gets a specific, actionable message. Callers should run
+ // their own side effects (e.g. embeds posting document-error) and
+ // rethrow rather than toasting themselves.
+ const toastMessage = getSigningCompletionErrorMessage(err.code);
+
+ toast({
+ title: i18n._(toastMessage.title),
+ description: i18n._(toastMessage.description),
+ variant: 'destructive',
+ });
}
};
diff --git a/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
index 1d05d3017..51135630c 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-date-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { convertToLocalSystemFormat, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -39,6 +40,7 @@ export const DocumentSigningDateField = ({
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -85,6 +87,13 @@ export const DocumentSigningDateField = ({
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -113,6 +122,13 @@ export const DocumentSigningDateField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
index 2ac26f87c..549eb6128 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -35,6 +36,7 @@ export const DocumentSigningDropdownField = ({
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -86,6 +88,13 @@ export const DocumentSigningDropdownField = ({
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningDropdownField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
index 408914336..8e88d99be 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-email-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -33,6 +34,7 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { email: providedEmail } = useRequiredDocumentSigningContext();
@@ -78,6 +80,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -106,6 +115,13 @@ export const DocumentSigningEmailField = ({ field, onSignField, onUnsignField }:
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-form.tsx b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
index cbe467f36..2d3b70540 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
@@ -1,3 +1,4 @@
+import { AppError } from '@documenso/lib/errors/app-error';
import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -19,6 +20,8 @@ import { useId, useMemo, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router';
+import { getSigningCompletionErrorMessage } from '~/utils/toast-error-messages';
+
import { AssistantConfirmationDialog, type NextSigner } from '../../dialogs/assistant-confirmation-dialog';
import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
import { useRequiredDocumentSigningContext } from './document-signing-provider';
@@ -100,9 +103,12 @@ export const DocumentSigningForm = ({
try {
await completeDocument({ nextSigner });
} catch (err) {
+ const error = AppError.parseError(err);
+ const toastMessage = getSigningCompletionErrorMessage(error.code);
+
toast({
- title: _(msg`Error`),
- description: _(msg`An error occurred while completing the document. Please try again.`),
+ title: _(toastMessage.title),
+ description: _(toastMessage.description),
variant: 'destructive',
});
diff --git a/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
index 6a9b74a3d..b79bf40fe 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -38,6 +39,7 @@ export const DocumentSigningInitialsField = ({
const { toast } = useToast();
const { _ } = useLingui();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { fullName } = useRequiredDocumentSigningContext();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -84,6 +86,13 @@ export const DocumentSigningInitialsField = ({
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -112,6 +121,13 @@ export const DocumentSigningInitialsField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
index 71ebe6995..0b4660e5d 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-name-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -39,6 +40,7 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { fullName: providedFullName, setFullName: setProvidedFullName } = useRequiredDocumentSigningContext();
@@ -116,6 +118,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -144,6 +153,13 @@ export const DocumentSigningNameField = ({ field, onSignField, onUnsignField }:
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
index 01f0e9714..0dd92c0ed 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-number-field.tsx
@@ -1,4 +1,5 @@
import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -142,6 +144,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -193,6 +202,13 @@ export const DocumentSigningNumberField = ({ field, onSignField, onUnsignField }
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx b/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
index 1979c63a2..4fa8077a0 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx
@@ -1,4 +1,3 @@
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DEFAULT_DOCUMENT_DATE_FORMAT } 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';
@@ -83,8 +82,6 @@ export const DocumentSigningPageViewV1 = ({
? authUser.twoFactorEnabled && authUser.email === recipient.email
: false;
- const analytics = useAnalytics();
-
const [selectedSignerId, setSelectedSignerId] = useState
(allRecipients?.[0]?.id);
const [isExpanded, setIsExpanded] = useState(false);
@@ -118,12 +115,6 @@ export const DocumentSigningPageViewV1 = ({
await completeDocumentWithToken(payload);
- analytics.capture('App: Recipient has completed signing', {
- signerId: recipient.id,
- documentId: document.id,
- timestamp: new Date().toISOString(),
- });
-
if (documentMeta?.redirectUrl) {
window.location.href = documentMeta.redirectUrl;
} else {
diff --git a/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
index 71a0cfa38..b155344db 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -31,6 +32,7 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, targetSigner, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -91,6 +93,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -120,6 +129,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the selection.`),
@@ -146,14 +162,17 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
{isLoading && handleSelectItem(value)} className="z-10 my-0.5 gap-y-1">
+ handleSelectItem(value)}
+ className="z-10 my-0.5 gap-y-1"
+ >
{values?.map((item, index) => (
{!item.value.includes('empty-value-') && item.value && (
@@ -167,14 +186,13 @@ export const DocumentSigningRadioField = ({ field, onSignField, onUnsignField }:
)}
{field.inserted && (
-
+
{values?.map((item, index) => (
{!item.value.includes('empty-value-') && item.value && (
diff --git a/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx b/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
index ba70ad048..f0d07eac8 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-reject-dialog.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
import {
@@ -41,6 +42,7 @@ export function DocumentSigningRejectDialog({
}: DocumentSigningRejectDialogProps) {
const { t } = useLingui();
const { toast } = useToast();
+ const analytics = useAnalytics();
const [searchParams] = useSearchParams();
const [isOpen, setIsOpen] = useState(false);
@@ -76,6 +78,12 @@ export function DocumentSigningRejectDialog({
window.location.href = `/sign/${token}/rejected`;
}
} catch (err) {
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'reject_document',
+ documentId,
+ });
+
toast({
title: t`Error`,
description: t`An error occurred while rejecting the document. Please try again.`,
diff --git a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
index 3ff8b1d68..ecab0b1bc 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -47,6 +48,7 @@ export const DocumentSigningSignatureField = ({
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient } = useDocumentSigningRecipientContext();
@@ -157,6 +159,13 @@ export const DocumentSigningSignatureField = ({
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while signing the document.`),
@@ -183,6 +192,13 @@ export const DocumentSigningSignatureField = ({
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the signature.`),
diff --git a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
index f3f12063a..b99b7337c 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
@@ -1,4 +1,5 @@
import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
@@ -50,6 +51,7 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
const { _ } = useLingui();
const { toast } = useToast();
const { revalidate } = useRevalidator();
+ const analytics = useAnalytics();
const { recipient, isAssistantMode } = useDocumentSigningRecipientContext();
@@ -170,6 +172,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: isAssistantMode
@@ -200,6 +209,13 @@ export const DocumentSigningTextField = ({ field, onSignField, onUnsignField }:
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'remove_field',
+ fieldType: field.type,
+ recipientId: field.recipientId,
+ });
+
toast({
title: _(msg`Error`),
description: _(msg`An error occurred while removing the field.`),
diff --git a/apps/remix/app/components/general/document/document-edit-form.tsx b/apps/remix/app/components/general/document/document-edit-form.tsx
index 051ee562c..06bedf4b6 100644
--- a/apps/remix/app/components/general/document/document-edit-form.tsx
+++ b/apps/remix/app/components/general/document/document-edit-form.tsx
@@ -28,6 +28,7 @@ import { useNavigate, useSearchParams } from 'react-router';
import { z } from 'zod';
import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
import { getDistributeErrorMessage } from '~/utils/toast-error-messages';
export type DocumentEditFormProps = {
@@ -42,6 +43,7 @@ const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields',
export const DocumentEditForm = ({ className, initialDocument, documentRootPath }: DocumentEditFormProps) => {
const { toast } = useToast();
const { _ } = useLingui();
+ const cspNonce = useCspNonce();
const navigate = useNavigate();
@@ -473,6 +475,7 @@ export const DocumentEditForm = ({ className, initialDocument, documentRootPath
onSubmit={onAddSignersFormSubmit}
onAutoSave={onAddSignersFormAutoSave}
isDocumentPdfLoaded={isDocumentPdfLoaded}
+ nonce={cspNonce}
/>
{
const { _ } = useLingui();
- const [query, setQuery] = useQueryState('query', documentsSearchParams.query);
+ const [{ query }, setSearchParams] = useQueryStates(
+ {
+ query: documentsSearchParams.query,
+ page: documentsSearchParams.page,
+ },
+ { history: 'push' },
+ );
const [searchTerm, setSearchTerm] = useState(query ?? '');
const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
useEffect(() => {
if (debouncedSearchTerm !== (query ?? '')) {
- void setQuery(debouncedSearchTerm || null);
+ // Reset pagination so a new search never lands on an empty page.
+ void setSearchParams({
+ query: debouncedSearchTerm || null,
+ page: null,
+ });
}
- }, [debouncedSearchTerm, query, setQuery]);
+ }, [debouncedSearchTerm, query, setSearchParams]);
return (
{
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
index ea60d1819..1abf0fa54 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx
@@ -16,7 +16,7 @@ import {
ZDocumentMetaTimezoneSchema,
} from '@documenso/lib/types/document-meta';
import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-import { isValidRedirectUrl } from '@documenso/lib/utils/is-valid-redirect-url';
+import { isHttpUrl } from '@documenso/lib/utils/is-http-url';
import { canAccessTeamDocument, DocumentSignatureType, extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
import { zEmail } from '@documenso/lib/utils/zod';
import { trpc } from '@documenso/trpc/react';
@@ -97,7 +97,7 @@ export const ZAddSettingsFormSchema = z.object({
redirectUrl: z
.string()
.optional()
- .refine((value) => value === undefined || value === '' || isValidRedirectUrl(value), {
+ .refine((value) => value === undefined || value === '' || isHttpUrl(value), {
message: 'Please enter a valid URL, make sure you include http:// or https:// part of the url.',
}),
language: z
diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
index c6fb38938..60d970caf 100644
--- a/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
+++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
@@ -1,4 +1,5 @@
import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { useEnvelopeAutosave } from '@documenso/lib/client-only/hooks/use-envelope-autosave';
import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
@@ -25,6 +26,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog';
+import { useCspNonce } from '~/utils/nonce';
import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert';
import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form';
@@ -41,10 +43,12 @@ type LocalFile = {
export const EnvelopeEditorUploadPage = () => {
const organisation = useCurrentOrganisation();
+ const cspNonce = useCspNonce();
const { t, i18n } = useLingui();
const { maximumEnvelopeItemCount, remaining } = useLimits();
const { toast } = useToast();
+ const analytics = useAnalytics();
const {
envelope,
@@ -213,6 +217,12 @@ export const EnvelopeEditorUploadPage = () => {
const { data } = await createPromise.catch((error) => {
console.error(error);
+ analytics.captureException(error, {
+ source: isEmbedded ? 'embed' : 'editor',
+ location: 'create_envelope_items',
+ envelopeId: envelope.id,
+ });
+
// Set error state on files in batch upload.
setLocalFiles((prev) =>
prev.map((uploadingFile) =>
@@ -290,6 +300,12 @@ export const EnvelopeEditorUploadPage = () => {
} catch (error) {
console.error(error);
+ analytics.captureException(error, {
+ source: isEmbedded ? 'embed' : 'editor',
+ location: 'replace_pdf',
+ envelopeId: envelope.id,
+ });
+
toast({
title: t`Replace failed`,
description: t`Something went wrong while replacing the PDF`,
@@ -480,7 +496,7 @@ export const EnvelopeEditorUploadPage = () => {
{/* Uploaded Files List */}
-
+
{(provided) => (
{
const { i18n } = useLingui();
+ const analytics = useAnalytics();
const {
envelopeStatus,
@@ -114,6 +116,13 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
unsafeRenderFieldOnLayer(field);
} catch (err) {
console.error(err);
+
+ analytics.captureException(err, {
+ source: 'editor',
+ location: 'envelope_page_render',
+ envelopeId: currentEnvelopeItem?.envelopeId,
+ });
+
setRenderError(true);
}
};
diff --git a/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx b/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
index 8caab7ac0..1c5c54ca0 100644
--- a/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
@@ -1,3 +1,4 @@
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
import {
type PageRenderData,
@@ -53,6 +54,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
const { toast } = useToast();
+ const analytics = useAnalytics();
const {
envelopeData,
@@ -426,6 +428,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
unsafeRenderFieldOnLayer(unparsedField, fieldCanvasStyleCache);
} catch (err) {
console.error(err);
+
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'page_render',
+ recipientId: recipient.id,
+ envelopeId: envelope.id,
+ });
+
setRenderError(true);
}
};
@@ -507,6 +517,14 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
} catch (err) {
console.error(err);
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'sign_field',
+ fieldType: payload.type,
+ recipientId: recipient.id,
+ envelopeId: envelope.id,
+ });
+
toast({
title: t`Error`,
description: t`An error occurred while signing the field.`,
diff --git a/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx b/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
index 53f125c7f..c522419ca 100644
--- a/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
+++ b/apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
@@ -118,12 +118,6 @@ export const EnvelopeSignerCompleteDialog = () => {
title: t`Document already signed`,
description: t`This document was already signed and no further action was taken.`,
});
- } else {
- analytics.capture('App: Recipient has completed signing', {
- signerId: recipient.id,
- documentId: envelope.id,
- timestamp: new Date().toISOString(),
- });
}
if (onDocumentCompleted) {
@@ -148,15 +142,18 @@ export const EnvelopeSignerCompleteDialog = () => {
const error = AppError.parseError(err);
if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
- toast({
- title: t`Something went wrong`,
- description: t`We were unable to submit this document at this time. Please try again later.`,
- variant: 'destructive',
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'complete_document',
+ recipientId: recipient.id,
+ envelopeId: envelope.id,
});
onDocumentError?.();
}
+ // Rethrow so DocumentSigningCompleteDialog can handle 2FA retries and
+ // toast a specific completion error message.
throw err;
}
};
@@ -224,14 +221,18 @@ export const EnvelopeSignerCompleteDialog = () => {
}
} catch (err) {
console.log('err', err);
- toast({
- title: t`Something went wrong`,
- description: t`We were unable to submit this document at this time. Please try again later.`,
- variant: 'destructive',
+
+ analytics.captureException(err, {
+ source: 'signing',
+ location: 'complete_document_next_signer',
+ recipientId: recipient.id,
+ envelopeId: envelope.id,
});
onDocumentError?.();
+ // Rethrow so DocumentSigningCompleteDialog can toast a specific
+ // completion error message.
throw err;
}
};
diff --git a/apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx b/apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx
index 3b1a0b188..cf7bfb67c 100644
--- a/apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx
+++ b/apps/remix/app/components/general/envelope/envelope-drop-zone-wrapper.tsx
@@ -93,14 +93,6 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
duration: 5000,
});
- if (type === EnvelopeType.DOCUMENT) {
- analytics.capture('App: Document Uploaded', {
- userId: user.id,
- documentId: id,
- timestamp: new Date().toISOString(),
- });
- }
-
const pathPrefix = type === EnvelopeType.DOCUMENT ? formatDocumentsPath(team.url) : formatTemplatesPath(team.url);
const aiQueryParam = team.preferences.aiFeaturesEnabled ? '?ai=true' : '';
@@ -109,6 +101,11 @@ export const EnvelopeDropZoneWrapper = ({ children, type, className }: EnvelopeD
} catch (err) {
const error = AppError.parseError(err);
+ analytics.captureException(err, {
+ source: 'editor',
+ location: 'upload_document',
+ });
+
const errorMessage = getUploadErrorMessage(error.code);
toast({
diff --git a/apps/remix/app/components/general/envelope/envelope-upload-button.tsx b/apps/remix/app/components/general/envelope/envelope-upload-button.tsx
index 25611fd40..c177eb8fb 100644
--- a/apps/remix/app/components/general/envelope/envelope-upload-button.tsx
+++ b/apps/remix/app/components/general/envelope/envelope-upload-button.tsx
@@ -1,4 +1,5 @@
import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
import { useSession } from '@documenso/lib/client-only/providers/session';
import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
@@ -34,6 +35,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
const { t, i18n } = useLingui();
const { toast } = useToast();
const { user } = useSession();
+ const analytics = useAnalytics();
const team = useCurrentTeam();
@@ -112,6 +114,11 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
console.error(err);
+ analytics.captureException(err, {
+ source: 'editor',
+ location: 'upload_document',
+ });
+
const errorMessage = getUploadErrorMessage(error.code);
toast({
diff --git a/apps/remix/app/components/general/filter-pill.tsx b/apps/remix/app/components/general/filter-pill.tsx
index ae1d69f75..a786bd8f1 100644
--- a/apps/remix/app/components/general/filter-pill.tsx
+++ b/apps/remix/app/components/general/filter-pill.tsx
@@ -31,6 +31,8 @@ type FilterPillCommonProps = {
enableSearch?: boolean;
searchPlaceholder?: string;
loading?: boolean;
+ /** Whether the selection can be removed. Defaults to true. */
+ clearable?: boolean;
testId?: string;
};
@@ -61,7 +63,7 @@ export type FilterPillProps = FilterPillSingleProps | FilterPillMultipleProps;
* selections followed by a "+N more" chip.
*/
export const FilterPill = (props: FilterPillProps) => {
- const { icon: Icon, label, options, enableSearch, searchPlaceholder, loading, testId } = props;
+ const { icon: Icon, label, options, enableSearch, searchPlaceholder, loading, clearable = true, testId } = props;
const [open, setOpen] = useState(false);
@@ -84,7 +86,7 @@ export const FilterPill = (props: FilterPillProps) => {
return;
}
- props.onChange(nextValue === props.value ? null : nextValue);
+ props.onChange(nextValue === props.value && clearable ? null : nextValue);
setOpen(false);
};
@@ -168,7 +170,7 @@ export const FilterPill = (props: FilterPillProps) => {
))}
- {hasSelection && (
+ {hasSelection && clearable && (
<>
diff --git a/apps/remix/app/components/general/metric-card.tsx b/apps/remix/app/components/general/metric-card.tsx
index 14ae66035..3659e62aa 100644
--- a/apps/remix/app/components/general/metric-card.tsx
+++ b/apps/remix/app/components/general/metric-card.tsx
@@ -7,9 +7,10 @@ export type CardMetricProps = {
value?: string | number;
className?: string;
children?: React.ReactNode;
+ testId?: string;
};
-export const CardMetric = ({ icon: Icon, title, value, className, children }: CardMetricProps) => {
+export const CardMetric = ({ icon: Icon, title, value, className, children, testId }: CardMetricProps) => {
return (
{children || (
-
+
{typeof value === 'number' ? value.toLocaleString('en-US') : value}
)}
diff --git a/apps/remix/app/components/general/org-menu-switcher.tsx b/apps/remix/app/components/general/org-menu-switcher.tsx
index dfa52d964..842a801e0 100644
--- a/apps/remix/app/components/general/org-menu-switcher.tsx
+++ b/apps/remix/app/components/general/org-menu-switcher.tsx
@@ -6,9 +6,13 @@ import { EXTENDED_ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/
import { EXTENDED_TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
import { isAdmin } from '@documenso/lib/utils/is-admin';
-import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
+import {
+ canAccessOrganisationAnalytics,
+ canExecuteOrganisationAction,
+ formatOrganisationAnalyticsPath,
+} from '@documenso/lib/utils/organisations';
import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { canExecuteTeamAction, formatAnalyticsPath } from '@documenso/lib/utils/teams';
import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
import { LanguageSwitcherDialog } from '@documenso/ui/components/common/language-switcher-dialog';
import { cn } from '@documenso/ui/lib/utils';
@@ -62,6 +66,13 @@ export const OrgMenuSwitcher = () => {
const canAccessTeamSettings = currentTeam && canExecuteTeamAction('MANAGE_TEAM', currentTeam.currentTeamRole);
+ // Team analytics take precedence when in a team context, the team page links to organisation analytics.
+ const analyticsPath = canAccessTeamSettings
+ ? formatAnalyticsPath(currentTeam.url)
+ : currentOrganisation && canAccessOrganisationAnalytics(currentOrganisation.currentOrganisationRole)
+ ? formatOrganisationAnalyticsPath(currentOrganisation.url)
+ : null;
+
// Use hovered org for teams display if available,
// otherwise use current team's org if in a team,
// finally fallback to selected org
@@ -271,6 +282,14 @@ export const OrgMenuSwitcher = () => {
+ {analyticsPath && (
+
+ Analytics
+
+
+ )}
+
;
+ constraintRef: React.RefObject;
pages: PageMeta[];
numPages: number;
pdf: pdfjsLib.PDFDocumentProxy;
@@ -366,6 +373,8 @@ const PdfViewerPage = ({
* Manages rendering a page from a pdf.
*/
const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }: PdfViewerPageProps) => {
+ const analytics = useAnalytics();
+
const [imageLoadingState, setImageLoadingState] = useState('loading');
const [imageUrl, setImageUrl] = useState('');
@@ -457,6 +466,12 @@ const usePdfPageImage = ({ pageNumber, pdf, scale, scaledWidth, scaledHeight }:
if (!isCancelled) {
console.error(err);
+
+ analytics.captureException(err, {
+ source: 'pdf_viewer',
+ location: 'pdf_page_render',
+ });
+
setImageLoadingState('error');
}
} finally {
diff --git a/apps/remix/app/components/general/skeletons/document-edit-skeleton.tsx b/apps/remix/app/components/general/skeletons/document-edit-skeleton.tsx
deleted file mode 100644
index a17a80f31..000000000
--- a/apps/remix/app/components/general/skeletons/document-edit-skeleton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Skeleton } from '@documenso/ui/primitives/skeleton';
-import { Trans } from '@lingui/react/macro';
-import { ChevronLeft, Loader } from 'lucide-react';
-import { Link } from 'react-router';
-
-export default function DocumentEditSkeleton() {
- return (
-
-
-
-
Documents
-
-
-
- Loading Document...
-
-
-
-
-
-
-
-
-
-
-
- Loading document...
-
-
-
-
-
-
-
+
{fallbackText}
);
diff --git a/apps/remix/app/components/general/stack-avatars-with-tooltip.tsx b/apps/remix/app/components/general/stack-avatars-with-tooltip.tsx
index ef096afe6..6ff083ddd 100644
--- a/apps/remix/app/components/general/stack-avatars-with-tooltip.tsx
+++ b/apps/remix/app/components/general/stack-avatars-with-tooltip.tsx
@@ -1,16 +1,33 @@
-import { getRecipientType, RecipientStatusType } from '@documenso/lib/client-only/recipient-type';
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import {
+ getExtraRecipientsType,
+ getRecipientType,
+ RecipientStatusType,
+} from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import type { TRecipientLite } from '@documenso/lib/types/recipient';
import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { cn } from '@documenso/ui/lib/utils';
import { PopoverHover } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { DocumentStatus } from '@prisma/client';
-import { useMemo } from 'react';
+import { DocumentStatus } from '@prisma/client';
+import type { LucideIcon } from 'lucide-react';
+import {
+ CheckIcon,
+ CircleCheckIcon,
+ CircleDashedIcon,
+ CircleXIcon,
+ ClockIcon,
+ CopyIcon,
+ MailOpenIcon,
+} from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
-import { AvatarWithRecipient } from './avatar-with-recipient';
import { StackAvatar } from './stack-avatar';
-import { StackAvatars } from './stack-avatars';
export type StackAvatarsWithTooltipProps = {
documentStatus: DocumentStatus;
@@ -27,125 +44,238 @@ export const StackAvatarsWithTooltip = ({
}: StackAvatarsWithTooltipProps) => {
const { _ } = useLingui();
- const waitingRecipients = recipients.filter(
- (recipient) => getRecipientType(recipient) === RecipientStatusType.WAITING,
- );
+ const sections = useMemo(() => {
+ const groups = groupRecipientsByStatus(recipients);
- const openedRecipients = recipients.filter((recipient) => getRecipientType(recipient) === RecipientStatusType.OPENED);
-
- const completedRecipients = recipients.filter(
- (recipient) => getRecipientType(recipient) === RecipientStatusType.COMPLETED,
- );
-
- const uncompletedRecipients = recipients.filter(
- (recipient) => getRecipientType(recipient) === RecipientStatusType.UNSIGNED,
- );
-
- const rejectedRecipients = recipients.filter(
- (recipient) => getRecipientType(recipient) === RecipientStatusType.REJECTED,
- );
-
- const sortedRecipients = useMemo(() => {
- const otherRecipients = recipients.filter(
- (recipient) => getRecipientType(recipient) !== RecipientStatusType.REJECTED,
- );
-
- return [
- ...rejectedRecipients.sort((a, b) => a.id - b.id),
- ...otherRecipients.sort((a, b) => {
- return a.id - b.id;
- }),
- ];
+ return RECIPIENT_STATUS_SECTIONS.map((section) => ({
+ ...section,
+ recipients: groups[section.type],
+ })).filter((section) => section.recipients.length > 0);
}, [recipients]);
+ const canCopySigningLink = documentStatus === DocumentStatus.PENDING;
+
return (
-
- Completed
-
- {completedRecipients.map((recipient) => (
-
-
(
+
+
+ {_(section.label)}
+ {section.recipients.length}
+
+
+
+ {section.recipients.map((recipient) => (
+
-
-
{recipient.email || recipient.name}
-
- {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
-
-
-
- ))}
+ ))}
+
- )}
-
- {rejectedRecipients.length > 0 && (
-
-
- Rejected
-
- {rejectedRecipients.map((recipient) => (
-
-
-
-
{recipient.email || recipient.name}
-
- {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
-
-
-
- ))}
-
- )}
-
- {waitingRecipients.length > 0 && (
-
-
- Waiting
-
- {waitingRecipients.map((recipient) => (
-
- ))}
-
- )}
-
- {openedRecipients.length > 0 && (
-
-
- Opened
-
- {openedRecipients.map((recipient) => (
-
- ))}
-
- )}
-
- {uncompletedRecipients.length > 0 && (
-
-
- Uncompleted
-
- {uncompletedRecipients.map((recipient) => (
-
- ))}
-
- )}
+ ))}
);
};
+
+type RecipientRowProps = {
+ recipient: TRecipientLite;
+ signingToken: string | null;
+};
+
+const RecipientRow = ({ recipient, signingToken }: RecipientRowProps) => {
+ const { _ } = useLingui();
+ const { toast } = useToast();
+
+ const [, copy] = useCopyToClipboard();
+
+ const [isCopied, setIsCopied] = useState(false);
+ const copiedTimeoutRef = useRef
| null>(null);
+
+ useEffect(() => () => clearTimeout(copiedTimeoutRef.current ?? undefined), []);
+
+ const onCopySigningLink = () => {
+ if (!signingToken) {
+ return;
+ }
+
+ void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${signingToken}`).then(() => {
+ setIsCopied(true);
+
+ clearTimeout(copiedTimeoutRef.current ?? undefined);
+ copiedTimeoutRef.current = setTimeout(() => setIsCopied(false), COPIED_INDICATOR_DURATION_MS);
+
+ toast({
+ title: _(msg`Copied to clipboard`),
+ description: _(msg`The signing link has been copied to your clipboard.`),
+ });
+ });
+ };
+
+ const content = (
+ <>
+
+
{recipient.email || recipient.name}
+
{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+
{content}
;
+ }
+
+ return (
+
+ {content}
+
+ {isCopied ? (
+
+ );
+};
+
+const RecipientAvatarStack = ({ recipients }: { recipients: TRecipientLite[] }) => {
+ const sortedRecipients = useMemo(() => {
+ const byId = (a: TRecipientLite, b: TRecipientLite) => a.id - b.id;
+
+ const rejected = recipients.filter((r) => getRecipientType(r) === RecipientStatusType.REJECTED);
+ const others = recipients.filter((r) => getRecipientType(r) !== RecipientStatusType.REJECTED);
+
+ return [...rejected.sort(byId), ...others.sort(byId)];
+ }, [recipients]);
+
+ const visibleRecipients = sortedRecipients.slice(0, MAX_VISIBLE_AVATARS);
+ const hiddenRecipients = sortedRecipients.slice(MAX_VISIBLE_AVATARS);
+
+ return (
+ <>
+ {visibleRecipients.map((recipient, index) => {
+ const isOverflowSlot = index === MAX_VISIBLE_AVATARS - 1 && hiddenRecipients.length > 0;
+ const zIndex = String(50 - index * 10);
+
+ if (isOverflowSlot) {
+ return (
+ = {
+ [RecipientStatusType.COMPLETED]: [],
+ [RecipientStatusType.REJECTED]: [],
+ [RecipientStatusType.WAITING]: [],
+ [RecipientStatusType.OPENED]: [],
+ [RecipientStatusType.UNSIGNED]: [],
+ };
+
+ for (const recipient of recipients) {
+ groups[getRecipientType(recipient)].push(recipient);
+ }
+
+ return groups;
+};
+
+const MAX_VISIBLE_AVATARS = 5;
+
+const COPIED_INDICATOR_DURATION_MS = 2000;
+
+const recipientRowClassName = '-mx-2 flex items-center gap-2 rounded-md px-2 py-1';
+
+type RecipientStatusSection = {
+ type: RecipientStatusType;
+ label: MessageDescriptor;
+ icon: LucideIcon;
+ className: string;
+ /** Whether recipients in this section still need to sign, so a signing link can be copied. */
+ hasSigningLink: boolean;
+};
+
+const RECIPIENT_STATUS_SECTIONS: RecipientStatusSection[] = [
+ {
+ type: RecipientStatusType.COMPLETED,
+ label: msg`Completed`,
+ icon: CircleCheckIcon,
+ className: 'text-green-600 dark:text-green-400',
+ hasSigningLink: false,
+ },
+ {
+ type: RecipientStatusType.REJECTED,
+ label: msg`Rejected`,
+ icon: CircleXIcon,
+ className: 'text-red-600 dark:text-red-400',
+ hasSigningLink: false,
+ },
+ {
+ type: RecipientStatusType.WAITING,
+ label: msg`Waiting`,
+ icon: ClockIcon,
+ className: 'text-blue-600 dark:text-blue-400',
+ hasSigningLink: true,
+ },
+ {
+ type: RecipientStatusType.OPENED,
+ label: msg`Opened`,
+ icon: MailOpenIcon,
+ className: 'text-amber-600 dark:text-amber-400',
+ hasSigningLink: true,
+ },
+ {
+ type: RecipientStatusType.UNSIGNED,
+ label: msg`Uncompleted`,
+ icon: CircleDashedIcon,
+ className: 'text-muted-foreground',
+ hasSigningLink: true,
+ },
+];
diff --git a/apps/remix/app/components/general/stack-avatars.tsx b/apps/remix/app/components/general/stack-avatars.tsx
deleted file mode 100644
index cf2cd2ca6..000000000
--- a/apps/remix/app/components/general/stack-avatars.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { getExtraRecipientsType, getRecipientType } from '@documenso/lib/client-only/recipient-type';
-import type { TRecipientLite } from '@documenso/lib/types/recipient';
-import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-
-import { StackAvatar } from './stack-avatar';
-
-export function StackAvatars({ recipients }: { recipients: TRecipientLite[] }) {
- const renderStackAvatars = (recipients: TRecipientLite[]) => {
- const zIndex = 50;
- const itemsToRender = recipients.slice(0, 5);
- const remainingItems = recipients.length - itemsToRender.length;
-
- return itemsToRender.map((recipient, index: number) => {
- const first = index === 0;
-
- if (index === 4 && remainingItems > 0) {
- return (
- {
+ const { _ } = useLingui();
+
+ const [{ query }, setSearchParams] = useQueryStates(
+ {
+ query: templatesSearchParams.query,
+ page: templatesSearchParams.page,
+ },
+ { history: 'push' },
+ );
+
+ const [searchTerm, setSearchTerm] = useState(query ?? '');
+ const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
+
+ useEffect(() => {
+ if (debouncedSearchTerm !== (query ?? '')) {
+ void setSearchParams({
+ query: debouncedSearchTerm || null,
+ page: null,
+ });
+ }
+ }, [debouncedSearchTerm, query, setSearchParams]);
+
+ return (
+ = {
/**
* Admin list pages which support prefilling their search from the URL, used
- * for the "View all results" links on capped groups. Teams, recipients and
+ * for the "View all results" links on capped groups. Teams and
* subscriptions have no admin list pages.
*/
const ADMIN_GROUP_LIST_PATHS: Partial string>> = {
document: (query) => `/admin/documents?term=${encodeURIComponent(query)}`,
user: (query) => `/admin/users?search=${encodeURIComponent(query)}`,
organisation: (query) => `/admin/organisations?query=${encodeURIComponent(query)}`,
+ recipient: (query) => `/admin/documents?term=${encodeURIComponent(`recipient:${query}`)}`,
};
export type UseAdminSearchCategoriesOptions = {
diff --git a/apps/remix/app/components/general/user-profile-skeleton.tsx b/apps/remix/app/components/general/user-profile-skeleton.tsx
deleted file mode 100644
index 022bbdcea..000000000
--- a/apps/remix/app/components/general/user-profile-skeleton.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
-import { VerifiedIcon } from '@documenso/ui/icons/verified';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Trans } from '@lingui/react/macro';
-import { File, User2 } from 'lucide-react';
-
-export type UserProfileSkeletonProps = {
- className?: string;
- user: {
- name: string;
- url: string;
- };
- rows?: number;
-};
-
-export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSkeletonProps) => {
- const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
-
- return (
-
-
- {baseUrl.host}/u/{user.url}
-
-
-
-
-
-
-
{user.name}
-
-
-
-
-
-
-
-
-
-
- Documents
-
-
- {Array(rows)
- .fill(0)
- .map((_, index) => (
-
- ))}
-
-
-
- {[...selectableStatuses, ExtendedDocumentStatus.ALL].map((value) => (
-
- {_(FRIENDLY_STATUS_MAP[value].label)}:{' '}
- {stats[value]}
-
- ))}
-
+ {stats && (
+
+ {[...selectableStatuses, ExtendedDocumentStatus.ALL].map((value) => (
+
+ {_(FRIENDLY_STATUS_MAP[value].label)}:{' '}
+ {stats[value]}
+
+ ))}
+
+ )}
);
};
diff --git a/apps/remix/app/components/tables/inbox-table.tsx b/apps/remix/app/components/tables/inbox-table.tsx
index f958da66d..0aec5bf22 100644
--- a/apps/remix/app/components/tables/inbox-table.tsx
+++ b/apps/remix/app/components/tables/inbox-table.tsx
@@ -16,22 +16,17 @@ import { Trans } from '@lingui/react/macro';
import { DocumentStatus as DocumentStatusEnum, RecipientRole, SigningStatus } from '@prisma/client';
import { CheckCircleIcon, DownloadIcon, EyeIcon, Loader, PencilIcon } from 'lucide-react';
import { DateTime } from 'luxon';
+import { useQueryStates } from 'nuqs';
import { useMemo, useTransition } from 'react';
-import { useSearchParams } from 'react-router';
import { match } from 'ts-pattern';
import { DocumentStatus } from '~/components/general/document/document-status';
import { useOptionalCurrentTeam } from '~/providers/team';
+import { inboxSearchParams, resolveInboxStatus } from '~/utils/inbox-search-params';
import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
-export type DocumentsTableProps = {
- data?: TFindInboxResponse;
- isLoading?: boolean;
- isLoadingError?: boolean;
-};
-
type DocumentsTableRow = TFindInboxResponse['data'][number];
export const InboxTable = () => {
@@ -40,17 +35,24 @@ export const InboxTable = () => {
const team = useOptionalCurrentTeam();
const [isPending, startTransition] = useTransition();
- const [searchParams] = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
- const page = searchParams?.get?.('page') ? Number(searchParams.get('page')) : undefined;
- const perPage = searchParams?.get?.('perPage') ? Number(searchParams.get('perPage')) : undefined;
+ const [findInboxSearchParams] = useQueryStates(inboxSearchParams, {
+ history: 'push',
+ });
+
+ const status = resolveInboxStatus(findInboxSearchParams.status);
+ const query = findInboxSearchParams.query ?? '';
const { data, isLoading, isLoadingError } = trpc.document.inbox.find.useQuery({
- page: page || 1,
- perPage: perPage || 10,
+ page: Math.max(findInboxSearchParams.page ?? 1, 1),
+ perPage: Math.min(Math.max(findInboxSearchParams.perPage ?? 10, 1), 100),
+ query: query || undefined,
+ status,
});
+ const hasSearchQuery = query.trim().length > 0;
+
const columns = useMemo(() => {
return [
{
@@ -123,7 +125,20 @@ export const InboxTable = () => {
emptyState={
- Documents that require your attention will appear here
+ {match({ hasSearchQuery, status })
+ .with({ hasSearchQuery: true }, () => No documents match your search )
+ .with({ status: DocumentStatusEnum.COMPLETED }, () => (
+ Documents that you have completed will appear here
+ ))
+ .with({ status: DocumentStatusEnum.REJECTED }, () => (
+ Documents that have been rejected will appear here
+ ))
+ .with({ status: DocumentStatusEnum.CANCELLED }, () => (
+ Documents that have been cancelled will appear here
+ ))
+ .otherwise(() => (
+ Documents that require your attention will appear here
+ ))}
}
diff --git a/apps/remix/app/components/tables/templates-table-action-dropdown.tsx b/apps/remix/app/components/tables/templates-table-action-dropdown.tsx
index 9d8a288f5..f2b512b97 100644
--- a/apps/remix/app/components/tables/templates-table-action-dropdown.tsx
+++ b/apps/remix/app/components/tables/templates-table-action-dropdown.tsx
@@ -170,7 +170,10 @@ export const TemplatesTableActionDropdown = ({
onOpenChange={setRenameDialogOpen}
envelopeType="template"
onSuccess={async () => {
- await trpcUtils.template.findTemplates.invalidate();
+ await Promise.all([
+ trpcUtils.template.findTemplates.invalidate(),
+ trpcUtils.template.findTemplatesInternal.invalidate(),
+ ]);
}}
/>
diff --git a/apps/remix/app/components/tables/templates-table-owner-filter.tsx b/apps/remix/app/components/tables/templates-table-owner-filter.tsx
new file mode 100644
index 000000000..39fef4193
--- /dev/null
+++ b/apps/remix/app/components/tables/templates-table-owner-filter.tsx
@@ -0,0 +1,61 @@
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { trpc } from '@documenso/trpc/react';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { UserIcon } from 'lucide-react';
+import { useQueryStates } from 'nuqs';
+
+import { FilterPill } from '~/components/general/filter-pill';
+import { templatesSearchParams } from '~/utils/templates-search-params';
+
+type TemplatesTableOwnerFilterProps = {
+ teamId: number;
+};
+
+export const TemplatesTableOwnerFilter = ({ teamId }: TemplatesTableOwnerFilterProps) => {
+ const { _ } = useLingui();
+
+ const isMounted = useIsMounted();
+
+ const [{ ownerIds }, setSearchParams] = useQueryStates(
+ {
+ ownerIds: templatesSearchParams.ownerIds,
+ page: templatesSearchParams.page,
+ },
+ { history: 'push' },
+ );
+
+ const selectedOwnerIds = (ownerIds ?? []).map((ownerId) => ownerId.toString());
+
+ const { data, isLoading } = trpc.team.member.getMany.useQuery({
+ teamId,
+ });
+
+ const options = (data ?? []).map((member) => ({
+ label: member.name ?? member.email,
+ value: member.userId.toString(),
+ }));
+
+ const onChange = (newOwnerIds: string[]) => {
+ void setSearchParams({
+ ownerIds: newOwnerIds.length > 0 ? newOwnerIds.map(Number) : null,
+ page: null,
+ });
+ };
+
+ return (
+ Owner}
+ value={selectedOwnerIds}
+ onChange={onChange}
+ options={options}
+ enableSearch
+ searchPlaceholder={_(msg`Search members...`)}
+ loading={!isMounted || isLoading}
+ testId="templates-table-owner-filter"
+ />
+ );
+};
diff --git a/apps/remix/app/components/tables/templates-table-view-filter.tsx b/apps/remix/app/components/tables/templates-table-view-filter.tsx
new file mode 100644
index 000000000..b30cf8e64
--- /dev/null
+++ b/apps/remix/app/components/tables/templates-table-view-filter.tsx
@@ -0,0 +1,42 @@
+import { Trans } from '@lingui/react/macro';
+import { Building2Icon } from 'lucide-react';
+import { useQueryStates } from 'nuqs';
+
+import { FilterPill } from '~/components/general/filter-pill';
+import { TEMPLATES_VIEW_VALUES, templatesSearchParams } from '~/utils/templates-search-params';
+
+const VIEW_OPTIONS = [
+ { value: 'team', label: Team },
+ { value: 'organisation', label: Organisation },
+];
+
+export const TemplatesTableViewFilter = () => {
+ const [{ view }, setSearchParams] = useQueryStates(
+ {
+ view: templatesSearchParams.view,
+ ownerIds: templatesSearchParams.ownerIds,
+ page: templatesSearchParams.page,
+ },
+ { history: 'push' },
+ );
+
+ const onChange = (newView: string | null) => {
+ // The owner filter only applies to the team view, so drop it on any view change.
+ void setSearchParams({
+ view: TEMPLATES_VIEW_VALUES.find((value) => value === newView) ?? null,
+ ownerIds: null,
+ page: null,
+ });
+ };
+
+ return (
+ View}
+ value={view}
+ onChange={onChange}
+ options={VIEW_OPTIONS}
+ testId="templates-table-view-filter"
+ />
+ );
+};
diff --git a/apps/remix/app/entry.client.tsx b/apps/remix/app/entry.client.tsx
index 0ffb3602e..57daa65e3 100644
--- a/apps/remix/app/entry.client.tsx
+++ b/apps/remix/app/entry.client.tsx
@@ -18,6 +18,23 @@ import './utils/polyfills/promise-with-resolvers';
* the page early, leaving dead event handlers (broken dropdowns, native form
* submits).
*/
+/**
+ * Signing and direct template URLs contain recipient tokens which must never
+ * be sent to PostHog. Recipient context is attached explicitly via
+ * `recipientId` where needed instead.
+ */
+const redactTokensFromUrl = (value: string) => {
+ return value.replace(/(\/(?:sign|d|direct)\/)([^/?#]+)/g, '$1:token');
+};
+
+const URL_EVENT_PROPERTIES = [
+ '$current_url',
+ '$pathname',
+ '$referrer',
+ '$initial_referrer',
+ '$prev_pageview_pathname',
+] as const;
+
function initPosthog() {
const postHogConfig = extractPostHogConfig();
@@ -25,12 +42,59 @@ function initPosthog() {
void import('posthog-js').then(({ default: posthog }) => {
posthog.init(postHogConfig.key, {
api_host: postHogConfig.host,
+ // Only create person profiles for identified (authenticated) users,
+ // anonymous recipients on signing pages stay anonymous.
+ person_profiles: 'identified_only',
+ // Explicit events only, autocapture on signing pages blows up usage
+ // without providing actionable data.
+ autocapture: false,
+ capture_pageview: true,
+ capture_pageleave: false,
capture_exceptions: true,
+ before_send: (event) => {
+ if (!event) {
+ return null;
+ }
+
+ for (const property of URL_EVENT_PROPERTIES) {
+ const value = event.properties?.[property];
+
+ if (typeof value === 'string') {
+ event.properties[property] = redactTokensFromUrl(value);
+ }
+ }
+
+ if (event.$set_once && typeof event.$set_once['$initial_current_url'] === 'string') {
+ event.$set_once['$initial_current_url'] = redactTokensFromUrl(event.$set_once['$initial_current_url']);
+ }
+
+ return event;
+ },
});
});
}
}
+/**
+ * Surfaces hydration recoveries (React 19 discards the server HTML and
+ * re-renders on the client instead of dying) so we can track how often
+ * extensions/early clicks interfere with hydration in the wild.
+ */
+function onRecoverableError(error: unknown, errorInfo: { componentStack?: string }) {
+ console.error('[hydration] recovered from error', error, errorInfo.componentStack);
+
+ if (extractPostHogConfig()) {
+ void import('posthog-js').then(({ default: posthog }) => {
+ if (posthog.__loaded) {
+ posthog.capture('$hydration_recoverable_error', {
+ message: error instanceof Error ? error.message : String(error),
+ componentStack: errorInfo.componentStack,
+ });
+ }
+ });
+ }
+}
+
async function main() {
const locale = detect(fromHtmlTag('lang')) || 'en';
@@ -44,6 +108,7 @@ async function main() {
+
+ 
+
+ 
+
+ 
+
+