fix: merge conflicts

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>
+  );
+};

packages/ui/components/document/document-email-checkboxes.tsx

@@ -0,0 +1,222 @@
+import { Trans } from '@lingui/macro';
+import { InfoIcon } from 'lucide-react';
+
+import { DocumentEmailEvents } from '@documenso/lib/types/document-email';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { cn } from '../../lib/utils';
+import { Checkbox } from '../../primitives/checkbox';
+
+type Value = Record<DocumentEmailEvents, boolean>;
+
+type DocumentEmailCheckboxesProps = {
+  value: Value;
+  onChange: (value: Value) => void;
+  className?: string;
+};
+
+export const DocumentEmailCheckboxes = ({
+  value,
+  onChange,
+  className,
+}: DocumentEmailCheckboxesProps) => {
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div className="flex flex-row items-center">
+        <Checkbox
+          id={DocumentEmailEvents.RecipientSigningRequest}
+          className="h-5 w-5"
+          checkClassName="dark:text-white text-primary"
+          checked={value.recipientSigningRequest}
+          onCheckedChange={(checked) =>
+            onChange({ ...value, [DocumentEmailEvents.RecipientSigningRequest]: Boolean(checked) })
+          }
+        />
+
+        <label
+          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+          htmlFor={DocumentEmailEvents.RecipientSigningRequest}
+        >
+          <Trans>Send recipient signing request email</Trans>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="mx-2 h-4 w-4" />
+            </TooltipTrigger>
+
+            <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+              <h2>
+                <strong>
+                  <Trans>Recipient signing request email</Trans>
+                </strong>
+              </h2>
+
+              <p>
+                <Trans>
+                  This email is sent to the recipient requesting them to sign the document.
+                </Trans>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </label>
+      </div>
+
+      <div className="flex flex-row items-center">
+        <Checkbox
+          id={DocumentEmailEvents.RecipientRemoved}
+          className="h-5 w-5"
+          checkClassName="dark:text-white text-primary"
+          checked={value.recipientRemoved}
+          onCheckedChange={(checked) =>
+            onChange({ ...value, [DocumentEmailEvents.RecipientRemoved]: Boolean(checked) })
+          }
+        />
+
+        <label
+          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+          htmlFor={DocumentEmailEvents.RecipientRemoved}
+        >
+          <Trans>Send recipient removed email</Trans>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="mx-2 h-4 w-4" />
+            </TooltipTrigger>
+
+            <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+              <h2>
+                <strong>
+                  <Trans>Recipient removed email</Trans>
+                </strong>
+              </h2>
+
+              <p>
+                <Trans>
+                  This email is sent to the recipient if they are removed from a pending document.
+                </Trans>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </label>
+      </div>
+
+      <div className="flex flex-row items-center">
+        <Checkbox
+          id={DocumentEmailEvents.DocumentPending}
+          className="h-5 w-5"
+          checkClassName="dark:text-white text-primary"
+          checked={value.documentPending}
+          onCheckedChange={(checked) =>
+            onChange({ ...value, [DocumentEmailEvents.DocumentPending]: Boolean(checked) })
+          }
+        />
+
+        <label
+          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+          htmlFor={DocumentEmailEvents.DocumentPending}
+        >
+          <Trans>Send document pending email</Trans>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="mx-2 h-4 w-4" />
+            </TooltipTrigger>
+
+            <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+              <h2>
+                <strong>
+                  <Trans>Document pending email</Trans>
+                </strong>
+              </h2>
+
+              <p>
+                <Trans>
+                  This email will be sent to the recipient who has just signed the document, if
+                  there are still other recipients who have not signed yet.
+                </Trans>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </label>
+      </div>
+
+      <div className="flex flex-row items-center">
+        <Checkbox
+          id={DocumentEmailEvents.DocumentCompleted}
+          className="h-5 w-5"
+          checkClassName="dark:text-white text-primary"
+          checked={value.documentCompleted}
+          onCheckedChange={(checked) =>
+            onChange({ ...value, [DocumentEmailEvents.DocumentCompleted]: Boolean(checked) })
+          }
+        />
+
+        <label
+          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+          htmlFor={DocumentEmailEvents.DocumentCompleted}
+        >
+          <Trans>Send document completed email</Trans>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="mx-2 h-4 w-4" />
+            </TooltipTrigger>
+
+            <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+              <h2>
+                <strong>
+                  <Trans>Document completed email</Trans>
+                </strong>
+              </h2>
+
+              <p>
+                <Trans>
+                  This will be sent to all recipients once the document has been fully completed.
+                </Trans>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </label>
+      </div>
+
+      <div className="flex flex-row items-center">
+        <Checkbox
+          id={DocumentEmailEvents.DocumentDeleted}
+          className="h-5 w-5"
+          checkClassName="dark:text-white text-primary"
+          checked={value.documentDeleted}
+          onCheckedChange={(checked) =>
+            onChange({ ...value, [DocumentEmailEvents.DocumentDeleted]: Boolean(checked) })
+          }
+        />
+
+        <label
+          className="text-muted-foreground ml-2 flex flex-row items-center text-sm"
+          htmlFor={DocumentEmailEvents.DocumentDeleted}
+        >
+          <Trans>Send document deleted email</Trans>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <InfoIcon className="mx-2 h-4 w-4" />
+            </TooltipTrigger>
+
+            <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+              <h2>
+                <strong>
+                  <Trans>Document deleted email</Trans>
+                </strong>
+              </h2>
+
+              <p>
+                <Trans>
+                  This will be sent to all recipients if a pending document has been deleted.
+                </Trans>
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </label>
+      </div>
+    </div>
+  );
+};

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

