feat: add signing link copy (#1449)

packages/lib/utils/recipients.ts

@@ -1,5 +1,9 @@
 import { type Field, type Recipient, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '../constants/app';
+
+export const formatSigningLink = (token: string) => `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${token}`;
+
 /**
  * Whether a recipient can be modified by the document owner.
  */

packages/ui/components/common/copy-text-button.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState } from 'react';
+
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
+import { CheckSquareIcon, CopyIcon } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { cn } from '../../lib/utils';
+
+export type CopyTextButtonProps = {
+  value: string;
+  badgeContentUncopied?: React.ReactNode;
+  badgeContentCopied?: React.ReactNode;
+  onCopySuccess?: () => void;
+};
+
+export const CopyTextButton = ({
+  value,
+  onCopySuccess,
+  badgeContentUncopied,
+  badgeContentCopied,
+}: CopyTextButtonProps) => {
+  const [, copy] = useCopyToClipboard();
+
+  const [copiedTimeout, setCopiedTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const onCopy = async () => {
+    await copy(value).then(() => onCopySuccess?.());
+
+    if (copiedTimeout) {
+      clearTimeout(copiedTimeout);
+    }
+
+    setCopiedTimeout(
+      setTimeout(() => {
+        setCopiedTimeout(null);
+      }, 2000),
+    );
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="none"
+      className="ml-2 h-7 rounded border bg-neutral-50 px-0.5 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+      onClick={async () => onCopy()}
+    >
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          className="flex flex-row items-center"
+          key={copiedTimeout ? 'copied' : 'copy'}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.1 } }}
+        >
+          {copiedTimeout ? badgeContentCopied : badgeContentUncopied}
+
+          <div
+            className={cn(
+              'flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400',
+              {
+                'ml-1': Boolean(badgeContentCopied || badgeContentUncopied),
+              },
+            )}
+          >
+            <div className="absolute">
+              {copiedTimeout ? (
+                <CheckSquareIcon className="h-3.5 w-3.5" />
+              ) : (
+                <CopyIcon className="h-3.5 w-3.5" />
+              )}
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </Button>
+  );
+};