feat: add organisations (#1820)

2025-11-14 16:51:38 +10:00 · 2025-06-10 11:49:52 +10:00
parent 0b37f19641
commit e6dc237ad2
631 changed files with 37616 additions and 25695 deletions
--- a/packages/ui/primitives/alert.tsx
+++ b/packages/ui/primitives/alert.tsx
@ -39,7 +39,7 @@ const Alert = React.forwardRef<
  <div
    ref={ref}
    role="alert"
-    className={cn(alertVariants({ variant, padding }), className)}
+    className={cn('space-y-2', alertVariants({ variant, padding }), className)}
    {...props}
  />
 ));
@ -58,7 +58,7 @@ const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('mt-2 text-sm', className)} {...props} />
+  <div ref={ref} className={cn('text-sm', className)} {...props} />
 ));

 AlertDescription.displayName = 'AlertDescription';
--- a/packages/ui/primitives/data-table.tsx
+++ b/packages/ui/primitives/data-table.tsx
@ -26,6 +26,7 @@ export interface DataTableProps<TData, TValue> {
  totalPages?: number;
  onPaginationChange?: (_page: number, _perPage: number) => void;
  onClearFilters?: () => void;
+  emptyState?: React.ReactNode;
  hasFilters?: boolean;
  children?: DataTableChildren<TData>;
  skeleton?: {
@ -52,6 +53,7 @@ export function DataTable<TData, TValue>({
  onClearFilters,
  onPaginationChange,
  children,
+  emptyState,
 }: DataTableProps<TData, TValue>) {
  const pagination = useMemo<PaginationState>(() => {
    if (currentPage !== undefined && perPage !== undefined) {
@ -142,17 +144,21 @@ export function DataTable<TData, TValue>({
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-32 text-center">
-                  <p>
-                    <Trans>No results found</Trans>
-                  </p>
+                  {emptyState ?? (
+                    <>
+                      <p>
+                        <Trans>No results found</Trans>
+                      </p>

-                  {hasFilters && onClearFilters !== undefined && (
-                    <button
-                      onClick={() => onClearFilters()}
-                      className="text-foreground mt-1 text-sm"
-                    >
-                      <Trans>Clear filters</Trans>
-                    </button>
+                      {hasFilters && onClearFilters !== undefined && (
+                        <button
+                          onClick={() => onClearFilters()}
+                          className="text-foreground mt-1 text-sm"
+                        >
+                          <Trans>Clear filters</Trans>
+                        </button>
+                      )}
+                    </>
                  )}
                </TableCell>
              </TableRow>
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@ -7,6 +7,7 @@ import { AlertTriangle, Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 import { Link } from 'react-router';

+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';

@ -44,6 +45,8 @@ export const DocumentDropzone = ({
 }: DocumentDropzoneProps) => {
  const { _ } = useLingui();

+  const organisation = useCurrentOrganisation();
+
  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      'application/pdf': ['.pdf'],
@ -158,7 +161,7 @@ export const DocumentDropzone = ({

          {disabled && IS_BILLING_ENABLED() && (
            <Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
-              <Link to="/settings/billing">
+              <Link to={`/o/${organisation.url}/settings/billing`}>
                <Trans>Upgrade</Trans>
              </Link>
            </Button>
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -85,7 +85,7 @@ export type AddFieldsFormProps = {
  onSubmit: (_data: TAddFieldsFormSchema) => void;
  canGoBack?: boolean;
  isDocumentPdfLoaded: boolean;
-  teamId?: number;
+  teamId: number;
 };

 export const AddFieldsFormPartial = ({
@ -604,7 +604,6 @@ export const AddFieldsFormPartial = ({
          onAdvancedSettings={handleAdvancedSettings}
          isDocumentPdfLoaded={isDocumentPdfLoaded}
          onSave={handleSavedFieldSettings}
-          teamId={teamId}
        />
      ) : (
        <>
--- a/packages/ui/primitives/document-flow/add-settings.tsx
+++ b/packages/ui/primitives/document-flow/add-settings.tsx
@ -9,6 +9,7 @@ import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';

+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES } from '@documenso/lib/constants/document';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
@ -69,7 +70,6 @@ export type AddSettingsFormProps = {
  documentFlow: DocumentFlowStep;
  recipients: Recipient[];
  fields: Field[];
-  isDocumentEnterprise: boolean;
  isDocumentPdfLoaded: boolean;
  document: TDocument;
  currentTeamMemberRole?: TeamMemberRole;
@ -80,7 +80,6 @@ export const AddSettingsFormPartial = ({
  documentFlow,
  recipients,
  fields,
-  isDocumentEnterprise,
  isDocumentPdfLoaded,
  document,
  currentTeamMemberRole,
@ -88,6 +87,8 @@ export const AddSettingsFormPartial = ({
 }: AddSettingsFormProps) => {
  const { t } = useLingui();

+  const organisation = useCurrentOrganisation();
+
  const { documentAuthOption } = extractDocumentAuthMethods({
    documentAuth: document.authOptions,
  });
@ -288,7 +289,7 @@ export const AddSettingsFormPartial = ({
              />
            )}

-            {isDocumentEnterprise && (
+            {organisation.organisationClaim.flags.cfr21 && (
              <FormField
                control={form.control}
                name="globalActionAuth"
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@ -14,6 +14,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
 import { prop, sortBy } from 'remeda';

 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
@ -53,7 +54,6 @@ export type AddSignersFormProps = {
  fields: Field[];
  signingOrder?: DocumentSigningOrder | null;
  allowDictateNextSigner?: boolean;
-  isDocumentEnterprise: boolean;
  onSubmit: (_data: TAddSignersFormSchema) => void;
  isDocumentPdfLoaded: boolean;
 };
@ -64,7 +64,6 @@ export const AddSignersFormPartial = ({
  fields,
  signingOrder,
  allowDictateNextSigner,
-  isDocumentEnterprise,
  onSubmit,
  isDocumentPdfLoaded,
 }: AddSignersFormProps) => {
@ -78,6 +77,8 @@ export const AddSignersFormPartial = ({

  const { currentStep, totalSteps, previousStep } = useStep();

+  const organisation = useCurrentOrganisation();
+
  const defaultRecipients = [
    {
      formId: initialId,
@ -633,36 +634,37 @@ export const AddSignersFormPartial = ({
                                )}
                              />

-                              {showAdvancedSettings && isDocumentEnterprise && (
-                                <FormField
-                                  control={form.control}
-                                  name={`signers.${index}.actionAuth`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn('col-span-8', {
-                                        'mb-6':
-                                          form.formState.errors.signers?.[index] &&
-                                          !form.formState.errors.signers[index]?.actionAuth,
-                                        'col-span-10': isSigningOrderSequential,
-                                      })}
-                                    >
-                                      <FormControl>
-                                        <RecipientActionAuthSelect
-                                          {...field}
-                                          onValueChange={field.onChange}
-                                          disabled={
-                                            snapshot.isDragging ||
-                                            isSubmitting ||
-                                            !canRecipientBeModified(signer.nativeId)
-                                          }
-                                        />
-                                      </FormControl>
+                              {showAdvancedSettings &&
+                                organisation.organisationClaim.flags.cfr21 && (
+                                  <FormField
+                                    control={form.control}
+                                    name={`signers.${index}.actionAuth`}
+                                    render={({ field }) => (
+                                      <FormItem
+                                        className={cn('col-span-8', {
+                                          'mb-6':
+                                            form.formState.errors.signers?.[index] &&
+                                            !form.formState.errors.signers[index]?.actionAuth,
+                                          'col-span-10': isSigningOrderSequential,
+                                        })}
+                                      >
+                                        <FormControl>
+                                          <RecipientActionAuthSelect
+                                            {...field}
+                                            onValueChange={field.onChange}
+                                            disabled={
+                                              snapshot.isDragging ||
+                                              isSubmitting ||
+                                              !canRecipientBeModified(signer.nativeId)
+                                            }
+                                          />
+                                        </FormControl>

-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-                              )}
+                                        <FormMessage />
+                                      </FormItem>
+                                    )}
+                                  />
+                                )}

                              <div className="col-span-2 flex gap-x-2">
                                <FormField
@ -760,7 +762,7 @@ export const AddSignersFormPartial = ({
              </Button>
            </div>

-            {!alwaysShowAdvancedSettings && isDocumentEnterprise && (
+            {!alwaysShowAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
              <div className="mt-4 flex flex-row items-center">
                <Checkbox
                  id="showAdvancedRecipientSettings"
--- a/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
+++ b/packages/ui/primitives/document-flow/field-item-advanced-settings.tsx
@ -41,7 +41,6 @@ import { RadioFieldAdvancedSettings } from './field-items-advanced-settings/radi
 import { TextFieldAdvancedSettings } from './field-items-advanced-settings/text-field';

 export type FieldAdvancedSettingsProps = {
-  teamId?: number;
  title: MessageDescriptor;
  description: MessageDescriptor;
  field: FieldFormType;
--- a/packages/ui/primitives/document-upload.tsx
+++ b/packages/ui/primitives/document-upload.tsx
@ -6,8 +6,11 @@ import { Upload } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 import { Link } from 'react-router';

+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
+import { isPersonalLayout } from '@documenso/lib/utils/organisations';

 import { Button } from './button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip';
@ -15,6 +18,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tool
 export type DocumentDropzoneProps = {
  className?: string;
  disabled?: boolean;
+  loading?: boolean;
  disabledMessage?: MessageDescriptor;
  onDrop?: (_file: File) => void | Promise<void>;
  onDropRejected?: () => void | Promise<void>;
@ -24,6 +28,7 @@ export type DocumentDropzoneProps = {

 export const DocumentDropzone = ({
  className,
+  loading,
  onDrop,
  onDropRejected,
  disabled,
@ -33,6 +38,12 @@ export const DocumentDropzone = ({
 }: DocumentDropzoneProps) => {
  const { _ } = useLingui();

+  const { organisations } = useSession();
+
+  const organisation = useCurrentOrganisation();
+
+  const isPersonalLayoutMode = isPersonalLayout(organisations);
+
  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      'application/pdf': ['.pdf'],
@ -63,7 +74,13 @@ export const DocumentDropzone = ({
        <Tooltip>
          <TooltipTrigger asChild>
            <Button className="hover:bg-warning/80 bg-warning" asChild>
-              <Link to="/settings/billing">
+              <Link
+                to={
+                  isPersonalLayoutMode
+                    ? `/settings/billing`
+                    : `/o/${organisation.url}/settings/billing`
+                }
+              >
                <Trans>Upgrade</Trans>
              </Link>
            </Button>
@ -77,10 +94,10 @@ export const DocumentDropzone = ({
  }

  return (
-    <Button aria-disabled={disabled} {...getRootProps()} {...props}>
+    <Button loading={loading} aria-disabled={disabled} {...getRootProps()} {...props}>
      <div className="flex items-center gap-2">
        <input {...getInputProps()} />
-        <Upload className="h-4 w-4" />
+        {!loading && <Upload className="h-4 w-4" />}
        {disabled ? _(disabledMessage) : _(heading[type])}
      </div>
    </Button>
--- a/packages/ui/primitives/multi-select-combobox.tsx
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@ -26,6 +26,7 @@ type MultiSelectComboboxProps<T = OptionValue> = {
  enableClearAllButton?: boolean;
  enableSearch?: boolean;
  className?: string;
+  contentClassName?: string;
  loading?: boolean;
  inputPlaceholder?: MessageDescriptor;
  onChange: (_values: T[]) => void;
@ -46,6 +47,7 @@ export function MultiSelectCombobox<T = OptionValue>({
  enableClearAllButton,
  enableSearch = true,
  className,
+  contentClassName,
  inputPlaceholder,
  loading,
  onChange,
@ -149,7 +151,7 @@ export function MultiSelectCombobox<T = OptionValue>({
        )}
      </div>

-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className={cn('z-[50000000] w-full p-0', contentClassName)}>
        <Command>
          {enableSearch && <CommandInput placeholder={inputPlaceholder && _(inputPlaceholder)} />}
          <CommandEmpty>
--- a/packages/ui/primitives/spinner.tsx
+++ b/packages/ui/primitives/spinner.tsx
@ -0,0 +1,55 @@
+import * as React from 'react';
+
+import { cva } from 'class-variance-authority';
+import { Loader } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+
+const spinnerVariants = cva('text-muted-foreground animate-spin', {
+  variants: {
+    size: {
+      default: 'h-6 w-6',
+      sm: 'h-4 w-4',
+      lg: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+type SpinnerSize = 'default' | 'sm' | 'lg';
+
+export interface SpinnerProps extends Omit<React.ComponentPropsWithoutRef<typeof Loader>, 'size'> {
+  size?: SpinnerSize;
+}
+
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
+  ({ className, size = 'default', ...props }, ref) => {
+    return <Loader ref={ref} className={cn(spinnerVariants({ size }), className)} {...props} />;
+  },
+);
+
+Spinner.displayName = 'Spinner';
+
+export interface SpinnerBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  spinnerProps?: SpinnerProps;
+}
+
+const SpinnerBox = React.forwardRef<HTMLDivElement, SpinnerBoxProps>(
+  ({ className, spinnerProps, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center justify-center rounded-lg', className)}
+        {...props}
+      >
+        <Spinner {...spinnerProps} />
+      </div>
+    );
+  },
+);
+
+SpinnerBox.displayName = 'SpinnerBox';
+
+export { Spinner, SpinnerBox, spinnerVariants };
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@ -71,7 +71,7 @@ export type AddTemplateFieldsFormProps = {
  recipients: Recipient[];
  fields: Field[];
  onSubmit: (_data: TAddTemplateFieldsFormSchema) => void;
-  teamId?: number;
+  teamId: number;
 };

 export const AddTemplateFieldsFormPartial = ({
@ -510,7 +510,6 @@ export const AddTemplateFieldsFormPartial = ({
          fields={localFields}
          onAdvancedSettings={handleAdvancedSettings}
          onSave={handleSavedFieldSettings}
-          teamId={teamId}
        />
      ) : (
        <>
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
@ -12,6 +12,7 @@ import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircle, Link2Icon, Plus, Trash } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';

+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { ZRecipientAuthOptionsSchema } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
@ -52,14 +53,12 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
  signingOrder?: DocumentSigningOrder | null;
  allowDictateNextSigner?: boolean;
  templateDirectLink?: TemplateDirectLink | null;
-  isEnterprise: boolean;
  onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
  isDocumentPdfLoaded: boolean;
 };

 export const AddTemplatePlaceholderRecipientsFormPartial = ({
  documentFlow,
-  isEnterprise,
  recipients,
  templateDirectLink,
  fields,
@ -74,6 +73,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
  const { _ } = useLingui();
  const { user } = useSession();

+  const organisation = useCurrentOrganisation();
+
  const [placeholderRecipientCount, setPlaceholderRecipientCount] = useState(() =>
    recipients.length > 1 ? recipients.length + 1 : 2,
  );
@ -649,29 +650,30 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                                )}
                              />

-                              {showAdvancedSettings && isEnterprise && (
-                                <FormField
-                                  control={form.control}
-                                  name={`signers.${index}.actionAuth`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn('col-span-8', {
-                                        'col-span-10': isSigningOrderSequential,
-                                      })}
-                                    >
-                                      <FormControl>
-                                        <RecipientActionAuthSelect
-                                          {...field}
-                                          onValueChange={field.onChange}
-                                          disabled={isSubmitting}
-                                        />
-                                      </FormControl>
+                              {showAdvancedSettings &&
+                                organisation.organisationClaim.flags.cfr21 && (
+                                  <FormField
+                                    control={form.control}
+                                    name={`signers.${index}.actionAuth`}
+                                    render={({ field }) => (
+                                      <FormItem
+                                        className={cn('col-span-8', {
+                                          'col-span-10': isSigningOrderSequential,
+                                        })}
+                                      >
+                                        <FormControl>
+                                          <RecipientActionAuthSelect
+                                            {...field}
+                                            onValueChange={field.onChange}
+                                            disabled={isSubmitting}
+                                          />
+                                        </FormControl>

-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-                              )}
+                                        <FormMessage />
+                                      </FormItem>
+                                    )}
+                                  />
+                                )}

                              <div className="col-span-2 flex gap-x-2">
                                <FormField
@ -773,7 +775,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
              </Button>
            </div>

-            {!alwaysShowAdvancedSettings && isEnterprise && (
+            {!alwaysShowAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
              <div className="mt-4 flex flex-row items-center">
                <Checkbox
                  id="showAdvancedRecipientSettings"
--- a/packages/ui/primitives/template-flow/add-template-settings.tsx
+++ b/packages/ui/primitives/template-flow/add-template-settings.tsx
@ -9,6 +9,7 @@ import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';

+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import {
  DOCUMENT_DISTRIBUTION_METHODS,
@ -77,7 +78,6 @@ export type AddTemplateSettingsFormProps = {
  documentFlow: DocumentFlowStep;
  recipients: Recipient[];
  fields: Field[];
-  isEnterprise: boolean;
  isDocumentPdfLoaded: boolean;
  template: TTemplate;
  currentTeamMemberRole?: TeamMemberRole;
@ -88,7 +88,6 @@ export const AddTemplateSettingsFormPartial = ({
  documentFlow,
  recipients,
  fields,
-  isEnterprise,
  isDocumentPdfLoaded,
  template,
  currentTeamMemberRole,
@ -96,6 +95,8 @@ export const AddTemplateSettingsFormPartial = ({
 }: AddTemplateSettingsFormProps) => {
  const { t, i18n } = useLingui();

+  const organisation = useCurrentOrganisation();
+
  const { documentAuthOption } = extractDocumentAuthMethods({
    documentAuth: template.authOptions,
  });
@ -370,7 +371,7 @@ export const AddTemplateSettingsFormPartial = ({
              )}
            />

-            {isEnterprise && (
+            {organisation.organisationClaim.flags.cfr21 && (
              <FormField
                control={form.control}
                name="globalActionAuth"