mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 16:23:06 +10:00
feat: add extra info for recipient roles (#1105)
## Description Add additional information for each role to help document owners understand what each role involves. ## Changes Made    ## Testing Performed Tested the changes locally. ## Checklist <!--- Please check the boxes that apply to this pull request. --> <!--- You can add or remove items as needed. --> - [x] I have tested these changes locally and they work as expected. - [ ] I have added/updated tests that prove the effectiveness of these changes. - [ ] I have updated the documentation to reflect these changes, if applicable. - [x] I have followed the project's coding style guidelines. - [ ] I have addressed the code review feedback from the previous submission, if applicable. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Updated recipient role terminology and added tooltips in the `AddSignersFormPartial` component: - "Signer" changed to "Needs to sign" with tooltip - "Receives copy" changed to "Needs to approve" with tooltip - "Approver" changed to "Needs to view" with tooltip - "Viewer" changed to "Receives copy" with tooltip - Enhanced select dropdown options with icons and tooltips for different recipient roles in the `AddTemplatePlaceholderRecipients` component. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Timur Ercan <timur.ercan31@gmail.com>
This commit is contained in:
Catalin Pit
GitHub
@ -361,29 +361,83 @@ export const AddSignersFormPartial = ({
|
|||||||
<SelectContent align="end">
|
<SelectContent align="end">
|
||||||
<SelectItem value={RecipientRole.SIGNER}>
|
<SelectItem value={RecipientRole.SIGNER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
|
||||||
Signer
|
Needs to sign
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
<SelectItem value={RecipientRole.CC}>
|
<InfoIcon className="h-4 w-4" />
|
||||||
<div className="flex items-center">
|
</TooltipTrigger>
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
Receives copy
|
<p>
|
||||||
|
The recipient is required to sign the document for it to be
|
||||||
|
completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
|
|
||||||
<SelectItem value={RecipientRole.APPROVER}>
|
<SelectItem value={RecipientRole.APPROVER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
|
<div className="flex w-[150px] items-center">
|
||||||
Approver
|
<span className="mr-2">
|
||||||
|
{ROLE_ICONS[RecipientRole.APPROVER]}
|
||||||
|
</span>
|
||||||
|
Needs to approve
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is required to approve the document for it to
|
||||||
|
be completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
|
|
||||||
<SelectItem value={RecipientRole.VIEWER}>
|
<SelectItem value={RecipientRole.VIEWER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
|
||||||
Viewer
|
Needs to view
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is required to view the document for it to be
|
||||||
|
completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
|
||||||
|
<SelectItem value={RecipientRole.CC}>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
|
||||||
|
Receives copy
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is not required to take any action and
|
||||||
|
receives a copy of the document after it is completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import React, { useId, useState } from 'react';
|
|||||||
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { AnimatePresence, motion } from 'framer-motion';
|
import { AnimatePresence, motion } from 'framer-motion';
|
||||||
import { Plus, Trash } from 'lucide-react';
|
import { InfoIcon, Plus, Trash } from 'lucide-react';
|
||||||
import { useSession } from 'next-auth/react';
|
import { useSession } from 'next-auth/react';
|
||||||
import { Controller, useFieldArray, useForm } from 'react-hook-form';
|
import { Controller, useFieldArray, useForm } from 'react-hook-form';
|
||||||
|
|
||||||
@ -25,6 +25,7 @@ import type { DocumentFlowStep } from '../document-flow/types';
|
|||||||
import { ROLE_ICONS } from '../recipient-role-icons';
|
import { ROLE_ICONS } from '../recipient-role-icons';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
|
import { Select, SelectContent, SelectItem, SelectTrigger } from '../select';
|
||||||
import { useStep } from '../stepper';
|
import { useStep } from '../stepper';
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
|
||||||
import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
|
import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
|
||||||
import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
|
import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types';
|
||||||
|
|
||||||
@ -159,29 +160,81 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
|
|||||||
<SelectContent className="" align="end">
|
<SelectContent className="" align="end">
|
||||||
<SelectItem value={RecipientRole.SIGNER}>
|
<SelectItem value={RecipientRole.SIGNER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
|
||||||
Signer
|
Needs to sign
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
<SelectItem value={RecipientRole.CC}>
|
<InfoIcon className="h-4 w-4" />
|
||||||
<div className="flex items-center">
|
</TooltipTrigger>
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
Receives copy
|
<p>
|
||||||
|
The recipient is required to sign the document for it to be
|
||||||
|
completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
|
|
||||||
<SelectItem value={RecipientRole.APPROVER}>
|
<SelectItem value={RecipientRole.APPROVER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
|
||||||
Approver
|
Needs to approve
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is required to approve the document for it to be
|
||||||
|
completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
|
|
||||||
<SelectItem value={RecipientRole.VIEWER}>
|
<SelectItem value={RecipientRole.VIEWER}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
<span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
|
||||||
Viewer
|
Needs to view
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is required to view the document for it to be
|
||||||
|
completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
|
||||||
|
<SelectItem value={RecipientRole.CC}>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex w-[150px] items-center">
|
||||||
|
<span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
|
||||||
|
Receives copy
|
||||||
|
</div>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<InfoIcon className="h-4 w-4" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
|
||||||
|
<p>
|
||||||
|
The recipient is not required to take any action and receives a
|
||||||
|
copy of the document after it is completed.
|
||||||
|
</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</SelectItem>
|
</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
|
|||||||
Reference in New Issue
Block a user