fix: update singleplayer add signature to card

packages/ui/components/document/document-dialog.tsx

@@ -5,20 +5,20 @@ import { useState } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
-import { DocumentDataType } from '@documenso/prisma/client';
+import { DocumentData } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
 import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';
 
 export type DocumentDialogProps = {
-  document: string;
+  documentData: DocumentData;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 /**
  * A dialog which renders the provided document.
  */
-export default function DocumentDialog({ document, ...props }: DocumentDialogProps) {
+export default function DocumentDialog({ documentData, ...props }: DocumentDialogProps) {
   const [documentLoaded, setDocumentLoaded] = useState(false);
 
   const onDocumentLoad = () => {
@@ -41,12 +41,7 @@ export default function DocumentDialog({ document, ...props }: DocumentDialogPro
         >
           <LazyPDFViewerNoLoader
             className="mx-auto w-full max-w-3xl xl:max-w-5xl"
-            documentData={{
-              id: '',
-              data: document,
-              initialData: document,
-              type: DocumentDataType.BYTES_64,
-            }}
+            documentData={documentData}
             onClick={(e) => e.stopPropagation()}
             onDocumentLoad={onDocumentLoad}
           />

packages/ui/components/signing-card.tsx

@@ -5,23 +5,31 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Image, { StaticImageData } from 'next/image';
 
 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
+import { P, match } from 'ts-pattern';
 
+import { Signature } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 export type SigningCardProps = {
   className?: string;
   name: string;
+  signature?: Signature;
   signingCelebrationImage?: StaticImageData;
 };
 
 /**
  * 2D signing card.
  */
-export const SigningCard = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard = ({
+  className,
+  name,
+  signature,
+  signingCelebrationImage,
+}: SigningCardProps) => {
   return (
     <div className={cn('relative w-full max-w-xs md:max-w-sm', className)}>
-      <SigningCardContent name={name} />
+      <SigningCardContent name={name} signature={signature} />
 
       {signingCelebrationImage && (
         <SigningCardImage signingCelebrationImage={signingCelebrationImage} />
@@ -33,7 +41,12 @@ export const SigningCard = ({ className, name, signingCelebrationImage }: Signin
 /**
  * 3D signing card that follows the mouse movement within a certain range.
  */
-export const SigningCard3D = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
+export const SigningCard3D = ({
+  className,
+  name,
+  signature,
+  signingCelebrationImage,
+}: SigningCardProps) => {
   // Should use % based dimensions by calculating the window height/width.
   const boundary = 400;
 
@@ -130,7 +143,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
           rotateY,
         }}
       >
-        <SigningCardContent className="bg-transparent" name={name} />
+        <SigningCardContent className="bg-transparent" name={name} signature={signature} />
       </motion.div>
 
       {signingCelebrationImage && (
@@ -142,10 +155,11 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
 
 type SigningCardContentProps = {
   name: string;
+  signature?: Signature;
   className?: string;
 };
 
-const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
+const SigningCardContent = ({ className, name, signature }: SigningCardContentProps) => {
   return (
     <Card
       className={cn(
@@ -161,14 +175,36 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
           container: 'main',
         }}
       >
-        <span
-          className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
-          style={{
-            fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
-          }}
-        >
-          {name}
-        </span>
+        {match(signature)
+          .with({ signatureImageAsBase64: P.string }, (signature) => (
+            <img
+              src={signature.signatureImageAsBase64}
+              alt="signature"
+              className="h-full max-w-[100%] dark:invert"
+            />
+          ))
+          .with({ typedSignature: P.string }, (signature) => (
+            <span
+              className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+              style={{
+                fontSize: `max(min(4rem, ${(100 / signature.typedSignature.length / 2).toFixed(
+                  4,
+                )}cqw), 1.875rem)`,
+              }}
+            >
+              {signature.typedSignature}
+            </span>
+          ))
+          .otherwise(() => (
+            <span
+              className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+              style={{
+                fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
+              }}
+            >
+              {name}
+            </span>
+          ))}
       </CardContent>
     </Card>
   );

packages/ui/package.json

@@ -67,6 +67,7 @@
     "react-pdf": "7.3.3",
     "react-rnd": "^10.4.1",
     "tailwind-merge": "^1.12.0",
-    "tailwindcss-animate": "^1.0.5"
+    "tailwindcss-animate": "^1.0.5",
+    "ts-pattern": "^5.0.5"
   }
 }