fix: add correct role names for direct templates (#1179)

## Description

Update the direct template signing process and emails to correctly
reflect the role of the recipient who actioned the direct template.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Dynamic updating of title and description based on recipient role in
the document signing process.
- Enhanced email templates to include recipient roles, providing more
context in email notifications.

- **Improvements**
- More descriptive actions in email templates based on recipient roles,
improving clarity for recipients.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { Field } from '@documenso/prisma/client';
 import { type Recipient } from '@documenso/prisma/client';
 import type { TemplateWithDetails } from '@documenso/prisma/types/template';
@@ -47,6 +48,8 @@ export const DirectTemplatePageView = ({
   const [step, setStep] = useState<DirectTemplateStep>('configure');
   const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
 
+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+
   const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
     configure: {
       title: 'General',
@@ -54,8 +57,8 @@ export const DirectTemplatePageView = ({
       stepIndex: 1,
     },
     sign: {
-      title: 'Sign document',
+      title: `${recipientRoleDescription.actionVerb} document`,
-      description: 'Sign the document to complete the process.',
+      description: `${recipientRoleDescription.actionVerb} the document to complete the process.`,
       stepIndex: 2,
     },
   };

packages/email/templates/document-created-from-direct-template.tsx

@@ -1,3 +1,4 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import config from '@documenso/tailwind-config';
 
 import {
@@ -14,9 +15,11 @@ import {
 } from '../components';
 import TemplateDocumentImage from '../template-components/template-document-image';
 import { TemplateFooter } from '../template-components/template-footer';
+import { RecipientRole } from '.prisma/client';
 
 export type DocumentCompletedEmailTemplateProps = {
   recipientName?: string;
+  recipientRole?: RecipientRole;
   documentLink?: string;
   documentName?: string;
   assetBaseUrl?: string;
@@ -24,11 +27,14 @@ export type DocumentCompletedEmailTemplateProps = {
 
 export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
   recipientName = 'John Doe',
+  recipientRole = RecipientRole.SIGNER,
   documentLink = 'http://localhost:3000',
   documentName = 'Open Source Pledge.pdf',
   assetBaseUrl = 'http://localhost:3002',
 }: DocumentCompletedEmailTemplateProps) => {
-  const previewText = `Completed Document`;
+  const action = RECIPIENT_ROLES_DESCRIPTION[recipientRole].actioned.toLowerCase();
+
+  const previewText = `Document created from direct template`;
 
   const getAssetUrl = (path: string) => {
     return new URL(path, assetBaseUrl).toString();
@@ -61,7 +67,7 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
 
                 <Section>
                   <Text className="text-primary mb-0 text-center text-lg font-semibold">
-                    {recipientName} signed a document by using one of your direct links
+                    {recipientName} {action} a document by using one of your direct links
                   </Text>
 
                   <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -480,6 +480,7 @@ export const createDocumentFromDirectTemplate = async ({
     // Send email to template owner.
     const emailTemplate = createElement(DocumentCreatedFromDirectTemplateEmailTemplate, {
       recipientName: directRecipientEmail,
+      recipientRole: directTemplateRecipient.role,
       documentLink: `${formatDocumentsPath(document.team?.url)}/${document.id}`,
       documentName: document.title,
       assetBaseUrl: NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000',