documenso/packages/ui/components/recipient/recipient-action-auth-select.tsx

import { DOCUMENT_AUTH_TYPES } from '@documenso/lib/constants/document-auth';
import { RecipientActionAuth } from '@documenso/lib/types/document-auth';
import { MultiSelect, type Option } from '@documenso/ui/primitives/multiselect';
import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
import { msg } from '@lingui/core/macro';
import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import { InfoIcon } from 'lucide-react';

import { cn } from '../../lib/utils';

export interface RecipientActionAuthSelectProps {
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  disabled?: boolean;
  placeholder?: string;
}

export const RecipientActionAuthSelect = ({
  value,
  defaultValue,
  onValueChange,
  disabled,
  placeholder,
}: RecipientActionAuthSelectProps) => {
  const { _ } = useLingui();

  // Convert auth types to MultiSelect options
  const authOptions: Option[] = [
    {
      value: '-1',
      label: _(msg`Inherit authentication method`),
    },
    ...Object.values(RecipientActionAuth)
      .filter((auth) => auth !== RecipientActionAuth.ACCOUNT)
      .map((authType) => ({
        value: authType,
        label: _(DOCUMENT_AUTH_TYPES[authType].value),
      })),
  ];

  // Convert string array to Option array for MultiSelect
  const selectedOptions =
    (value?.map((val) => authOptions.find((option) => option.value === val)).filter(Boolean) as Option[]) || [];

  // Convert default value to Option array
  const defaultOptions =
    (defaultValue?.map((val) => authOptions.find((option) => option.value === val)).filter(Boolean) as Option[]) || [];

  const handleChange = (options: Option[]) => {
    const values = options.map((option) => option.value);
    onValueChange?.(values);
  };

  return (
    <div className="relative">
      <MultiSelect
        value={selectedOptions}
        defaultOptions={defaultOptions}
        options={authOptions}
        onChange={handleChange}
        disabled={disabled}
        placeholder={placeholder || _(msg`Select authentication methods`)}
        className="bg-background text-muted-foreground"
        maxSelected={4} // Allow selecting up to 4 auth methods
        hideClearAllButton={false}
      />

      <Tooltip>
        <TooltipTrigger
          className={cn('absolute top-1/2 right-2 -translate-y-1/2', {
            'right-8': selectedOptions.length > 0,
          })}
        >
          <InfoIcon className="h-4 w-4" />
        </TooltipTrigger>

        <TooltipContent className="max-w-md p-4 text-foreground">
          <h2>
            <strong>
              <Trans>Recipient action authentication</Trans>
            </strong>
          </h2>

          <p>
            <Trans>The authentication methods required for recipients to sign fields</Trans>
          </p>

          <p className="mt-2">
            <Trans>These will override any global settings. Multiple methods can be selected.</Trans>
          </p>

          <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
            <li>
              <Trans>
                <strong>Inherit authentication method</strong> - Use the global action signing authentication method
                configured in the "General Settings" step
              </Trans>
            </li>
            <li>
              <Trans>
                <strong>Require passkey</strong> - The recipient must have an account and passkey configured via their
                settings
              </Trans>
            </li>
            <li>
              <Trans>
                <strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled via their settings
              </Trans>
            </li>
            <li>
              <Trans>
                <strong>None</strong> - No authentication required
              </Trans>
            </li>
          </ul>
        </TooltipContent>
      </Tooltip>
    </div>
  );
};