Merge branch 'feat/refresh' into feat/admin-ui-manage-instance

packages/ui/components/document/document-share-button.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+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,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  token: string;
+  documentId: number;
+};
+
+export const DocumentShareButton = ({ token, documentId, className }: DocumentShareButtonProps) => {
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    mutateAsync: createOrGetShareLink,
+    data: shareLink,
+    isLoading,
+  } = trpc.shareLink.createOrGetShareLink.useMutation();
+
+  const onOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      void createOrGetShareLink({
+        token,
+        documentId,
+      });
+    }
+
+    setIsOpen(nextOpen);
+  };
+
+  const onCopyClick = async () => {
+    let { slug = '' } = shareLink || {};
+
+    if (!slug) {
+      const result = await createOrGetShareLink({
+        token,
+        documentId,
+      });
+
+      slug = result.slug;
+    }
+
+    await copyToClipboard(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+
+    setIsOpen(false);
+  };
+
+  const onTweetClick = async () => {
+    let { slug = '' } = shareLink || {};
+
+    if (!slug) {
+      const result = await createOrGetShareLink({
+        token,
+        documentId,
+      });
+
+      slug = result.slug;
+    }
+
+    window.open(
+      generateTwitterIntent(
+        `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
+        `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
+      ),
+      '_blank',
+    );
+
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={!token || !documentId}
+          className={cn('flex-1', className)}
+          loading={isLoading}
+        >
+          {!isLoading && <Share className="mr-2 h-5 w-5" />}
+          Share
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="end">
+        <DialogHeader>
+          <DialogTitle>Share</DialogTitle>
+
+          <DialogDescription className="mt-4">Share your signing experience!</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex w-full flex-col">
+          <div className="rounded-md border p-4">
+            I just {token ? 'signed' : 'sent'} a document with{' '}
+            <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>
+          </div>
+
+          <Button variant="outline" className="mt-4" onClick={onTweetClick}>
+            <FaXTwitter className="mr-2 h-4 w-4" />
+            Tweet
+          </Button>
+
+          <div className="relative flex items-center justify-center gap-x-4 py-4 text-xs uppercase">
+            <div className="bg-border h-px flex-1" />
+            <span className="text-muted-foreground bg-transparent">Or</span>
+            <div className="bg-border h-px flex-1" />
+          </div>
+
+          <Button variant="outline" onClick={onCopyClick}>
+            <Copy className="mr-2 h-4 w-4" />
+            Copy Link
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

packages/ui/components/signing-card.tsx

@@ -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} />

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -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,
   );

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -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