feat: polish envelopes (#2090)

## Description

The rest of the owl

packages/ui/primitives/command.tsx

@@ -25,14 +25,25 @@ Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = DialogProps & {
   commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+  position?: 'start' | 'end' | 'center';
+  dialogContentClassName?: string;
 };
 
-const CommandDialog = ({ children, commandProps, ...props }: CommandDialogProps) => {
+const CommandDialog = ({
+  children,
+  commandProps,
+  position = 'center',
+  dialogContentClassName,
+  ...props
+}: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent
-        className="w-11/12 items-center overflow-hidden rounded-lg p-0 shadow-2xl lg:mt-0"
-        position="center"
+        className={cn(
+          'w-11/12 items-center overflow-hidden rounded-lg p-0 shadow-2xl lg:mt-0',
+          dialogContentClassName,
+        )}
+        position={position}
         overlayClassName="bg-background/60"
       >
         <Command

packages/ui/primitives/document-dropzone.tsx

@@ -4,6 +4,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { AlertTriangle, Plus } from 'lucide-react';
+import type { FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { Link } from 'react-router';
 
@@ -31,8 +32,9 @@ export type DocumentDropzoneProps = {
   disabledHeading?: MessageDescriptor;
   disabledMessage?: MessageDescriptor;
   onDrop?: (_file: File[]) => void | Promise<void>;
-  onDropRejected?: () => void | Promise<void>;
+  onDropRejected?: (fileRejections: FileRejection[]) => void;
   type?: 'document' | 'template';
+  maxFiles?: number;
   [key: string]: unknown;
 };
 
@@ -45,6 +47,7 @@ export const DocumentDropzone = ({
   disabledHeading,
   disabledMessage = msg`You cannot upload documents at this time.`,
   type = 'document',
+  maxFiles,
   ...props
 }: DocumentDropzoneProps) => {
   const { _ } = useLingui();
@@ -62,11 +65,8 @@ export const DocumentDropzone = ({
         void onDrop(acceptedFiles);
       }
     },
-    onDropRejected: () => {
-      if (onDropRejected) {
-        void onDropRejected();
-      }
-    },
+    onDropRejected,
+    maxFiles,
     maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });
 

packages/ui/primitives/document-flow/field-item-advanced-settings.tsx

@@ -122,6 +122,7 @@ const getDefaultState = (fieldType: FieldType): FieldMeta => {
         values: [],
         required: false,
         readOnly: false,
+        direction: 'vertical',
       };
     case FieldType.CHECKBOX:
       return {

packages/ui/primitives/document-flow/field-items-advanced-settings/constants.ts

@@ -31,4 +31,4 @@ export const checkboxValidationSigns = [
     label: 'Select at most',
     value: '<=',
   },
-];
+] as const;

packages/ui/primitives/document-flow/field-items-advanced-settings/radio-field.tsx

@@ -72,7 +72,13 @@ export const RadioFieldAdvancedSettings = ({
     setReadOnly(readOnly);
     setRequired(required);
 
-    const errors = validateRadioField(String(value), { readOnly, required, values, type: 'radio' });
+    const errors = validateRadioField(String(value), {
+      readOnly,
+      required,
+      values,
+      type: 'radio',
+      direction: 'vertical',
+    });
     handleErrors(errors);
 
     handleFieldChange(field, value);
@@ -97,7 +103,13 @@ export const RadioFieldAdvancedSettings = ({
   }, [fieldState.values]);
 
   useEffect(() => {
-    const errors = validateRadioField(undefined, { readOnly, required, values, type: 'radio' });
+    const errors = validateRadioField(undefined, {
+      readOnly,
+      required,
+      values,
+      type: 'radio',
+      direction: 'vertical',
+    });
     handleErrors(errors);
   }, [values]);
 

packages/ui/primitives/document-upload.tsx

@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Upload } from 'lucide-react';
+import type { DropEvent, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { Link } from 'react-router';
 
@@ -21,8 +22,9 @@ export type DocumentDropzoneProps = {
   loading?: boolean;
   disabledMessage?: MessageDescriptor;
   onDrop?: (_files: File[]) => void | Promise<void>;
-  onDropRejected?: () => void | Promise<void>;
+  onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
   type?: 'document' | 'template' | 'envelope';
+  maxFiles?: number;
   [key: string]: unknown;
 };
 
@@ -34,6 +36,7 @@ export const DocumentDropzone = ({
   disabled,
   disabledMessage = msg`You cannot upload documents at this time.`,
   type = 'document',
+  maxFiles,
   ...props
 }: DocumentDropzoneProps) => {
   const { _ } = useLingui();
@@ -50,17 +53,13 @@ export const DocumentDropzone = ({
     },
     multiple: type === 'envelope',
     disabled,
-    maxFiles: 10, // Todo: Envelopes - Use claims. And also update other places where this is used.
+    maxFiles,
     onDrop: (acceptedFiles) => {
       if (acceptedFiles.length > 0 && onDrop) {
         void onDrop(acceptedFiles);
       }
     },
-    onDropRejected: () => {
-      if (onDropRejected) {
-        void onDropRejected();
-      }
-    },
+    onDropRejected,
     maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
   });