fix: add cascade delete for share links

feat: single-player-mode-polish (#435 )
fix: background color of signature page (#487 )
2026-07-11 13:35:20 +10:00 · 2023-10-13 12:45:39 +11:00 · 2023-10-12 18:10:52 +11:00 · 2023-10-12 14:08:26 +11:00
25 changed files with 100 additions and 77 deletions
@@ -2,6 +2,8 @@

 import React, { useEffect, useState } from 'react';

+import { usePathname } from 'next/navigation';
+
 import { cn } from '@documenso/ui/lib/utils';

 import { Footer } from '~/components/(marketing)/footer';
@@ -13,6 +15,7 @@ export type MarketingLayoutProps = {

 export default function MarketingLayout({ children }: MarketingLayoutProps) {
  const [scrollY, setScrollY] = useState(0);
+  const pathname = usePathname();

  useEffect(() => {
    const onScroll = () => {
@@ -25,7 +28,11 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
  }, []);

  return (
-    <div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
+    <div
+      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+        'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
+      })}
+    >
      <div
        className={cn('fixed left-0 top-0 z-50 w-full bg-transparent', {
          'bg-background/50 backdrop-blur-md': scrollY > 5,
@@ -130,7 +130,7 @@ export default function SinglePlayerModePage() {
        signer: data.email,
      });

-      router.push(`/single-player-mode/${documentToken}/success`);
+      router.push(`/singleplayer/${documentToken}/success`);
    } catch {
      toast({
        title: 'Something went wrong',
@@ -4,7 +4,6 @@ import { Caveat, Inter } from 'next/font/google';

 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
-import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';

@@ -64,9 +63,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
      <body>
        <FeatureFlagProvider initialFlags={flags}>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <PlausibleProvider>
-              <TrpcProvider>{children}</TrpcProvider>
-            </PlausibleProvider>
+            <PlausibleProvider>{children}</PlausibleProvider>
          </ThemeProvider>
        </FeatureFlagProvider>

@@ -23,7 +23,7 @@ const SOCIAL_LINKS = [

 const FOOTER_LINKS = [
  { href: '/pricing', text: 'Pricing' },
-  { href: '/single-player-mode', text: 'Single Player Mode' },
+  { href: '/singleplayer', text: 'Singleplayer' },
  { href: '/blog', text: 'Blog' },
  { href: '/open', text: 'Open' },
  { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
@@ -35,7 +35,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {

        {isSinglePlayerModeMarketingEnabled && (
          <Link
-            href="/single-player-mode"
+            href="/singleplayer"
            className="bg-primary dark:text-background rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
          >
            Try now!
@@ -134,9 +134,9 @@ export const Hero = ({ className, ...props }: HeroProps) => {
              variants={HeroTitleVariants}
              initial="initial"
              animate="animate"
-              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition duration-300"
+              className="border-primary bg-background hover:bg-muted mx-auto mt-8 w-60 rounded-xl border transition-colors duration-300"
            >
-              <Link href="/single-player-mode" className="block px-4 py-2 text-center">
+              <Link href="/singleplayer" className="block px-4 py-2 text-center">
                <h2 className="text-muted-foreground text-xs font-semibold">
                  Introducing Single Player Mode
                </h2>
@@ -17,8 +17,8 @@ export type MobileNavigationProps = {

 export const MENU_NAVIGATION_LINKS = [
  {
-    href: '/single-player-mode',
-    text: 'Single Player Mode',
+    href: '/singleplayer',
+    text: 'Singleplayer',
  },
  {
    href: '/blog',
@@ -1,8 +1,9 @@
 'use client';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
 export type PasswordRevealProps = {
  password: string;
 };
@@ -4,13 +4,14 @@ import { useEffect, useState } from 'react';

 import Link from 'next/link';

+import { Share } from 'lucide-react';
+
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { base64 } from '@documenso/lib/universal/base64';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
-import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -86,11 +87,11 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
      <div className="relative mt-8 w-full">
        <div className={cn('flex flex-col items-center', className)}>
          <div className="grid w-full max-w-sm grid-cols-2 gap-4">
-            <DocumentShareButton
-              documentId={document.id}
-              token={document.Recipient.token}
-              className="flex-1 bg-transparent backdrop-blur-sm"
-            />
+            {/* TODO: Hook this up */}
+            <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
+              <Share className="mr-2 h-5 w-5" />
+              Share
+            </Button>

            <DocumentDownloadButton
              className="flex-1 bg-transparent backdrop-blur-sm"
@@ -102,7 +103,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
            <Button
              onClick={async () => onShowDocumentClick()}
              loading={isFetchingDocumentFile}
-              className="z-10 col-span-2"
+              className="col-span-2"
            >
              Show document
            </Button>
@@ -1,8 +0,0 @@
-import * as trpcNext from '@documenso/trpc/server/adapters/next';
-import { createTrpcContext } from '@documenso/trpc/server/context';
-import { appRouter } from '@documenso/trpc/server/router';
-
-export default trpcNext.createNextApiHandler({
-  router: appRouter,
-  createContext: async ({ req, res }) => createTrpcContext({ req, res }),
-});
@@ -6,12 +6,13 @@ import { Edit, Pencil, Share } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
 export type DataTableActionButtonProps = {
  row: Document & {
    User: Pick<User, 'id' | 'name' | 'email'>;
@@ -46,7 +47,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
      documentId: row.id,
    });

-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);

    toast({
      title: 'Copied to clipboard',
@@ -18,7 +18,6 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -33,6 +32,8 @@ import {
 } from '@documenso/ui/primitives/dropdown-menu';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
 import { DeleteDraftDocumentDialog } from './delete-draft-document-dialog';

 export type DataTableActionDropdownProps = {
@@ -60,7 +61,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =

  const isOwner = row.User.id === session.user.id;
  // const isRecipient = !!recipient;
-  // const isDraft = row.status === DocumentStatus.DRAFT;
+  const isDraft = row.status === DocumentStatus.DRAFT;
  // const isPending = row.status === DocumentStatus.PENDING;
  const isComplete = row.status === DocumentStatus.COMPLETED;
  // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
@@ -72,7 +73,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
      documentId: row.id,
    });

-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);

    toast({
      title: 'Copied to clipboard',
@@ -165,7 +166,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
          Resend
        </DropdownMenuItem>

-        <DropdownMenuItem onClick={onShareClick}>
+        <DropdownMenuItem disabled={isDraft} onClick={onShareClick}>
          {isCreatingShareLink ? (
            <Loader className="mr-2 h-4 w-4" />
          ) : (
@@ -9,11 +9,12 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
-import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';

 import signingCelebration from '~/assets/signing-celebration.png';

+import { ShareButton } from './share-button';
+
 export type CompletedSigningPageProps = {
  params: {
    token?: string;
@@ -88,7 +89,7 @@ export default async function CompletedSigningPage({
          ))}

        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-          <DocumentShareButton documentId={document.id} token={recipient.token} />
+          <ShareButton documentId={document.id} token={recipient.token} />

          <DocumentDownloadButton
            className="flex-1"
@@ -5,10 +5,8 @@ import { HTMLAttributes, useState } from 'react';
 import { Copy, Share } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';

-import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
  Dialog,
@@ -20,12 +18,14 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';

-export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
+
+export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
  token: string;
  documentId: number;
 };

-export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
+export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
  const { toast } = useToast();
  const [, copyToClipboard] = useCopyToClipboard();

@@ -60,7 +60,7 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
      slug = result.slug;
    }

-    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);

    toast({
      title: 'Copied to clipboard',
@@ -85,7 +85,7 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
    window.open(
      generateTwitterIntent(
        `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
-        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
+        `${window.location.origin}/share/${slug}`,
      ),
      '_blank',
    );
@@ -99,7 +99,7 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
        <Button
          variant="outline"
          disabled={!token || !documentId}
-          className={cn('flex-1', className)}
+          className="flex-1"
          loading={isLoading}
        >
          {!isLoading && <Share className="mr-2 h-5 w-5" />}
@@ -120,12 +120,8 @@ export const DocumentShareButton = ({ token, documentId, className }: DocumentSh
            <span className="font-medium text-blue-400">@documenso</span>
            . Check it out!
            <span className="mt-2 block" />
-            <span
-              className={cn('break-all font-medium text-blue-400', {
-                'animate-pulse': !shareLink?.slug,
-              })}
-            >
-              {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
+            <span className="break-all font-medium text-blue-400">
+              {window.location.origin}/share/{shareLink?.slug || '...'}
            </span>
          </div>

@@ -117,7 +117,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
            name="signature"
            render={({ field: { onChange } }) => (
              <SignaturePad
-                className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                className="h-44 w-full"
+                containerClassName="rounded-lg border bg-background"
                defaultValue={user.signature ?? undefined}
                onChange={(v) => onChange(v ?? '')}
              />
@@ -147,7 +147,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
            name="signature"
            render={({ field: { onChange } }) => (
              <SignaturePad
-                className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                className="h-36 w-full"
+                containerClassName="mt-2 rounded-lg border bg-background"
                onChange={(v) => onChange(v ?? '')}
              />
            )}
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export type CopiedValue = string | null;
+export type CopyFn = (_text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn('Clipboard not supported');
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn('Copy failed', error);
+      setCopiedText(null);
+      return false;
+    }
+  };
+
+  return [copiedText, copy];
+}
@@ -60,26 +60,17 @@ export const calculateTextScaleSize = (
 */
 export function useElementScaleSize(
  container: { width: number; height: number },
-  child: RefObject<HTMLElement | null>,
+  text: string,
  fontSize: number,
  fontFamily: string,
 ) {
  const [scalingFactor, setScalingFactor] = useState(1);

  useEffect(() => {
-    if (!child.current) {
-      return;
-    }
-
-    const scaleSize = calculateTextScaleSize(
-      container,
-      child.current.innerText,
-      `${fontSize}px`,
-      fontFamily,
-    );
+    const scaleSize = calculateTextScaleSize(container, text, `${fontSize}px`, fontFamily);

    setScalingFactor(scaleSize);
-  }, [child, container, fontFamily, fontSize]);
+  }, [text, container, fontFamily, fontSize]);

  return scalingFactor;
 }
@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "DocumentShareLink" DROP CONSTRAINT "DocumentShareLink_documentId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "DocumentShareLink" ADD CONSTRAINT "DocumentShareLink_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;
@@ -219,7 +219,7 @@ model DocumentShareLink {
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt

-  document Document @relation(fields: [documentId], references: [id])
+  document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)

  @@unique([documentId, email])
 }
@@ -56,7 +56,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
  const sheenGradient = useMotionTemplate`linear-gradient(
    30deg,
    transparent,
-    rgba(var(--sheen-color) / ${trackMouse ? sheenOpacity : 0}) ${sheenPosition}%,
+    rgba(var(--sheen-color) / ${sheenOpacity}) ${sheenPosition}%,
    transparent)`;

  const cardRef = useRef<HTMLDivElement>(null);
@@ -98,10 +98,12 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
        void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
        void animate(cardY, 0, { duration: 2, ease: 'backInOut' });

+        void animate(sheenOpacity, 0, { duration: 2, ease: 'backInOut' });
+
        setTrackMouse(false);
      }, 1000);
    },
-    [cardX, cardY, cardCenterPosition, trackMouse],
+    [cardX, cardY, cardCenterPosition, trackMouse, sheenOpacity],
  );

  useEffect(() => {
@@ -126,7 +128,6 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
          transformStyle: 'preserve-3d',
          rotateX,
          rotateY,
-          // willChange: 'transform background-image',
        }}
      >
        <SigningCardContent className="bg-transparent" name={name} />
@@ -70,25 +70,23 @@ export function SinglePlayerModeSignatureField({
    throw new Error('Invalid field type');
  }

-  const $paragraphEl = useRef<HTMLParagraphElement>(null);
-
  const { height, width } = useFieldPageCoords(field);

+  const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
+  const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
+
  const scalingFactor = useElementScaleSize(
    {
      height,
      width,
    },
-    $paragraphEl,
+    insertedTypeSignature || '',
    maxFontSize,
    fontVariableValue,
  );

  const fontSize = maxFontSize * scalingFactor;

-  const insertedBase64Signature = field.inserted && field.Signature?.signatureImageAsBase64;
-  const insertedTypeSignature = field.inserted && field.Signature?.typedSignature;
-
  return (
    <SinglePlayerModeFieldCardContainer field={field}>
      {insertedBase64Signature ? (
@@ -99,7 +97,6 @@ export function SinglePlayerModeSignatureField({
        />
      ) : insertedTypeSignature ? (
        <p
-          ref={$paragraphEl}
          style={{
            fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
            fontFamily: `var(${fontVariable})`,
@@ -145,7 +142,7 @@ export function SinglePlayerModeCustomTextField({
      height,
      width,
    },
-    $paragraphEl,
+    field.customText,
    maxFontSize,
    fontVariableValue,
  );
@@ -22,10 +22,12 @@ const DPI = 2;

 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
  onChange?: (_signatureDataUrl: string | null) => void;
+  containerClassName?: string;
 };

 export const SignaturePad = ({
  className,
+  containerClassName,
  defaultValue,
  onChange,
  ...props
@@ -210,7 +212,7 @@ export const SignaturePad = ({
  }, [defaultValue]);

  return (
-    <div className="relative block">
+    <div className={cn('relative block', containerClassName)}>
      <canvas
        ref={$el}
        className={cn('relative block dark:invert', className)}
@@ -226,7 +228,7 @@ export const SignaturePad = ({
      <div className="absolute bottom-4 right-4">
        <button
          type="button"
-          className="focus-visible:ring-ring ring-offset-background rounded-full p-0 text-xs text-slate-500 focus-visible:outline-none focus-visible:ring-2"
+          className="focus-visible:ring-ring ring-offset-background text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
          onClick={() => onClearClick()}
        >
          Clear Signature
Author	SHA1	Message	Date
David Nguyen	f728dd13c5	fix: add cascade delete for share links	2023-10-13 12:45:39 +11:00
David Nguyen	c803d2c4ba	feat: single-player-mode-polish (#435 )	2023-10-12 18:10:52 +11:00
Udit Takkar	eb5f5f7a90	fix: background color of signature page (#487 )	2023-10-12 14:08:26 +11:00