feat: add organisation template type (#2611)

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -1,7 +1,8 @@
 import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentStatus, EnvelopeType } from '@prisma/client';
+import { DocumentStatus, EnvelopeType, TemplateType } from '@prisma/client';
 import {
   AlertTriangleIcon,
+  Building2Icon,
   Globe2Icon,
   LockIcon,
   RefreshCwIcon,
@@ -94,12 +95,19 @@ export default function EnvelopeEditorHeader() {
 
             {envelope.type === EnvelopeType.TEMPLATE && (
               <>
-                {envelope.templateType === 'PRIVATE' ? (
+                {envelope.templateType === TemplateType.PRIVATE && (
                   <Badge variant="secondary">
                     <LockIcon className="mr-2 h-4 w-4 text-blue-600 dark:text-blue-300" />
                     <Trans>Private Template</Trans>
                   </Badge>
-                ) : (
+                )}
+                {envelope.templateType === TemplateType.ORGANISATION && (
+                  <Badge variant="orange">
+                    <Building2Icon className="mr-2 size-4" />
+                    <Trans>Organisation Template</Trans>
+                  </Badge>
+                )}
+                {envelope.templateType === TemplateType.PUBLIC && (
                   <Badge variant="default">
                     <Globe2Icon className="mr-2 h-4 w-4 text-green-500 dark:text-green-300" />
                     <Trans>Public Template</Trans>

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -9,6 +9,7 @@ import {
   DocumentVisibility,
   EnvelopeType,
   SendStatus,
+  TemplateType,
 } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { InfoIcon, MailIcon, SettingsIcon, ShieldIcon } from 'lucide-react';
@@ -66,6 +67,10 @@ import {
   DocumentVisibilityTooltip,
 } from '@documenso/ui/components/document/document-visibility-select';
 import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
+import {
+  TemplateTypeSelect,
+  TemplateTypeTooltip,
+} from '@documenso/ui/components/template/template-type-select';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
@@ -102,6 +107,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 export const ZAddSettingsFormSchema = z.object({
+  templateType: z.nativeEnum(TemplateType).optional(),
   externalId: z.string().optional(),
   visibility: z.nativeEnum(DocumentVisibility).optional(),
   globalAccessAuth: z
@@ -196,6 +202,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const createDefaultValues = () => {
     return {
+      templateType: envelope.templateType || TemplateType.PRIVATE,
       externalId: envelope.externalId || '',
       visibility: envelope.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || [],
@@ -270,6 +277,7 @@ export const EnvelopeEditorSettingsDialog = ({
     try {
       await updateEnvelopeAsync({
         data: {
+          templateType: envelope.type === EnvelopeType.TEMPLATE ? data.templateType : undefined,
           externalId: data.externalId || null,
           visibility: data.visibility,
           globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],
@@ -606,6 +614,31 @@ export const EnvelopeEditorSettingsDialog = ({
                         )}
                       />
 
+                      {envelope.type === EnvelopeType.TEMPLATE && (
+                        <FormField
+                          control={form.control}
+                          name="templateType"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="flex flex-row items-center">
+                                <Trans>Template type</Trans>
+                                <TemplateTypeTooltip
+                                  organisationTeamCount={organisation.teams.length}
+                                />
+                              </FormLabel>
+
+                              <FormControl>
+                                <TemplateTypeSelect
+                                  value={field.value}
+                                  disabled={field.disabled}
+                                  onValueChange={field.onChange}
+                                />
+                              </FormControl>
+                            </FormItem>
+                          )}
+                        />
+                      )}
+
                       {settings.allowConfigureDistribution && (
                         <FormField
                           control={form.control}

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -136,6 +136,7 @@ export const TemplateEditForm = ({
       templateId: template.id,
       data: {
         title: data.title,
+        type: data.templateType,
         externalId: data.externalId || null,
         visibility: data.visibility,
         globalAccessAuth: parsedGlobalAccessAuth.success ? parsedGlobalAccessAuth.data : [],

apps/remix/app/components/general/template/template-page-view-recipients.tsx

@@ -14,36 +14,40 @@ export type TemplatePageViewRecipientsProps = {
   recipients: Recipient[];
   envelopeId: string;
   templateRootPath: string;
+  readOnly?: boolean;
 };
 
 export const TemplatePageViewRecipients = ({
   recipients,
   envelopeId,
   templateRootPath,
+  readOnly = false,
 }: TemplatePageViewRecipientsProps) => {
   const { _ } = useLingui();
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recipients</Trans>
         </h1>
 
-        <Link
-          to={`${templateRootPath}/${envelopeId}/edit?step=signers`}
-          title={_(msg`Modify recipients`)}
-          className="flex flex-row items-center justify-between"
-        >
-          {recipients.length === 0 ? (
-            <PlusIcon className="ml-2 h-4 w-4" />
-          ) : (
-            <PenIcon className="ml-2 h-3 w-3" />
-          )}
-        </Link>
+        {!readOnly && (
+          <Link
+            to={`${templateRootPath}/${envelopeId}/edit?step=signers`}
+            title={_(msg`Modify recipients`)}
+            className="flex flex-row items-center justify-between"
+          >
+            {recipients.length === 0 ? (
+              <PlusIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <PenIcon className="ml-2 h-3 w-3" />
+            )}
+          </Link>
+        )}
       </div>
 
-      <ul className="text-muted-foreground divide-y border-t">
+      <ul className="divide-y border-t text-muted-foreground">
         {recipients.length === 0 && (
           <li className="flex flex-col items-center justify-center py-6 text-sm">
             <Trans>No recipients</Trans>
@@ -60,13 +64,13 @@ export const TemplatePageViewRecipients = ({
               }
               primaryText={
                 isTemplateRecipientEmailPlaceholder(recipient.email) ? (
-                  <p className="text-muted-foreground text-sm">{recipient.name}</p>
+                  <p className="text-sm text-muted-foreground">{recipient.name}</p>
                 ) : (
-                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                  <p className="text-sm text-muted-foreground">{recipient.email}</p>
                 )
               }
               secondaryText={
-                <p className="text-muted-foreground/70 text-xs">
+                <p className="text-xs text-muted-foreground/70">
                   {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }

apps/remix/app/components/general/template/template-type.tsx

@@ -4,7 +4,7 @@ import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import type { TemplateType as TemplateTypePrisma } from '@prisma/client';
-import { Globe2, Lock } from 'lucide-react';
+import { Building2, Globe2, Lock } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -28,6 +28,11 @@ const TEMPLATE_TYPES: Record<TemplateTypes, TemplateTypeIcon> = {
     icon: Globe2,
     color: 'text-green-500 dark:text-green-300',
   },
+  ORGANISATION: {
+    label: msg`Organisation`,
+    icon: Building2,
+    color: 'text-orange-500 dark:text-orange-300',
+  },
 };
 
 export type TemplateTypeProps = HTMLAttributes<HTMLSpanElement> & {

apps/remix/app/components/tables/templates-table-action-dropdown.tsx

@@ -5,7 +5,6 @@ import type { Recipient, TemplateDirectLink } from '@prisma/client';
 import { Copy, Edit, FolderIcon, MoreHorizontal, Share2Icon, Trash2, Upload } from 'lucide-react';
 import { Link } from 'react-router';
 
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,76 +41,72 @@ export const TemplatesTableActionDropdown = ({
   teamId,
   onDelete,
 }: TemplatesTableActionDropdownProps) => {
-  const { user } = useSession();
-
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
   const [isMoveToFolderDialogOpen, setMoveToFolderDialogOpen] = useState(false);
 
-  const isOwner = row.userId === user.id;
   const isTeamTemplate = row.teamId === teamId;
+  const canMutate = isTeamTemplate;
 
   const formatPath = `${templateRootPath}/${row.envelopeId}/edit`;
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger data-testid="template-table-action-btn">
-        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+        <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
+        <DropdownMenuItem disabled={!canMutate} asChild>
           <Link to={formatPath}>
             <Edit className="mr-2 h-4 w-4" />
             <Trans>Edit</Trans>
           </Link>
         </DropdownMenuItem>
 
-        <DropdownMenuItem
-          disabled={!isOwner && !isTeamTemplate}
-          onClick={() => setDuplicateDialogOpen(true)}
-        >
+        <DropdownMenuItem disabled={!canMutate} onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           <Trans>Duplicate</Trans>
         </DropdownMenuItem>
 
-        <TemplateDirectLinkDialog
-          templateId={row.id}
-          recipients={row.recipients}
-          directLink={row.directLink}
-          trigger={
-            <div
-              data-testid="template-direct-link"
-              className="hover:bg-accent hover:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors"
-            >
-              <Share2Icon className="mr-2 h-4 w-4" />
-              <Trans>Direct link</Trans>
-            </div>
-          }
-        />
+        {canMutate && (
+          <TemplateDirectLinkDialog
+            templateId={row.id}
+            recipients={row.recipients}
+            directLink={row.directLink}
+            trigger={
+              <div
+                data-testid="template-direct-link"
+                className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
+              >
+                <Share2Icon className="mr-2 h-4 w-4" />
+                <Trans>Direct link</Trans>
+              </div>
+            }
+          />
+        )}
 
-        <DropdownMenuItem onClick={() => setMoveToFolderDialogOpen(true)}>
+        <DropdownMenuItem disabled={!canMutate} onClick={() => setMoveToFolderDialogOpen(true)}>
           <FolderIcon className="mr-2 h-4 w-4" />
           <Trans>Move to Folder</Trans>
         </DropdownMenuItem>
 
-        <TemplateBulkSendDialog
-          templateId={row.id}
-          recipients={row.recipients}
-          trigger={
-            <div className="hover:bg-accent hover:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors">
-              <Upload className="mr-2 h-4 w-4" />
-              <Trans>Bulk Send via CSV</Trans>
-            </div>
-          }
-        />
+        {canMutate && (
+          <TemplateBulkSendDialog
+            templateId={row.id}
+            recipients={row.recipients}
+            trigger={
+              <div className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+                <Upload className="mr-2 h-4 w-4" />
+                <Trans>Bulk Send via CSV</Trans>
+              </div>
+            }
+          />
+        )}
 
-        <DropdownMenuItem
-          disabled={!isOwner && !isTeamTemplate}
-          onClick={() => setDeleteDialogOpen(true)}
-        >
+        <DropdownMenuItem disabled={!canMutate} onClick={() => setDeleteDialogOpen(true)}>
           <Trash2 className="mr-2 h-4 w-4" />
           <Trans>Delete</Trans>
         </DropdownMenuItem>

apps/remix/app/components/tables/templates-table.tsx

@@ -3,7 +3,15 @@ import { useMemo, useTransition } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
+import {
+  AlertTriangle,
+  Building2Icon,
+  Globe2Icon,
+  InfoIcon,
+  Link2Icon,
+  Loader,
+  LockIcon,
+} from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -166,25 +174,48 @@ export const TemplatesTable = ({
                       )}
                     </p>
                   </li>
+                  <li>
+                    <h2 className="mb-2 flex flex-row items-center font-semibold">
+                      <Building2Icon className="mr-2 h-5 w-5 text-orange-500 dark:text-orange-300" />
+                      <Trans>Organisation</Trans>
+                    </h2>
+
+                    <p>
+                      <Trans>
+                        Organisation templates are shared across all teams within the same
+                        organisation. Only the owning team can edit them.
+                      </Trans>
+                    </p>
+                  </li>
                 </ul>
               </TooltipContent>
             </Tooltip>
           </div>
         ),
         accessorKey: 'type',
-        cell: ({ row }) => (
-          <div className="flex flex-row items-center">
-            <TemplateType type={row.original.type} />
+        cell: ({ row }) => {
+          const isFromOtherTeam = row.original.teamId !== team?.id;
 
-            {row.original.directLink?.token && (
-              <TemplateDirectLinkBadge
-                className="ml-2"
-                token={row.original.directLink.token}
-                enabled={row.original.directLink.enabled}
-              />
-            )}
-          </div>
-        ),
+          return (
+            <div className="flex flex-row items-center">
+              <TemplateType type={row.original.type} />
+
+              {isFromOtherTeam && row.original.team?.name && (
+                <span className="ml-2 text-xs text-muted-foreground">
+                  ({row.original.team.name})
+                </span>
+              )}
+
+              {row.original.directLink?.token && (
+                <TemplateDirectLinkBadge
+                  className="ml-2"
+                  token={row.original.directLink.token}
+                  enabled={row.original.directLink.enabled}
+                />
+              )}
+            </div>
+          );
+        },
       },
       {
         header: _(msg`Actions`),