@@ -139,12 +139,16 @@ export const DocumentShareButton = ({
 
       <DialogContent position="end">
         <DialogHeader>
-          <DialogTitle>Share your signing experience!</DialogTitle>
+          <DialogTitle>
+            <Trans>Share your signing experience!</Trans>
+          </DialogTitle>
 
           <DialogDescription className="mt-4">
-            Rest assured, your document is strictly confidential and will never be shared. Only your
-            signing experience will be highlighted. Share your personalized signing card to showcase
-            your signature!
+            <Trans>
+              Rest assured, your document is strictly confidential and will never be shared. Only
+              your signing experience will be highlighted. Share your personalized signing card to
+              showcase your signature!
+            </Trans>
           </DialogDescription>
         </DialogHeader>
 
@@ -187,7 +191,7 @@ export const DocumentShareButton = ({
 
             <Button variant="outline" className="flex-1" onClick={onCopyClick}>
               <Copy className="mr-2 h-4 w-4" />
-              Copy Link
+              <Trans>Copy Link</Trans>
             </Button>
           </div>
         </div>

packages/ui/components/document/document-visibility-select.tsx

@@ -16,14 +16,17 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
 
 export type DocumentVisibilitySelectType = SelectProps & {
   currentMemberRole?: string;
+  isTeamSettings?: boolean;
+  disabled?: boolean;
 };
 
 export const DocumentVisibilitySelect = forwardRef<HTMLButtonElement, DocumentVisibilitySelectType>(
-  ({ currentMemberRole, ...props }, ref) => {
-    const canUpdateVisibility = currentMemberRole === 'ADMIN' || currentMemberRole === 'MANAGER';
+  ({ currentMemberRole, isTeamSettings = false, disabled, ...props }, ref) => {
+    const canUpdateVisibility =
+      currentMemberRole === 'ADMIN' || currentMemberRole === 'MANAGER' || isTeamSettings;
 
     return (
-      <Select {...props} disabled={!canUpdateVisibility}>
+      <Select {...props} disabled={(!canUpdateVisibility && !isTeamSettings) || disabled}>
         <SelectTrigger ref={ref} className="bg-background text-muted-foreground">
           <SelectValue data-testid="documentVisibilitySelectValue" placeholder="Everyone" />
         </SelectTrigger>
@@ -32,18 +35,15 @@ export const DocumentVisibilitySelect = forwardRef<HTMLButtonElement, DocumentVi
           <SelectItem value={DocumentVisibility.EVERYONE}>
             {DOCUMENT_VISIBILITY.EVERYONE.value}
           </SelectItem>
-
-          {(currentMemberRole === 'ADMIN' || currentMemberRole === 'MANAGER') && (
-            <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
-              {DOCUMENT_VISIBILITY.MANAGER_AND_ABOVE.value}
-            </SelectItem>
-          )}
-
-          {currentMemberRole === 'ADMIN' && (
-            <SelectItem value={DocumentVisibility.ADMIN}>
-              {DOCUMENT_VISIBILITY.ADMIN.value}
-            </SelectItem>
-          )}
+          <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE} disabled={!canUpdateVisibility}>
+            {DOCUMENT_VISIBILITY.MANAGER_AND_ABOVE.value}
+          </SelectItem>
+          <SelectItem
+            value={DocumentVisibility.ADMIN}
+            disabled={currentMemberRole !== 'ADMIN' && !isTeamSettings}
+          >
+            {DOCUMENT_VISIBILITY.ADMIN.value}
+          </SelectItem>
         </SelectContent>
       </Select>
     );