From 3d3c53db023a5910792740bb52d575e79e841d9c Mon Sep 17 00:00:00 2001 From: Catalin Pit <25515812+catalinpit@users.noreply.github.com> Date: Wed, 17 Apr 2024 15:36:54 +0300 Subject: [PATCH] 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 ![CleanShot 2024-04-16 at 10 24 19](https://github.com/documenso/documenso/assets/25515812/bac6cd7d-fbe2-4987-ac17-de08db882eda) ![CleanShot 2024-04-16 at 10 24 27](https://github.com/documenso/documenso/assets/25515812/1bd23021-e971-451a-8e36-df5db57687f7) ![CleanShot 2024-04-16 at 10 24 35](https://github.com/documenso/documenso/assets/25515812/e658e86e-7fa1-4a40-9ed9-317964388e61) ## Testing Performed Tested the changes locally. ## Checklist - [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. ## 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. --------- Co-authored-by: Timur Ercan --- .../primitives/document-flow/add-signers.tsx | 80 +++++++++++++++--- .../add-template-placeholder-recipients.tsx | 81 +++++++++++++++---- 2 files changed, 134 insertions(+), 27 deletions(-) diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx index 27839a453..25169bcec 100644 --- a/packages/ui/primitives/document-flow/add-signers.tsx +++ b/packages/ui/primitives/document-flow/add-signers.tsx @@ -361,29 +361,83 @@ export const AddSignersFormPartial = ({
- {ROLE_ICONS[RecipientRole.SIGNER]} - Signer -
- - - -
- {ROLE_ICONS[RecipientRole.CC]} - Receives copy +
+ {ROLE_ICONS[RecipientRole.SIGNER]} + Needs to sign +
+ + + + + +

+ The recipient is required to sign the document for it to be + completed. +

+ +
- {ROLE_ICONS[RecipientRole.APPROVER]} - Approver +
+ + {ROLE_ICONS[RecipientRole.APPROVER]} + + Needs to approve +
+ + + + + +

+ The recipient is required to approve the document for it to + be completed. +

+ +
- {ROLE_ICONS[RecipientRole.VIEWER]} - Viewer +
+ {ROLE_ICONS[RecipientRole.VIEWER]} + Needs to view +
+ + + + + +

+ The recipient is required to view the document for it to be + completed. +

+ + +
+ + + +
+
+ {ROLE_ICONS[RecipientRole.CC]} + Receives copy +
+ + + + + +

+ The recipient is not required to take any action and + receives a copy of the document after it is completed. +

+ +
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx index 08cfc4957..e415f1aac 100644 --- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx +++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx @@ -4,7 +4,7 @@ import React, { useId, useState } from 'react'; import { zodResolver } from '@hookform/resolvers/zod'; 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 { 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 { Select, SelectContent, SelectItem, SelectTrigger } from '../select'; import { useStep } from '../stepper'; +import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'; import type { TAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types'; import { ZAddTemplatePlacholderRecipientsFormSchema } from './add-template-placeholder-recipients.types'; @@ -159,29 +160,81 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
- {ROLE_ICONS[RecipientRole.SIGNER]} - Signer -
- - - -
- {ROLE_ICONS[RecipientRole.CC]} - Receives copy +
+ {ROLE_ICONS[RecipientRole.SIGNER]} + Needs to sign +
+ + + + + +

+ The recipient is required to sign the document for it to be + completed. +

+ +
- {ROLE_ICONS[RecipientRole.APPROVER]} - Approver +
+ {ROLE_ICONS[RecipientRole.APPROVER]} + Needs to approve +
+ + + + + +

+ The recipient is required to approve the document for it to be + completed. +

+ +
- {ROLE_ICONS[RecipientRole.VIEWER]} - Viewer +
+ {ROLE_ICONS[RecipientRole.VIEWER]} + Needs to view +
+ + + + + +

+ The recipient is required to view the document for it to be + completed. +

+ + +
+ + + +
+
+ {ROLE_ICONS[RecipientRole.CC]} + Receives copy +
+ + + + + +

+ The recipient is not required to take any action and receives a + copy of the document after it is completed. +

+ +