diff --git a/apps/web/pages/documents/[id]/signed.tsx b/apps/web/pages/documents/[id]/signed.tsx
index bc11bc0a0..138f9e3e9 100644
--- a/apps/web/pages/documents/[id]/signed.tsx
+++ b/apps/web/pages/documents/[id]/signed.tsx
@@ -5,6 +5,7 @@ import prisma from "@documenso/prisma";
import { Button, IconButton } from "@documenso/ui";
import { NextPageWithLayout } from "../../_app";
import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
+import { truncate } from "@documenso/lib/helpers";
const Signed: NextPageWithLayout = (props: any) => {
const router = useRouter();
@@ -21,7 +22,7 @@ const Signed: NextPageWithLayout = (props: any) => {
- You signed "{props.document.title}" + You signed "{truncate(props.document.title)}"
You will be notfied when all recipients have signed.
diff --git a/packages/lib/helpers/index.ts b/packages/lib/helpers/index.ts
new file mode 100644
index 000000000..cf29797bb
--- /dev/null
+++ b/packages/lib/helpers/index.ts
@@ -0,0 +1 @@
+export * from './strings';
\ No newline at end of file
diff --git a/packages/lib/helpers/strings.ts b/packages/lib/helpers/strings.ts
new file mode 100644
index 000000000..eaf45b7f1
--- /dev/null
+++ b/packages/lib/helpers/strings.ts
@@ -0,0 +1,13 @@
+/**
+ * Truncates a title to a given max length substituting the middle with an ellipsis.
+ */
+export const truncate = (str: string, maxLength: number = 20) => {
+ if (str.length <= maxLength) {
+ return str;
+ }
+
+ const startLength = Math.ceil((maxLength - 3) / 2);
+ const endLength = Math.floor((maxLength - 3) / 2);
+
+ return `${str.slice(0, startLength)}...${str.slice(-endLength)}`;
+};
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 07c92686b..1e03135af 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo } from "react";
import { Fragment } from "react";
import { sendSigningRequests } from "@documenso/lib/api";
+import { truncate } from "@documenso/lib/helpers";
import { Button } from "@documenso/ui";
import { Dialog as DialogComponent, Transition } from "@headlessui/react";
import { Document as PrismaDocument } from "@prisma/client";
@@ -19,6 +20,7 @@ type DialogProps = {
formValues: FormValue[];
setLoading: (loading: boolean) => void;
icon: React.ReactNode;
+ truncateTitle: boolean;
};
export function Dialog({
@@ -29,11 +31,14 @@ export function Dialog({
formValues,
setLoading,
icon,
+ truncateTitle = true,
}: DialogProps) {
const unsentEmailsLength = formValues.filter(
(s: any) => s.email && s.sendStatus != "SENT"
).length;
+ const documentTitle = truncateTitle ? truncate(document.title) : document.title;
+
return (
- {`"${document.title}" will be sent to ${unsentEmailsLength} recipients.`}
+ {`"${documentTitle}" will be sent to ${unsentEmailsLength} recipients.`}