fix: rename envelope buttons (#2161)

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -96,7 +96,7 @@ export const TemplateCreateDialog = ({ folderId }: TemplateCreateDialogProps) =>
       <DialogTrigger asChild>
         <Button className="cursor-pointer" disabled={!user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
-          <Trans>New Template</Trans>
+          <Trans>Template (Legacy)</Trans>
         </Button>
       </DialogTrigger>
 

apps/remix/app/components/general/document/document-upload-button-legacy.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
 import { useNavigate, useParams } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -17,7 +18,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
+import { DocumentUploadButton as DocumentUploadButtonPrimitive } from '@documenso/ui/primitives/document-upload-button';
 import {
   Tooltip,
   TooltipContent,
@@ -28,11 +29,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
-export type DocumentUploadButtonProps = {
+export type DocumentUploadButtonLegacyProps = {
   className?: string;
 };
 
-export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) => {
+export const DocumentUploadButtonLegacy = ({ className }: DocumentUploadButtonLegacyProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
@@ -144,12 +145,14 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
         <Tooltip>
           <TooltipTrigger asChild>
             <div>
-              <DocumentDropzone
+              <DocumentUploadButtonPrimitive
                 loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
                 onDrop={async (files) => onFileDrop(files[0])}
                 onDropRejected={onFileDropRejected}
+                type={EnvelopeType.DOCUMENT}
+                internalVersion="1"
               />
             </div>
           </TooltipTrigger>

apps/remix/app/components/general/document/envelope-upload-button.tsx

@@ -18,7 +18,7 @@ import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/t
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 import { cn } from '@documenso/ui/lib/utils';
-import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
+import { DocumentUploadButton } from '@documenso/ui/primitives/document-upload-button';
 import {
   Tooltip,
   TooltipContent,
@@ -175,13 +175,14 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
         <Tooltip>
           <TooltipTrigger asChild>
             <div>
-              <DocumentDropzone
+              <DocumentUploadButton
                 loading={isLoading}
                 disabled={remaining.documents === 0 || !user.emailVerified}
                 disabledMessage={disabledMessage}
                 onDrop={onFileDrop}
                 onDropRejected={onFileDropRejected}
-                type="envelope"
+                type={type}
+                internalVersion="2"
                 maxFiles={maximumEnvelopeItemCount}
               />
             </div>

apps/remix/app/components/general/folder/folder-grid.tsx

@@ -6,7 +6,6 @@ import { FolderIcon, HomeIcon } from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_ENVELOPES_ENABLED } from '@documenso/lib/constants/app';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
@@ -17,7 +16,7 @@ import { FolderDeleteDialog } from '~/components/dialogs/folder-delete-dialog';
 import { FolderMoveDialog } from '~/components/dialogs/folder-move-dialog';
 import { FolderUpdateDialog } from '~/components/dialogs/folder-update-dialog';
 import { TemplateCreateDialog } from '~/components/dialogs/template-create-dialog';
-import { DocumentUploadButton } from '~/components/general/document/document-upload-button';
+import { DocumentUploadButtonLegacy } from '~/components/general/document/document-upload-button-legacy';
 import { FolderCard, FolderCardEmpty } from '~/components/general/folder/folder-card';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -99,14 +98,12 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
         </div>
 
         <div className="flex gap-4 sm:flex-row sm:justify-end">
-          {(IS_ENVELOPES_ENABLED || organisation.organisationClaim.flags.allowEnvelopes) && (
+          <EnvelopeUploadButton type={type} folderId={parentId || undefined} />
-            <EnvelopeUploadButton type={type} folderId={parentId || undefined} />
-          )}
 
           {type === FolderType.DOCUMENT ? (
-            <DocumentUploadButton />
+            <DocumentUploadButtonLegacy /> // If you delete this, delete the component as well.
           ) : (
-            <TemplateCreateDialog folderId={parentId ?? undefined} />
+            <TemplateCreateDialog folderId={parentId ?? undefined} /> // If you delete this, delete the component as well.
           )}
 
           <FolderCreateDialog type={type} />

packages/app-tests/e2e/folders/team-account-folders.spec.ts

@@ -81,7 +81,7 @@ test('[TEAMS]: can create a document inside a document folder', async ({ page })
     redirectPath: `/t/${team.url}/documents/f/${teamFolder.id}`,
   });
 
-  const fileInput = page.locator('input[type="file"]').nth(1);
+  const fileInput = page.locator('input[type="file"]').nth(2);
   await fileInput.waitFor({ state: 'attached' });
 
   await fileInput.setInputFiles(
@@ -368,7 +368,7 @@ test('[TEAMS]: can create a template inside a template folder', async ({ page })
 
   await expect(page.getByText('Team Client Templates')).toBeVisible();
 
-  await page.getByRole('button', { name: 'New Template' }).click();
+  await page.getByRole('button', { name: 'Template (Legacy)' }).click();
 
   await page.getByText('Upload Template Document').click();
 
@@ -842,7 +842,7 @@ test('[TEAMS]: documents inherit folder visibility', async ({ page }) => {
   // Upload document.
   const [fileChooser] = await Promise.all([
     page.waitForEvent('filechooser'),
-    page.getByRole('button', { name: 'Upload Document' }).click(),
+    page.getByRole('button', { name: 'Document (Legacy)' }).click(),
   ]);
 
   await fileChooser.setFiles(

packages/lib/constants/app.ts

@@ -15,5 +15,3 @@ export const API_V2_BETA_URL = '/api/v2-beta';
 export const API_V2_URL = '/api/v2';
 
 export const SUPPORT_EMAIL = env('NEXT_PUBLIC_SUPPORT_EMAIL') ?? 'support@documenso.com';
-
-export const IS_ENVELOPES_ENABLED = env('NEXT_PUBLIC_FEATURE_ENVELOPES_ENABLED') === 'true';

packages/ui/primitives/document-upload-button.tsx

@@ -2,6 +2,7 @@ import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { EnvelopeType } from '@prisma/client';
 import { Upload } from 'lucide-react';
 import type { DropEvent, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
@@ -16,29 +17,32 @@ import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { Button } from './button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
 
-export type DocumentDropzoneProps = {
+export type DocumentUploadButtonProps = {
   className?: string;
   disabled?: boolean;
   loading?: boolean;
   disabledMessage?: MessageDescriptor;
   onDrop?: (_files: File[]) => void | Promise<void>;
   onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
-  type?: 'document' | 'template' | 'envelope';
+  type: EnvelopeType;
+  internalVersion: '1' | '2';
   maxFiles?: number;
   [key: string]: unknown;
 };
 
-export const DocumentDropzone = ({
+export const DocumentUploadButton = ({
   className,
   loading,
   onDrop,
   onDropRejected,
   disabled,
   disabledMessage = msg`You cannot upload documents at this time.`,
-  type = 'document',
+  type,
+  internalVersion,
+
   maxFiles,
   ...props
-}: DocumentDropzoneProps) => {
+}: DocumentUploadButtonProps) => {
   const { _ } = useLingui();
 
   const { organisations } = useSession();
@@ -51,7 +55,7 @@ export const DocumentDropzone = ({
     accept: {
       'application/pdf': ['.pdf'],
     },
-    multiple: type === 'envelope',
+    multiple: internalVersion === '2',
     disabled,
     maxFiles,
     onDrop: (acceptedFiles) => {
@@ -64,9 +68,10 @@ export const DocumentDropzone = ({
   });
 
   const heading = {
-    document: msg`Upload Document`,
+    [EnvelopeType.DOCUMENT]:
-    template: msg`Upload Template Document`,
+      internalVersion === '1' ? msg`Document (Legacy)` : msg`Upload Document`,
-    envelope: msg`Upload Envelope`,
+    [EnvelopeType.TEMPLATE]:
+      internalVersion === '1' ? msg`Template (Legacy)` : msg`Upload Template`,
   };
 
   if (disabled && IS_BILLING_ENABLED()) {