fix: recipients with CC role not being editable (#918)

## Description

Fixed issue where setting a recipient role as CC will prevent any
further changes as it is considered as "sent" and "signed".

## Other changes

- Prevent editing document after completed
- Removed CC and Viewers from the field recipient list since they will
never be filled
- Minor UI issues

## Checklist

- [X] I have tested these changes locally and they work as expected.
- [X] I have added/updated tests that prove the effectiveness of these
changes.
- [X] I have followed the project's coding style guidelines.

packages/ui/primitives/document-flow/add-fields.tsx

@@ -304,6 +304,13 @@ export const AddFieldsFormPartial = ({
     return recipientsByRole;
   }, [recipients]);
 
+  const recipientsByRoleToDisplay = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return (Object.entries(recipientsByRole) as [RecipientRole, Recipient[]][]).filter(
+      ([role]) => role !== RecipientRole.CC && role !== RecipientRole.VIEWER,
+    );
+  }, [recipientsByRole]);
+
   return (
     <>
       <DocumentFlowFormContainerHeader
@@ -382,13 +389,10 @@ export const AddFieldsFormPartial = ({
                     </span>
                   </CommandEmpty>
 
-                  {Object.entries(recipientsByRole).map(([role, recipients], roleIndex) => (
+                  {recipientsByRoleToDisplay.map(([role, recipients], roleIndex) => (
                     <CommandGroup key={roleIndex}>
                       <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                        {
-                          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                          RECIPIENT_ROLES_DESCRIPTION[role as RecipientRole].roleName
-                        }
+                        {`${RECIPIENT_ROLES_DESCRIPTION[role].roleName}s`}
                       </div>
 
                       {recipients.length === 0 && (
@@ -403,7 +407,7 @@ export const AddFieldsFormPartial = ({
                       {recipients.map((recipient) => (
                         <CommandItem
                           key={recipient.id}
-                          className={cn('px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
+                          className={cn('px-2 last:mb-1 [&:not(:first-child)]:mt-1', {
                             'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                           })}
                           onSelect={() => {
@@ -413,7 +417,7 @@ export const AddFieldsFormPartial = ({
                         >
                           <span
                             className={cn('text-foreground/70 truncate', {
-                              'text-foreground': recipient === selectedSigner,
+                              'text-foreground/80': recipient === selectedSigner,
                             })}
                           >
                             {recipient.name && (

packages/ui/primitives/document-flow/add-signers.tsx

@@ -105,7 +105,10 @@ export const AddSignersFormPartial = ({
     }
 
     return recipients.some(
-      (recipient) => recipient.id === id && recipient.sendStatus === SendStatus.SENT,
+      (recipient) =>
+        recipient.id === id &&
+        recipient.sendStatus === SendStatus.SENT &&
+        recipient.role !== RecipientRole.CC,
     );
   };