Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: web i18n (#1286)

Browse Source
This commit is contained in:
David Nguyen
2024-08-27 20:34:39 +09:00
committed by GitHub
parent 0829311214
commit 75c8772a02
294 changed files with 14846 additions and 2229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/components/document/document-download-button.tsx
View File

@ -3,6 +3,8 @@
import type { HTMLAttributes } from 'react';
import { useState } from 'react';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Download } from 'lucide-react';
import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
@ -24,9 +26,11 @@ export const DocumentDownloadButton = ({
disabled,
...props
}: DownloadButtonProps) => {
const [isLoading, setIsLoading] = useState(false);
const { _ } = useLingui();
const { toast } = useToast();
const [isLoading, setIsLoading] = useState(false);
const onDownloadClick = async () => {
try {
setIsLoading(true);
@ -43,8 +47,8 @@ export const DocumentDownloadButton = ({
setIsLoading(false);
toast({
title: 'Something went wrong',
description: 'An error occurred while downloading your document.',
title: _('Something went wrong'),
description: _('An error occurred while downloading your document.'),
variant: 'destructive',
});
}
@ -61,7 +65,7 @@ export const DocumentDownloadButton = ({
{...props}
>
{!isLoading && <Download className="mr-2 h-5 w-5" />}
Download
<Trans>Download</Trans>
</Button>
);
};

61
packages/ui/components/document/document-global-auth-access-select.tsx
View File

@ -2,6 +2,8 @@
import React, { forwardRef } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { SelectProps } from '@radix-ui/react-select';
import { InfoIcon } from 'lucide-react';
@ -17,24 +19,33 @@ import {
import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
export const DocumentGlobalAuthAccessSelect = forwardRef<HTMLButtonElement, SelectProps>(
(props, ref) => (
<Select {...props}>
<SelectTrigger ref={ref} className="bg-background text-muted-foreground">
<SelectValue data-testid="documentAccessSelectValue" placeholder="No restrictions" />
</SelectTrigger>
(props, ref) => {
const { _ } = useLingui();
<SelectContent position="popper">
{Object.values(DocumentAccessAuth).map((authType) => (
<SelectItem key={authType} value={authType}>
{DOCUMENT_AUTH_TYPES[authType].value}
return (
<Select {...props}>
<SelectTrigger ref={ref} className="bg-background text-muted-foreground">
<SelectValue
data-testid="documentAccessSelectValue"
placeholder={_(msg`No restrictions`)}
/>
</SelectTrigger>
<SelectContent position="popper">
{Object.values(DocumentAccessAuth).map((authType) => (
<SelectItem key={authType} value={authType}>
{DOCUMENT_AUTH_TYPES[authType].value}
</SelectItem>
))}
{/* Note: -1 is remapped in the Zod schema to the required value. */}
<SelectItem value={'-1'}>
<Trans>No restrictions</Trans>
</SelectItem>
))}
{/* Note: -1 is remapped in the Zod schema to the required value. */}
<SelectItem value={'-1'}>No restrictions</SelectItem>
</SelectContent>
</Select>
),
</SelectContent>
</Select>
);
},
);
DocumentGlobalAuthAccessSelect.displayName = 'DocumentGlobalAuthAccessSelect';
@ -47,18 +58,26 @@ export const DocumentGlobalAuthAccessTooltip = () => (
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
<h2>
<strong>Document access</strong>
<strong>
<Trans>Document access</Trans>
</strong>
</h2>
<p>The authentication required for recipients to view the document.</p>
<p>
<Trans>The authentication required for recipients to view the document.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<li>
<strong>Require account</strong> - The recipient must be signed in to view the document
<Trans>
<strong>Require account</strong> - The recipient must be signed in to view the document
</Trans>
</li>
<li>
<strong>No restrictions</strong> - The document can be accessed directly by the URL sent
to the recipient
<Trans>
<strong>No restrictions</strong> - The document can be accessed directly by the URL sent
to the recipient
</Trans>
</li>
</ul>
</TooltipContent>

80
packages/ui/components/document/document-global-auth-action-select.tsx
View File

@ -2,6 +2,8 @@
import React, { forwardRef } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { SelectProps } from '@radix-ui/react-select';
import { InfoIcon } from 'lucide-react';
@ -17,26 +19,36 @@ import {
import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
export const DocumentGlobalAuthActionSelect = forwardRef<HTMLButtonElement, SelectProps>(
(props, ref) => (
<Select {...props}>
<SelectTrigger className="bg-background text-muted-foreground">
<SelectValue ref={ref} data-testid="documentActionSelectValue" placeholder="No restrictions" />
</SelectTrigger>
(props, ref) => {
const { _ } = useLingui();
<SelectContent position="popper">
{Object.values(DocumentActionAuth)
.filter((auth) => auth !== DocumentAuth.ACCOUNT)
.map((authType) => (
<SelectItem key={authType} value={authType}>
{DOCUMENT_AUTH_TYPES[authType].value}
</SelectItem>
))}
return (
<Select {...props}>
<SelectTrigger className="bg-background text-muted-foreground">
<SelectValue
ref={ref}
data-testid="documentActionSelectValue"
placeholder={_(msg`No restrictions`)}
/>
</SelectTrigger>
{/* Note: -1 is remapped in the Zod schema to the required value. */}
<SelectItem value={'-1'}>No restrictions</SelectItem>
</SelectContent>
</Select>
),
<SelectContent position="popper">
{Object.values(DocumentActionAuth)
.filter((auth) => auth !== DocumentAuth.ACCOUNT)
.map((authType) => (
<SelectItem key={authType} value={authType}>
{DOCUMENT_AUTH_TYPES[authType].value}
</SelectItem>
))}
{/* Note: -1 is remapped in the Zod schema to the required value. */}
<SelectItem value={'-1'}>
<Trans>No restrictions</Trans>
</SelectItem>
</SelectContent>
</Select>
);
},
);
DocumentGlobalAuthActionSelect.displayName = 'DocumentGlobalAuthActionSelect';
@ -48,13 +60,19 @@ export const DocumentGlobalAuthActionTooltip = () => (
</TooltipTrigger>
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
<h2>Global recipient action authentication</h2>
<p>The authentication required for recipients to sign the signature field.</p>
<h2>
<Trans>Global recipient action authentication</Trans>
</h2>
<p>
This can be overriden by setting the authentication requirements directly on each recipient
in the next step.
<Trans>The authentication required for recipients to sign the signature field.</Trans>
</p>
<p>
<Trans>
This can be overriden by setting the authentication requirements directly on each
recipient in the next step.
</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
@ -62,15 +80,21 @@ export const DocumentGlobalAuthActionTooltip = () => (
<strong>Require account</strong> - The recipient must be signed in
</li> */}
<li>
<strong>Require passkey</strong> - The recipient must have an account and passkey
configured via their settings
<Trans>
<strong>Require passkey</strong> - The recipient must have an account and passkey
configured via their settings
</Trans>
</li>
<li>
<strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled via
their settings
<Trans>
<strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled via
their settings
</Trans>
</li>
<li>
<strong>No restrictions</strong> - No authentication required
<Trans>
<strong>No restrictions</strong> - No authentication required
</Trans>
</li>
</ul>
</TooltipContent>

10
packages/ui/components/document/document-send-email-message-helper.tsx
View File

@ -2,11 +2,13 @@
import React from 'react';
import { Trans } from '@lingui/macro';
export const DocumentSendEmailMessageHelper = () => {
return (
<div>
<p className="text-muted-foreground text-sm">
You can use the following variables in your message:
<Trans>You can use the following variables in your message:</Trans>
</p>
<ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
@ -14,19 +16,19 @@ export const DocumentSendEmailMessageHelper = () => {
<code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
{'{signer.name}'}
</code>{' '}
- The signer's name
- <Trans>The signer's name</Trans>
</li>
<li className="text-muted-foreground">
<code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
{'{signer.email}'}
</code>{' '}
- The signer's email
- <Trans>The signer's email</Trans>
</li>
<li className="text-muted-foreground">
<code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
{'{document.name}'}
</code>{' '}
- The document's name
- <Trans>The document's name</Trans>
</li>
</ul>
</div>

23
packages/ui/components/document/document-share-button.tsx
View File

@ -3,15 +3,13 @@
import type { HTMLAttributes } from 'react';
import React, { useState } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Copy, Sparkles } from 'lucide-react';
import { FaXTwitter } from 'react-icons/fa6';
import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import {
TOAST_DOCUMENT_SHARE_ERROR,
TOAST_DOCUMENT_SHARE_SUCCESS,
} from '@documenso/lib/constants/toast';
import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
import { trpc } from '@documenso/trpc/react';
@ -39,11 +37,22 @@ export const DocumentShareButton = ({
className,
trigger,
}: DocumentShareButtonProps) => {
const { _ } = useLingui();
const { toast } = useToast();
const { copyShareLink, createAndCopyShareLink, isCopyingShareLink } = useCopyShareLink({
onSuccess: () => toast(TOAST_DOCUMENT_SHARE_SUCCESS),
onError: () => toast(TOAST_DOCUMENT_SHARE_ERROR),
onSuccess: () =>
toast({
title: _(msg`Copied to clipboard`),
description: _(msg`The sharing link has been copied to your clipboard.`),
}),
onError: () =>
toast({
title: _(msg`Something went wrong`),
description: _(msg`The sharing link could not be created at this time. Please try again.`),
variant: 'destructive',
duration: 5000,
}),
});
const [isOpen, setIsOpen] = useState(false);
@ -123,7 +132,7 @@ export const DocumentShareButton = ({
loading={isLoading}
>
{!isLoading && <Sparkles className="mr-2 h-5 w-5" />}
Share Signature Card
<Trans>Share Signature Card</Trans>
</Button>
)}
</DialogTrigger>

44
packages/ui/components/recipient/recipient-action-auth-select.tsx
View File

@ -2,6 +2,8 @@
import React from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import type { SelectProps } from '@radix-ui/react-select';
import { InfoIcon } from 'lucide-react';
@ -19,10 +21,12 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitive
export type RecipientActionAuthSelectProps = SelectProps;
export const RecipientActionAuthSelect = (props: RecipientActionAuthSelectProps) => {
const { _ } = useLingui();
return (
<Select {...props}>
<SelectTrigger className="bg-background text-muted-foreground">
<SelectValue placeholder="Inherit authentication method" />
<SelectValue placeholder={_(msg`Inherit authentication method`)} />
<Tooltip>
<TooltipTrigger className="-mr-1 ml-auto">
@ -31,32 +35,46 @@ export const RecipientActionAuthSelect = (props: RecipientActionAuthSelectProps)
<TooltipContent className="text-foreground max-w-md p-4">
<h2>
<strong>Recipient action authentication</strong>
<strong>
<Trans>Recipient action authentication</Trans>
</strong>
</h2>
<p>The authentication required for recipients to sign fields</p>
<p>
<Trans>The authentication required for recipients to sign fields</Trans>
</p>
<p className="mt-2">This will override any global settings.</p>
<p className="mt-2">
<Trans>This will override any global settings.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<li>
<strong>Inherit authentication method</strong> - Use the global action signing
authentication method configured in the "General Settings" step
<Trans>
<strong>Inherit authentication method</strong> - Use the global action signing
authentication method configured in the "General Settings" step
</Trans>
</li>
{/* <li>
<strong>Require account</strong> - The recipient must be
signed in
</li> */}
<li>
<strong>Require passkey</strong> - The recipient must have an account and passkey
configured via their settings
<Trans>
<strong>Require passkey</strong> - The recipient must have an account and passkey
configured via their settings
</Trans>
</li>
<li>
<strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled
via their settings
<Trans>
<strong>Require 2FA</strong> - The recipient must have an account and 2FA enabled
via their settings
</Trans>
</li>
<li>
<strong>None</strong> - No authentication required
<Trans>
<strong>None</strong> - No authentication required
</Trans>
</li>
</ul>
</TooltipContent>
@ -65,7 +83,9 @@ export const RecipientActionAuthSelect = (props: RecipientActionAuthSelectProps)
<SelectContent position="popper">
{/* Note: -1 is remapped in the Zod schema to the required value. */}
<SelectItem value="-1">Inherit authentication method</SelectItem>
<SelectItem value="-1">
<Trans>Inherit authentication method</Trans>
</SelectItem>
{Object.values(RecipientActionAuth)
.filter((auth) => auth !== RecipientActionAuth.ACCOUNT)

33
packages/ui/components/recipient/recipient-role-select.tsx
View File

@ -2,6 +2,7 @@
import React, { forwardRef } from 'react';
import { Trans } from '@lingui/macro';
import type { SelectProps } from '@radix-ui/react-select';
import { InfoIcon } from 'lucide-react';
@ -27,14 +28,18 @@ export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSe
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
Needs to sign
<Trans>Needs to sign</Trans>
</div>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
<p>The recipient is required to sign the document for it to be completed.</p>
<p>
<Trans>
The recipient is required to sign the document for it to be completed.
</Trans>
</p>
</TooltipContent>
</Tooltip>
</div>
@ -44,14 +49,18 @@ export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSe
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
Needs to approve
<Trans>Needs to approve</Trans>
</div>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
<p>The recipient is required to approve the document for it to be completed.</p>
<p>
<Trans>
The recipient is required to approve the document for it to be completed.
</Trans>
</p>
</TooltipContent>
</Tooltip>
</div>
@ -61,14 +70,18 @@ export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSe
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
Needs to view
<Trans>Needs to view</Trans>
</div>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
<p>The recipient is required to view the document for it to be completed.</p>
<p>
<Trans>
The recipient is required to view the document for it to be completed.
</Trans>
</p>
</TooltipContent>
</Tooltip>
</div>
@ -79,7 +92,7 @@ export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSe
<div className="flex items-center">
<div className="flex w-[150px] items-center">
<span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
Receives copy
<Trans>Receives copy</Trans>
</div>
<Tooltip>
<TooltipTrigger>
@ -87,8 +100,10 @@ export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSe
</TooltipTrigger>
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
<p>
The recipient is not required to take any action and receives a copy of the
document after it is completed.
<Trans>
The recipient is not required to take any action and receives a copy of the
document after it is completed.
</Trans>
</p>
</TooltipContent>
</Tooltip>

3
packages/ui/package.json
View File

@ -28,7 +28,6 @@
"dependencies": {
"@documenso/lib": "*",
"@hookform/resolvers": "^3.3.0",
"@lingui/macro": "^4.11.1",
"@lingui/react": "^4.11.1",
"@radix-ui/react-accordion": "^1.1.1",
"@radix-ui/react-alert-dialog": "^1.0.3",
@ -78,4 +77,4 @@
"ts-pattern": "^5.0.5",
"zod": "^3.22.4"
}
}
}

10
packages/ui/primitives/combobox.tsx
View File

@ -1,5 +1,7 @@
import * as React from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Check, ChevronDown } from 'lucide-react';
import { cn } from '../lib/utils';
@ -24,6 +26,8 @@ const Combobox = ({
disabled = false,
placeholder,
}: ComboboxProps) => {
const { _ } = useLingui();
const [open, setOpen] = React.useState(false);
const onOptionSelected = (newValue: string) => {
@ -31,7 +35,7 @@ const Combobox = ({
setOpen(false);
};
const placeholderValue = placeholder ?? 'Select an option';
const placeholderValue = placeholder ?? _(msg`Select an option`);
return (
<Popover open={open} onOpenChange={setOpen}>
@ -52,7 +56,9 @@ const Combobox = ({
<Command>
<CommandInput placeholder={value || placeholderValue} />
<CommandEmpty>No value found.</CommandEmpty>
<CommandEmpty>
<Trans>No value found.</Trans>
</CommandEmpty>
<CommandGroup className="max-h-[250px] overflow-y-auto">
{options.map((option, index) => (

21
packages/ui/primitives/data-table-pagination.tsx
View File

@ -1,3 +1,4 @@
import { Plural, Trans } from '@lingui/macro';
import type { Table } from '@tanstack/react-table';
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
import { match } from 'ts-pattern';
@ -26,8 +27,10 @@ export function DataTablePagination<TData>({
{match(additionalInformation)
.with('SelectedCount', () => (
<span>
{table.getFilteredSelectedRowModel().rows.length} of{' '}
{table.getFilteredRowModel().rows.length} row(s) selected.
<Trans>
{table.getFilteredSelectedRowModel().rows.length} of{' '}
{table.getFilteredRowModel().rows.length} row(s) selected.
</Trans>
</span>
))
.with('VisibleCount', () => {
@ -35,7 +38,11 @@ export function DataTablePagination<TData>({
return (
<span data-testid="data-table-count">
Showing {visibleRows} result{visibleRows > 1 && 's'}.
<Plural
value={visibleRows}
one={`Showing # result.`}
other={`Showing # results.`}
/>
</span>
);
})
@ -44,7 +51,9 @@ export function DataTablePagination<TData>({
</div>
<div className="flex items-center gap-x-2">
<p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
<p className="whitespace-nowrap text-sm font-medium">
<Trans>Rows per page</Trans>
</p>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
@ -65,7 +74,9 @@ export function DataTablePagination<TData>({
</div>
<div className="flex flex-wrap items-center gap-x-6 gap-y-4 lg:gap-x-8">
<div className="flex items-center text-sm font-medium md:justify-center">
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
<Trans>
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
</Trans>
</div>
<div className="flex items-center gap-x-2">

9
packages/ui/primitives/data-table.tsx
View File

@ -2,6 +2,7 @@
import React, { useMemo } from 'react';
import { Trans } from '@lingui/macro';
import type {
ColumnDef,
PaginationState,
@ -130,7 +131,7 @@ export function DataTable<TData, TValue>({
<TableRow>
{error.component ?? (
<TableCell colSpan={columns.length} className="h-32 text-center">
Something went wrong.
<Trans>Something went wrong.</Trans>
</TableCell>
)}
</TableRow>
@ -141,14 +142,16 @@ export function DataTable<TData, TValue>({
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-32 text-center">
<p>No results found</p>
<p>
<Trans>No results found</Trans>
</p>
{hasFilters && onClearFilters !== undefined && (
<button
onClick={() => onClearFilters()}
className="text-foreground mt-1 text-sm"
>
Clear filters
<Trans>Clear filters</Trans>
</button>
)}
</TableCell>

21
packages/ui/primitives/document-dropzone.tsx
View File

@ -2,6 +2,9 @@
import Link from 'next/link';
import type { MessageDescriptor } from '@lingui/core';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { motion } from 'framer-motion';
import { AlertTriangle, Plus } from 'lucide-react';
import { useDropzone } from 'react-dropzone';
@ -25,7 +28,7 @@ import { Card, CardContent } from './card';
export type DocumentDropzoneProps = {
className?: string;
disabled?: boolean;
disabledMessage?: string;
disabledMessage?: MessageDescriptor;
onDrop?: (_file: File) => void | Promise<void>;
onDropRejected?: () => void | Promise<void>;
type?: 'document' | 'template';
@ -37,10 +40,12 @@ export const DocumentDropzone = ({
onDrop,
onDropRejected,
disabled,
disabledMessage = 'You cannot upload documents at this time.',
disabledMessage = msg`You cannot upload documents at this time.`,
type = 'document',
...props
}: DocumentDropzoneProps) => {
const { _ } = useLingui();
const { getRootProps, getInputProps } = useDropzone({
accept: {
'application/pdf': ['.pdf'],
@ -61,8 +66,8 @@ export const DocumentDropzone = ({
});
const heading = {
document: disabled ? 'You have reached your document limit.' : 'Add a document',
template: 'Upload Template Document',
document: disabled ? msg`You have reached your document limit.` : msg`Add a document`,
template: msg`Upload Template Document`,
};
return (
@ -151,15 +156,17 @@ export const DocumentDropzone = ({
<input {...getInputProps()} />
<p className="text-foreground mt-8 font-medium">{heading[type]}</p>
<p className="text-foreground mt-8 font-medium">{_(heading[type])}</p>
<p className="text-muted-foreground/80 mt-1 text-center text-sm">
{disabled ? disabledMessage : 'Drag & drop your PDF here.'}
{_(disabled ? disabledMessage : msg`Drag & drop your PDF here.`)}
</p>
{disabled && IS_BILLING_ENABLED() && (
<Button className="hover:bg-warning/80 bg-warning mt-4 w-32" asChild>
<Link href="/settings/billing">Upgrade</Link>
<Link href="/settings/billing">
<Trans>Upgrade</Trans>
</Link>
</Button>
)}
</CardContent>

62
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Caveat } from 'next/font/google';
import { Trans, msg } from '@lingui/macro';
import {
CalendarDays,
Check,
@ -24,7 +25,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import {
type TFieldMetaSchema as FieldMeta,
ZFieldMetaSchema,
@ -506,8 +507,8 @@ export const AddFieldsFormPartial = ({
<>
{showAdvancedSettings && currentField ? (
<FieldAdvancedSettings
title="Advanced settings"
description={`Configure the ${FRIENDLY_FIELD_TYPE[currentField.type]} field`}
title={msg`Advanced settings`}
description={msg`Configure the ${FRIENDLY_FIELD_TYPE[currentField.type]} field`}
field={currentField}
fields={localFields}
onAdvancedSettings={handleAdvancedSettings}
@ -609,14 +610,15 @@ export const AddFieldsFormPartial = ({
<CommandEmpty>
<span className="text-muted-foreground inline-block px-4">
No recipient matching this description was found.
<Trans>No recipient matching this description was found.</Trans>
</span>
</CommandEmpty>
{recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
<CommandGroup key={roleIndex}>
<div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
{`${RECIPIENT_ROLES_DESCRIPTION[role].roleName}s`}
{/* Todo: Translations - Add plural translations. */}
{`${RECIPIENT_ROLES_DESCRIPTION_ENG[role].roleName}s`}
</div>
{roleRecipients.length === 0 && (
@ -624,7 +626,7 @@ export const AddFieldsFormPartial = ({
key={`${role}-empty`}
className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
>
No recipients with this role
<Trans>No recipients with this role</Trans>
</div>
)}
@ -680,8 +682,10 @@ export const AddFieldsFormPartial = ({
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
This document has already been sent to this recipient. You can
no longer edit this recipient.
<Trans>
This document has already been sent to this recipient. You
can no longer edit this recipient.
</Trans>
</TooltipContent>
</Tooltip>
)}
@ -717,7 +721,7 @@ export const AddFieldsFormPartial = ({
fontCaveat.className,
)}
>
Signature
<Trans>Signature</Trans>
</p>
</CardContent>
</Card>
@ -769,7 +773,7 @@ export const AddFieldsFormPartial = ({
)}
>
<Mail className="h-4 w-4" />
Email
<Trans>Email</Trans>
</p>
</CardContent>
</Card>
@ -795,7 +799,7 @@ export const AddFieldsFormPartial = ({
)}
>
<User className="h-4 w-4" />
Name
<Trans>Name</Trans>
</p>
</CardContent>
</Card>
@ -821,7 +825,7 @@ export const AddFieldsFormPartial = ({
)}
>
<CalendarDays className="h-4 w-4" />
Date
<Trans>Date</Trans>
</p>
</CardContent>
</Card>
@ -847,7 +851,7 @@ export const AddFieldsFormPartial = ({
)}
>
<Type className="h-4 w-4" />
Text
<Trans>Text</Trans>
</p>
</CardContent>
</Card>
@ -873,7 +877,7 @@ export const AddFieldsFormPartial = ({
)}
>
<Hash className="h-4 w-4" />
Number
<Trans>Number</Trans>
</p>
</CardContent>
</Card>
@ -899,7 +903,7 @@ export const AddFieldsFormPartial = ({
)}
>
<Disc className="h-4 w-4" />
Radio
<Trans>Radio</Trans>
</p>
</CardContent>
</Card>
@ -925,7 +929,7 @@ export const AddFieldsFormPartial = ({
)}
>
<CheckSquare className="h-4 w-4" />
Checkbox
<Trans>Checkbox</Trans>
</p>
</CardContent>
</Card>
@ -951,7 +955,7 @@ export const AddFieldsFormPartial = ({
)}
>
<ChevronDown className="h-4 w-4" />
Dropdown
<Trans>Dropdown</Trans>
</p>
</CardContent>
</Card>
@ -964,23 +968,21 @@ export const AddFieldsFormPartial = ({
<div className="mt-4">
<ul>
<li className="text-sm text-red-500">
To proceed further, please set at least one value for the{' '}
{emptyCheckboxFields.length > 0
? 'Checkbox'
: emptyRadioFields.length > 0
? 'Radio'
: 'Select'}{' '}
field.
<Trans>
To proceed further, please set at least one value for the{' '}
{emptyCheckboxFields.length > 0
? 'Checkbox'
: emptyRadioFields.length > 0
? 'Radio'
: 'Select'}{' '}
field.
</Trans>
</li>
</ul>
</div>
)}
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={isSubmitting}
@ -991,7 +993,7 @@ export const AddFieldsFormPartial = ({
remove();
documentFlow.onBackStep?.();
}}
goBackLabel={canRenderBackButtonAsRemove ? 'Remove' : undefined}
goBackLabel={canRenderBackButtonAsRemove ? msg`Remove` : undefined}
onGoNextClick={handleGoNextClick}
/>
</DocumentFlowFormContainerFooter>

39
packages/ui/primitives/document-flow/add-settings.tsx
View File

@ -3,6 +3,7 @@
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans } from '@lingui/macro';
import { InfoIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
@ -140,7 +141,9 @@ export const AddSettingsFormPartial = ({
name="title"
render={({ field }) => (
<FormItem>
<FormLabel required>Title</FormLabel>
<FormLabel required>
<Trans>Title</Trans>
</FormLabel>
<FormControl>
<Input
@ -160,7 +163,7 @@ export const AddSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Document access
<Trans>Document access</Trans>
<DocumentGlobalAuthAccessTooltip />
</FormLabel>
@ -178,7 +181,7 @@ export const AddSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Recipient action authentication
<Trans>Recipient action authentication</Trans>
<DocumentGlobalAuthActionTooltip />
</FormLabel>
@ -193,7 +196,7 @@ export const AddSettingsFormPartial = ({
<Accordion type="multiple" className="mt-6">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="text-foreground mb-2 rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
Advanced Options
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-2 text-sm leading-relaxed">
@ -204,15 +207,17 @@ export const AddSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
External ID{' '}
<Trans>External ID</Trans>{' '}
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
Add an external ID to the document. This can be used to identify the
document in external systems.
<Trans>
Add an external ID to the document. This can be used to identify
the document in external systems.
</Trans>
</TooltipContent>
</Tooltip>
</FormLabel>
@ -231,7 +236,9 @@ export const AddSettingsFormPartial = ({
name="meta.dateFormat"
render={({ field }) => (
<FormItem>
<FormLabel>Date Format</FormLabel>
<FormLabel>
<Trans>Date Format</Trans>
</FormLabel>
<FormControl>
<Select
@ -263,7 +270,9 @@ export const AddSettingsFormPartial = ({
name="meta.timezone"
render={({ field }) => (
<FormItem>
<FormLabel>Time Zone</FormLabel>
<FormLabel>
<Trans>Time Zone</Trans>
</FormLabel>
<FormControl>
<Combobox
@ -286,14 +295,16 @@ export const AddSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Redirect URL{' '}
<Trans>Redirect URL</Trans>{' '}
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
Add a URL to redirect the user to once the document is signed
<Trans>
Add a URL to redirect the user to once the document is signed
</Trans>
</TooltipContent>
</Tooltip>
</FormLabel>
@ -315,11 +326,7 @@ export const AddSettingsFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={form.formState.isSubmitting}

25
packages/ui/primitives/document-flow/add-signature.tsx
View File

@ -3,6 +3,7 @@
import { useMemo, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans } from '@lingui/macro';
import { DateTime } from 'luxon';
import { useForm } from 'react-hook-form';
import { match } from 'ts-pattern';
@ -267,7 +268,9 @@ export const AddSignatureFormPartial = ({
name="email"
render={({ field }) => (
<FormItem>
<FormLabel required>Email</FormLabel>
<FormLabel required>
<Trans>Email</Trans>
</FormLabel>
<FormControl>
<Input
className="bg-background"
@ -291,7 +294,9 @@ export const AddSignatureFormPartial = ({
name="name"
render={({ field }) => (
<FormItem>
<FormLabel required={requireName}>Name</FormLabel>
<FormLabel required={requireName}>
<Trans>Name</Trans>
</FormLabel>
<FormControl>
<Input
className="bg-background"
@ -314,7 +319,9 @@ export const AddSignatureFormPartial = ({
name="signature"
render={({ field }) => (
<FormItem>
<FormLabel required={requireSignature}>Signature</FormLabel>
<FormLabel required={requireSignature}>
<Trans>Signature</Trans>
</FormLabel>
<FormControl>
<Card
className={cn('mt-2', {
@ -349,7 +356,9 @@ export const AddSignatureFormPartial = ({
name="customText"
render={({ field }) => (
<FormItem>
<FormLabel required={requireCustomText}>Custom Text</FormLabel>
<FormLabel required={requireCustomText}>
<Trans>Custom Text</Trans>
</FormLabel>
<FormControl>
<Input
className="bg-background"
@ -369,11 +378,7 @@ export const AddSignatureFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={form.formState.isSubmitting}
@ -386,7 +391,7 @@ export const AddSignatureFormPartial = ({
{validateUninsertedFields && uninsertedFields[0] && (
<FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
Click to insert field
<Trans>Click to insert field</Trans>
</FieldToolTip>
)}

28
packages/ui/primitives/document-flow/add-signers.tsx
View File

@ -3,6 +3,8 @@
import React, { useId, useMemo, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { motion } from 'framer-motion';
import { Plus, Trash } from 'lucide-react';
import { useSession } from 'next-auth/react';
@ -54,9 +56,11 @@ export const AddSignersFormPartial = ({
onSubmit,
isDocumentPdfLoaded,
}: AddSignersFormProps) => {
const { _ } = useLingui();
const { toast } = useToast();
const { remaining } = useLimits();
const { data: session } = useSession();
const user = session?.user;
const initialId = useId();
@ -157,8 +161,8 @@ export const AddSignersFormPartial = ({
if (hasBeenSentToRecipientId(signer.nativeId)) {
toast({
title: 'Cannot remove signer',
description: 'This signer has already received the document.',
title: _(msg`Cannot remove signer`),
description: _(msg`This signer has already received the document.`),
variant: 'destructive',
});
@ -224,13 +228,15 @@ export const AddSignersFormPartial = ({
})}
>
{!showAdvancedSettings && index === 0 && (
<FormLabel required>Email</FormLabel>
<FormLabel required>
<Trans>Email</Trans>
</FormLabel>
)}
<FormControl>
<Input
type="email"
placeholder="Email"
placeholder={_(msg`Email`)}
{...field}
disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
onKeyDown={onKeyDown}
@ -256,7 +262,7 @@ export const AddSignersFormPartial = ({
<FormControl>
<Input
placeholder="Name"
placeholder={_(msg`Name`)}
{...field}
disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
onKeyDown={onKeyDown}
@ -339,7 +345,7 @@ export const AddSignersFormPartial = ({
onClick={() => onAddSigner()}
>
<Plus className="-ml-1 mr-2 h-5 w-5" />
Add Signer
<Trans>Add Signer</Trans>
</Button>
<Button
@ -350,7 +356,7 @@ export const AddSignersFormPartial = ({
onClick={() => onAddSelfSigner()}
>
<Plus className="-ml-1 mr-2 h-5 w-5" />
Add myself
<Trans>Add myself</Trans>
</Button>
</div>
@ -368,7 +374,7 @@ export const AddSignersFormPartial = ({
className="text-muted-foreground ml-2 text-sm"
htmlFor="showAdvancedRecipientSettings"
>
Show advanced settings
<Trans>Show advanced settings</Trans>
</label>
</div>
)}
@ -377,11 +383,7 @@ export const AddSignersFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={isSubmitting}

17
packages/ui/primitives/document-flow/add-subject.tsx
View File

@ -1,6 +1,7 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, msg } from '@lingui/macro';
import { useForm } from 'react-hook-form';
import type { Field, Recipient } from '@documenso/prisma/client';
@ -74,7 +75,9 @@ export const AddSubjectFormPartial = ({
<div className="flex flex-col gap-y-4">
<div>
<Label htmlFor="subject">
Subject <span className="text-muted-foreground">(Optional)</span>
<Trans>
Subject <span className="text-muted-foreground">(Optional)</span>
</Trans>
</Label>
<Input
@ -89,7 +92,9 @@ export const AddSubjectFormPartial = ({
<div>
<Label htmlFor="message">
Message <span className="text-muted-foreground">(Optional)</span>
<Trans>
Message <span className="text-muted-foreground">(Optional)</span>
</Trans>
</Label>
<Textarea
@ -111,16 +116,12 @@ export const AddSubjectFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={isSubmitting}
disabled={isSubmitting}
goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
goNextLabel={document.status === DocumentStatus.DRAFT ? msg`Send` : msg`Update`}
onGoBackClick={previousStep}
onGoNextClick={() => void onFormSubmit()}
/>

31
packages/ui/primitives/document-flow/document-flow-root.tsx
View File

@ -3,6 +3,9 @@
import type { HTMLAttributes } from 'react';
import React from 'react';
import type { MessageDescriptor } from '@lingui/core';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { motion } from 'framer-motion';
import { cn } from '../../lib/utils';
@ -33,19 +36,21 @@ export const DocumentFlowFormContainer = ({
};
export type DocumentFlowFormContainerHeaderProps = {
title: string;
description: string;
title: MessageDescriptor;
description: MessageDescriptor;
};
export const DocumentFlowFormContainerHeader = ({
title,
description,
}: DocumentFlowFormContainerHeaderProps) => {
const { _ } = useLingui();
return (
<>
<h3 className="text-foreground text-2xl font-semibold">{title}</h3>
<h3 className="text-foreground text-2xl font-semibold">{_(title)}</h3>
<p className="text-muted-foreground mt-2 text-sm">{description}</p>
<p className="text-muted-foreground mt-2 text-sm">{_(description)}</p>
<hr className="border-border mb-8 mt-4" />
</>
@ -88,7 +93,6 @@ export const DocumentFlowFormContainerFooter = ({
};
export type DocumentFlowFormContainerStepProps = {
title: string;
step: number;
maxStep: number;
};
@ -100,7 +104,9 @@ export const DocumentFlowFormContainerStep = ({
return (
<div>
<p className="text-muted-foreground text-sm">
Step <span>{`${step} of ${maxStep}`}</span>
<Trans>
Step <span>{`${step} of ${maxStep}`}</span>
</Trans>
</p>
<div className="bg-muted relative mt-4 h-[2px] rounded-md">
@ -120,8 +126,8 @@ export const DocumentFlowFormContainerStep = ({
export type DocumentFlowFormContainerActionsProps = {
canGoBack?: boolean;
canGoNext?: boolean;
goNextLabel?: string;
goBackLabel?: string;
goNextLabel?: MessageDescriptor;
goBackLabel?: MessageDescriptor;
onGoBackClick?: () => void;
onGoNextClick?: () => void;
loading?: boolean;
@ -132,14 +138,15 @@ export type DocumentFlowFormContainerActionsProps = {
export const DocumentFlowFormContainerActions = ({
canGoBack = true,
canGoNext = true,
goNextLabel = 'Continue',
goBackLabel = 'Go Back',
goNextLabel = msg`Continue`,
goBackLabel = msg`Go Back`,
onGoBackClick,
onGoNextClick,
loading,
disabled,
disableNextStep = false,
}: DocumentFlowFormContainerActionsProps) => {
const { _ } = useLingui();
return (
<div className="mt-4 flex gap-x-4">
<Button
@ -150,7 +157,7 @@ export const DocumentFlowFormContainerActions = ({
disabled={disabled || loading || !canGoBack || !onGoBackClick}
onClick={onGoBackClick}
>
{goBackLabel}
{_(goBackLabel)}
</Button>
<Button
@ -161,7 +168,7 @@ export const DocumentFlowFormContainerActions = ({
loading={loading}
onClick={onGoNextClick}
>
{goNextLabel}
{_(goNextLabel)}
</Button>
</div>
);

3
packages/ui/primitives/document-flow/field-icon.tsx
View File

@ -1,3 +1,4 @@
import { Trans } from '@lingui/macro';
import {
CalendarDays,
CheckSquare,
@ -48,7 +49,7 @@ export const FieldIcon = ({
fontCaveatClassName,
)}
>
Signature
<Trans>Signature</Trans>
</div>
);
} else {

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

@ -5,6 +5,9 @@ import { forwardRef, useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { usePathname } from 'next/navigation';
import type { MessageDescriptor } from '@lingui/core';
import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { match } from 'ts-pattern';
import {
@ -37,8 +40,8 @@ import { TextFieldAdvancedSettings } from './field-items-advanced-settings/text-
export type FieldAdvancedSettingsProps = {
teamId?: number;
title: string;
description: string;
title: MessageDescriptor;
description: MessageDescriptor;
field: FieldFormType;
fields: FieldFormType[];
onAdvancedSettings?: () => void;
@ -121,7 +124,9 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
},
ref,
) => {
const { _ } = useLingui();
const { toast } = useToast();
const params = useParams();
const pathname = usePathname();
const id = params?.id;
@ -218,8 +223,8 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
console.error('Failed to save to localStorage:', error);
toast({
title: 'Error',
description: 'Failed to save settings.',
title: _(msg`Error`),
description: _(msg`Failed to save settings.`),
variant: 'destructive',
});
}
@ -288,8 +293,8 @@ export const FieldAdvancedSettings = forwardRef<HTMLDivElement, FieldAdvancedSet
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter className="mt-auto">
<DocumentFlowFormContainerActions
goNextLabel="Save"
goBackLabel="Cancel"
goNextLabel={msg`Save`}
goBackLabel={msg`Cancel`}
onGoBackClick={onAdvancedSettings}
onGoNextClick={handleOnGoNextClick}
disableNextStep={errors.length > 0}

26
packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
View File

@ -2,6 +2,8 @@
import { useEffect, useState } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ChevronDown, ChevronUp, Trash } from 'lucide-react';
import { validateCheckboxField } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
@ -35,6 +37,8 @@ export const CheckboxFieldAdvancedSettings = ({
handleFieldChange,
handleErrors,
}: CheckboxFieldAdvancedSettingsProps) => {
const { _ } = useLingui();
const [showValidation, setShowValidation] = useState(false);
const [values, setValues] = useState(fieldState.values ?? [{ id: 1, checked: false, value: '' }]);
const [readOnly, setReadOnly] = useState(fieldState.readOnly ?? false);
@ -122,13 +126,15 @@ export const CheckboxFieldAdvancedSettings = ({
<div className="flex flex-col gap-4">
<div className="flex flex-row items-center gap-x-4">
<div className="flex w-2/3 flex-col">
<Label>Validation</Label>
<Label>
<Trans>Validation</Trans>
</Label>
<Select
value={fieldState.validationRule}
onValueChange={(val) => handleToggleChange('validationRule', val)}
>
<SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
<SelectValue placeholder="Select at least" />
<SelectValue placeholder={_(msg`Select at least`)} />
</SelectTrigger>
<SelectContent position="popper">
{checkboxValidationRules.map((item, index) => (
@ -145,7 +151,7 @@ export const CheckboxFieldAdvancedSettings = ({
onValueChange={(val) => handleToggleChange('validationLength', val)}
>
<SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
<SelectValue placeholder="Pick a number" />
<SelectValue placeholder={_(msg`Pick a number`)} />
</SelectTrigger>
<SelectContent position="popper">
{checkboxValidationLength.map((item, index) => (
@ -164,7 +170,9 @@ export const CheckboxFieldAdvancedSettings = ({
checked={fieldState.required}
onCheckedChange={(checked) => handleToggleChange('required', checked)}
/>
<Label>Required field</Label>
<Label>
<Trans>Required field</Trans>
</Label>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
@ -172,7 +180,9 @@ export const CheckboxFieldAdvancedSettings = ({
checked={fieldState.readOnly}
onCheckedChange={(checked) => handleToggleChange('readOnly', checked)}
/>
<Label>Read only</Label>
<Label>
<Trans>Read only</Trans>
</Label>
</div>
</div>
<Button
@ -181,7 +191,9 @@ export const CheckboxFieldAdvancedSettings = ({
onClick={() => setShowValidation((prev) => !prev)}
>
<span className="flex w-full flex-row justify-between">
<span className="flex items-center">Checkbox values</span>
<span className="flex items-center">
<Trans>Checkbox values</Trans>
</span>
{showValidation ? <ChevronUp /> : <ChevronDown />}
</span>
</Button>
@ -215,7 +227,7 @@ export const CheckboxFieldAdvancedSettings = ({
variant="outline"
onClick={addValue}
>
Add another value
<Trans>Add another value</Trans>
</Button>
</div>
)}

24
packages/ui/primitives/document-flow/field-items-advanced-settings/dropdown-field.tsx
View File

@ -2,6 +2,8 @@
import { useEffect, useState } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ChevronDown, ChevronUp, Trash } from 'lucide-react';
import { validateDropdownField } from '@documenso/lib/advanced-fields-validation/validate-dropdown';
@ -32,6 +34,8 @@ export const DropdownFieldAdvancedSettings = ({
handleFieldChange,
handleErrors,
}: DropdownFieldAdvancedSettingsProps) => {
const { _ } = useLingui();
const [showValidation, setShowValidation] = useState(false);
const [values, setValues] = useState(fieldState.values ?? [{ value: 'Option 1' }]);
const [readOnly, setReadOnly] = useState(fieldState.readOnly ?? false);
@ -87,7 +91,9 @@ export const DropdownFieldAdvancedSettings = ({
return (
<div className="text-dark flex flex-col gap-4">
<div>
<Label>Select default option</Label>
<Label>
<Trans>Select default option</Trans>
</Label>
<Select
defaultValue={defaultValue}
onValueChange={(val) => {
@ -96,7 +102,7 @@ export const DropdownFieldAdvancedSettings = ({
}}
>
<SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
<SelectValue defaultValue={defaultValue} placeholder="-- Select --" />
<SelectValue defaultValue={defaultValue} placeholder={`-- ${_(msg`Select`)} --`} />
</SelectTrigger>
<SelectContent position="popper">
{values.map((item, index) => (
@ -117,7 +123,9 @@ export const DropdownFieldAdvancedSettings = ({
checked={fieldState.required}
onCheckedChange={(checked) => handleToggleChange('required', checked)}
/>
<Label>Required field</Label>
<Label>
<Trans>Required field</Trans>
</Label>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
@ -125,7 +133,9 @@ export const DropdownFieldAdvancedSettings = ({
checked={fieldState.readOnly}
onCheckedChange={(checked) => handleToggleChange('readOnly', checked)}
/>
<Label>Read only</Label>
<Label>
<Trans>Read only</Trans>
</Label>
</div>
</div>
<Button
@ -134,7 +144,9 @@ export const DropdownFieldAdvancedSettings = ({
onClick={() => setShowValidation((prev) => !prev)}
>
<span className="flex w-full flex-row justify-between">
<span className="flex items-center">Dropdown options</span>
<span className="flex items-center">
<Trans>Dropdown options</Trans>
</span>
{showValidation ? <ChevronUp /> : <ChevronDown />}
</span>
</Button>
@ -162,7 +174,7 @@ export const DropdownFieldAdvancedSettings = ({
variant="outline"
onClick={addValue}
>
Add another option
<Trans>Add another option</Trans>
</Button>
</div>
)}

48
packages/ui/primitives/document-flow/field-items-advanced-settings/number-field.tsx
View File

@ -2,6 +2,8 @@
import { useState } from 'react';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@ -31,6 +33,8 @@ export const NumberFieldAdvancedSettings = ({
handleFieldChange,
handleErrors,
}: NumberFieldAdvancedSettingsProps) => {
const { _ } = useLingui();
const [showValidation, setShowValidation] = useState(false);
const handleInput = (field: keyof NumberFieldMeta, value: string | boolean) => {
@ -56,43 +60,51 @@ export const NumberFieldAdvancedSettings = ({
return (
<div className="flex flex-col gap-4">
<div>
<Label>Label</Label>
<Label>
<Trans>Label</Trans>
</Label>
<Input
id="label"
className="bg-background mt-2"
placeholder="Label"
placeholder={_(msg`Label`)}
value={fieldState.label}
onChange={(e) => handleFieldChange('label', e.target.value)}
/>
</div>
<div>
<Label className="mt-4">Placeholder</Label>
<Label className="mt-4">
<Trans>Placeholder</Trans>
</Label>
<Input
id="placeholder"
className="bg-background mt-2"
placeholder="Placeholder"
placeholder={_(msg`Placeholder`)}
value={fieldState.placeholder}
onChange={(e) => handleFieldChange('placeholder', e.target.value)}
/>
</div>
<div>
<Label className="mt-4">Value</Label>
<Label className="mt-4">
<Trans>Value</Trans>
</Label>
<Input
id="value"
className="bg-background mt-2"
placeholder="Value"
placeholder={_(msg`Value`)}
value={fieldState.value}
onChange={(e) => handleInput('value', e.target.value)}
/>
</div>
<div>
<Label>Number format</Label>
<Label>
<Trans>Number format</Trans>
</Label>
<Select
value={fieldState.numberFormat}
onValueChange={(val) => handleInput('numberFormat', val)}
>
<SelectTrigger className="text-muted-foreground bg-background mt-2 w-full">
<SelectValue placeholder="Field format" />
<SelectValue placeholder={_(msg`Field format`)} />
</SelectTrigger>
<SelectContent position="popper">
{numberFormatValues.map((item, index) => (
@ -110,7 +122,9 @@ export const NumberFieldAdvancedSettings = ({
checked={fieldState.required}
onCheckedChange={(checked) => handleInput('required', checked)}
/>
<Label>Required field</Label>
<Label>
<Trans>Required field</Trans>
</Label>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
@ -118,7 +132,9 @@ export const NumberFieldAdvancedSettings = ({
checked={fieldState.readOnly}
onCheckedChange={(checked) => handleInput('readOnly', checked)}
/>
<Label>Read only</Label>
<Label>
<Trans>Read only</Trans>
</Label>
</div>
</div>
<Button
@ -127,14 +143,18 @@ export const NumberFieldAdvancedSettings = ({
onClick={() => setShowValidation((prev) => !prev)}
>
<span className="flex w-full flex-row justify-between">
<span className="flex items-center">Validation</span>
<span className="flex items-center">
<Trans>Validation</Trans>
</span>
{showValidation ? <ChevronUp /> : <ChevronDown />}
</span>
</Button>
{showValidation && (
<div className="mb-4 flex flex-row gap-x-4">
<div className="flex flex-col">
<Label className="mt-4">Min</Label>
<Label className="mt-4">
<Trans>Min</Trans>
</Label>
<Input
id="minValue"
className="bg-background mt-2"
@ -144,7 +164,9 @@ export const NumberFieldAdvancedSettings = ({
/>
</div>
<div className="flex flex-col">
<Label className="mt-4">Max</Label>
<Label className="mt-4">
<Trans>Max</Trans>
</Label>
<Input
id="maxValue"
className="bg-background mt-2"

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

@ -2,6 +2,7 @@
import { useEffect, useState } from 'react';
import { Trans } from '@lingui/macro';
import { ChevronDown, ChevronUp, Trash } from 'lucide-react';
import { validateRadioField } from '@documenso/lib/advanced-fields-validation/validate-radio';
@ -107,7 +108,9 @@ export const RadioFieldAdvancedSettings = ({
checked={fieldState.required}
onCheckedChange={(checked) => handleToggleChange('required', checked)}
/>
<Label>Required field</Label>
<Label>
<Trans>Required field</Trans>
</Label>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
@ -115,7 +118,9 @@ export const RadioFieldAdvancedSettings = ({
checked={fieldState.readOnly}
onCheckedChange={(checked) => handleToggleChange('readOnly', checked)}
/>
<Label>Read only</Label>
<Label>
<Trans>Read only</Trans>
</Label>
</div>
</div>
<Button
@ -124,7 +129,9 @@ export const RadioFieldAdvancedSettings = ({
onClick={() => setShowValidation((prev) => !prev)}
>
<span className="flex w-full flex-row justify-between">
<span className="flex items-center">Radio values</span>
<span className="flex items-center">
<Trans>Radio values</Trans>
</span>
{showValidation ? <ChevronUp /> : <ChevronDown />}
</span>
</Button>
@ -157,7 +164,7 @@ export const RadioFieldAdvancedSettings = ({
variant="outline"
onClick={addValue}
>
Add another value
<Trans>Add another value</Trans>
</Button>
</div>
)}

37
packages/ui/primitives/document-flow/field-items-advanced-settings/text-field.tsx
View File

@ -1,3 +1,6 @@
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
import { type TTextFieldMeta as TextFieldMeta } from '@documenso/lib/types/field-meta';
import { Input } from '@documenso/ui/primitives/input';
@ -16,6 +19,8 @@ export const TextFieldAdvancedSettings = ({
handleFieldChange,
handleErrors,
}: TextFieldAdvancedSettingsProps) => {
const { _ } = useLingui();
const handleInput = (field: keyof TextFieldMeta, value: string | boolean) => {
const text = field === 'text' ? String(value) : fieldState.text || '';
const limit =
@ -36,45 +41,53 @@ export const TextFieldAdvancedSettings = ({
return (
<div className="flex flex-col gap-4">
<div>
<Label>Label</Label>
<Label>
<Trans>Label</Trans>
</Label>
<Input
id="label"
className="bg-background mt-2"
placeholder="Field label"
placeholder={_(msg`Field label`)}
value={fieldState.label}
onChange={(e) => handleFieldChange('label', e.target.value)}
/>
</div>
<div>
<Label className="mt-4">Placeholder</Label>
<Label className="mt-4">
<Trans>Placeholder</Trans>
</Label>
<Input
id="placeholder"
className="bg-background mt-2"
placeholder="Field placeholder"
placeholder={_(msg`Field placeholder`)}
value={fieldState.placeholder}
onChange={(e) => handleFieldChange('placeholder', e.target.value)}
/>
</div>
<div>
<Label className="mt-4">Add text</Label>
<Label className="mt-4">
<Trans>Add text</Trans>
</Label>
<Textarea
id="text"
className="bg-background mt-2"
placeholder="Add text to the field"
placeholder={_(msg`Add text to the field`)}
value={fieldState.text}
onChange={(e) => handleInput('text', e.target.value)}
/>
</div>
<div>
<Label>Character Limit</Label>
<Label>
<Trans>Character Limit</Trans>
</Label>
<Input
id="characterLimit"
type="number"
min={0}
className="bg-background mt-2"
placeholder="Field character limit"
placeholder={_(msg`Field character limit`)}
value={fieldState.characterLimit}
onChange={(e) => handleInput('characterLimit', e.target.value)}
/>
@ -87,7 +100,9 @@ export const TextFieldAdvancedSettings = ({
checked={fieldState.required}
onCheckedChange={(checked) => handleInput('required', checked)}
/>
<Label>Required field</Label>
<Label>
<Trans>Required field</Trans>
</Label>
</div>
<div className="flex flex-row items-center gap-2">
<Switch
@ -95,7 +110,9 @@ export const TextFieldAdvancedSettings = ({
checked={fieldState.readOnly}
onCheckedChange={(checked) => handleInput('readOnly', checked)}
/>
<Label>Read only</Label>
<Label>
<Trans>Read only</Trans>
</Label>
</div>
</div>
</div>

13
packages/ui/primitives/document-flow/missing-signature-field-dialog.tsx
View File

@ -1,5 +1,6 @@
'use client';
import { Trans } from '@lingui/macro';
import { DialogClose } from '@radix-ui/react-dialog';
import { Button } from '@documenso/ui/primitives/button';
@ -25,18 +26,22 @@ export const MissingSignatureFieldDialog = ({
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogContent className="max-w-lg" position="center">
<DialogHeader>
<DialogTitle>No signature field found</DialogTitle>
<DialogTitle>
<Trans>No signature field found</Trans>
</DialogTitle>
<DialogDescription>
<p className="mt-2">
Some signers have not been assigned a signature field. Please assign at least 1
signature field to each signer before proceeding.
<Trans>
Some signers have not been assigned a signature field. Please assign at least 1
signature field to each signer before proceeding.
</Trans>
</p>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
<Trans>Close</Trans>
</Button>
</DialogClose>
</DialogFooter>

17
packages/ui/primitives/document-flow/send-document-action-dialog.tsx
View File

@ -1,5 +1,6 @@
import { useState } from 'react';
import { Trans } from '@lingui/macro';
import { Loader } from 'lucide-react';
import type { ButtonProps } from '../button';
@ -30,16 +31,20 @@ export const SendDocumentActionDialog = ({
<DialogTrigger asChild>
<Button type="button" className={className}>
{loading && <Loader className="text-documenso mr-2 h-5 w-5 animate-spin" />}
Send
<Trans>Send</Trans>
</Button>
</DialogTrigger>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle className="text-center text-lg font-semibold">Send Document</DialogTitle>
<DialogTitle className="text-center text-lg font-semibold">
<Trans>Send Document</Trans>
</DialogTitle>
<DialogDescription className="text-center text-base">
You are about to send this document to the recipients. Are you sure you want to
continue?
<Trans>
You are about to send this document to the recipients. Are you sure you want to
continue?
</Trans>
</DialogDescription>
</DialogHeader>
@ -50,13 +55,13 @@ export const SendDocumentActionDialog = ({
variant="secondary"
onClick={() => setOpen(false)}
>
Cancel
<Trans>Cancel</Trans>
</Button>
{/* We would use DialogAction here but it interrupts the submit action */}
<Button className={className} {...props}>
{loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
Send
<Trans>Send</Trans>
</Button>
</DialogFooter>
</DialogContent>

5
packages/ui/primitives/document-flow/types.ts
View File

@ -1,3 +1,4 @@
import type { MessageDescriptor } from '@lingui/core';
import { z } from 'zod';
import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
@ -58,8 +59,8 @@ export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
};
export interface DocumentFlowStep {
title: string;
description: string;
title: MessageDescriptor;
description: MessageDescriptor;
stepIndex?: number;
onBackStep?: () => unknown;
onNextStep?: () => unknown;

20
packages/ui/primitives/document-password-dialog.tsx
View File

@ -1,6 +1,8 @@
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
@ -30,6 +32,8 @@ export const PasswordDialog = ({
onPasswordSubmit,
isError,
}: PasswordDialogProps) => {
const { _ } = useLingui();
const form = useForm<TPasswordDialogFormSchema>({
defaultValues: {
password: defaultPassword ?? '',
@ -45,7 +49,7 @@ export const PasswordDialog = ({
if (isError) {
form.setError('password', {
type: 'manual',
message: 'The password you have entered is incorrect. Please try again.',
message: _(msg`The password you have entered is incorrect. Please try again.`),
});
}
}, [form, isError]);
@ -54,10 +58,14 @@ export const PasswordDialog = ({
<Dialog open={open}>
<DialogContent className="w-full max-w-md">
<DialogHeader>
<DialogTitle>Password Required</DialogTitle>
<DialogTitle>
<Trans>Password Required</Trans>
</DialogTitle>
<DialogDescription className="text-muted-foreground">
This document is password protected. Please enter the password to view the document.
<Trans>
This document is password protected. Please enter the password to view the document.
</Trans>
</DialogDescription>
</DialogHeader>
@ -73,7 +81,7 @@ export const PasswordDialog = ({
<Input
type="password"
className="bg-background"
placeholder="Enter password"
placeholder={_(msg`Enter password`)}
autoComplete="off"
{...field}
/>
@ -85,7 +93,9 @@ export const PasswordDialog = ({
/>
<div>
<Button>Submit</Button>
<Button>
<Trans>Submit</Trans>
</Button>
</div>
</fieldset>
</form>

13
packages/ui/primitives/multi-select-combobox.tsx
View File

@ -2,6 +2,9 @@
import * as React from 'react';
import type { MessageDescriptor } from '@lingui/core';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { AnimatePresence } from 'framer-motion';
import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';
@ -24,7 +27,7 @@ type MultiSelectComboboxProps<T = OptionValue> = {
emptySelectionPlaceholder?: React.ReactNode | string;
enableClearAllButton?: boolean;
loading?: boolean;
inputPlaceholder?: string;
inputPlaceholder?: MessageDescriptor;
onChange: (_values: T[]) => void;
options: ComboBoxOption<T>[];
selectedValues: T[];
@ -46,6 +49,8 @@ export function MultiSelectCombobox<T = OptionValue>({
options,
selectedValues,
}: MultiSelectComboboxProps<T>) {
const { _ } = useLingui();
const [open, setOpen] = React.useState(false);
const handleSelect = (selectedOption: T) => {
@ -143,8 +148,10 @@ export function MultiSelectCombobox<T = OptionValue>({
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder={inputPlaceholder} />
<CommandEmpty>No value found.</CommandEmpty>
<CommandInput placeholder={inputPlaceholder && _(inputPlaceholder)} />
<CommandEmpty>
<Trans>No value found.</Trans>
</CommandEmpty>
<CommandGroup>
{options.map((option, i) => (
<CommandItem key={i} onSelect={() => handleSelect(option.value)}>

3
packages/ui/primitives/signature-pad/signature-pad.tsx
View File

@ -3,6 +3,7 @@
import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { Trans } from '@lingui/macro';
import { Undo2 } from 'lucide-react';
import type { StrokeOptions } from 'perfect-freehand';
import { getStroke } from 'perfect-freehand';
@ -252,7 +253,7 @@ export const SignaturePad = ({
className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-xs focus-visible:outline-none focus-visible:ring-2"
onClick={() => onClearClick()}
>
Clear Signature
<Trans>Clear Signature</Trans>
</button>
</div>

40
packages/ui/primitives/template-flow/add-template-fields.tsx
View File

@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Caveat } from 'next/font/google';
import { Trans, msg } from '@lingui/macro';
import {
CalendarDays,
CheckSquare,
@ -21,7 +22,7 @@ import { useFieldArray, useForm } from 'react-hook-form';
import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import {
type TFieldMetaSchema as FieldMeta,
ZFieldMetaSchema,
@ -365,8 +366,8 @@ export const AddTemplateFieldsFormPartial = ({
<>
{showAdvancedSettings && currentField ? (
<FieldAdvancedSettings
title="Advanced settings"
description={`Configure the ${FRIENDLY_FIELD_TYPE[currentField.type]} field`}
title={msg`Advanced settings`}
description={msg`Configure the ${FRIENDLY_FIELD_TYPE[currentField.type]} field`}
field={currentField}
fields={localFields}
onAdvancedSettings={handleAdvancedSettings}
@ -460,14 +461,15 @@ export const AddTemplateFieldsFormPartial = ({
<CommandEmpty>
<span className="text-muted-foreground inline-block px-4">
No recipient matching this description was found.
<Trans>No recipient matching this description was found.</Trans>
</span>
</CommandEmpty>
{recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
<CommandGroup key={roleIndex}>
<div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
{`${RECIPIENT_ROLES_DESCRIPTION[role].roleName}s`}
{/* Todo: Translations - Add plural translations. */}
{`${RECIPIENT_ROLES_DESCRIPTION_ENG[role].roleName}s`}
</div>
{roleRecipients.length === 0 && (
@ -475,7 +477,7 @@ export const AddTemplateFieldsFormPartial = ({
key={`${role}-empty`}
className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
>
No recipients with this role
<Trans>No recipients with this role</Trans>
</div>
)}
@ -542,7 +544,7 @@ export const AddTemplateFieldsFormPartial = ({
fontCaveat.className,
)}
>
Signature
<Trans>Signature</Trans>
</p>
</CardContent>
</Card>
@ -594,7 +596,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<Mail className="h-4 w-4" />
Email
<Trans>Email</Trans>
</p>
</CardContent>
</Card>
@ -620,7 +622,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<User className="h-4 w-4" />
Name
<Trans>Name</Trans>
</p>
</CardContent>
</Card>
@ -646,7 +648,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<CalendarDays className="h-4 w-4" />
Date
<Trans>Date</Trans>
</p>
</CardContent>
</Card>
@ -672,7 +674,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<Type className="h-4 w-4" />
Text
<Trans>Text</Trans>
</p>
</CardContent>
</Card>
@ -698,7 +700,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<Hash className="h-4 w-4" />
Number
<Trans>Number</Trans>
</p>
</CardContent>
</Card>
@ -724,7 +726,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<Disc className="h-4 w-4" />
Radio
<Trans>Radio</Trans>
</p>
</CardContent>
</Card>
@ -750,7 +752,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<CheckSquare className="h-4 w-4" />
Checkbox
<Trans>Checkbox</Trans>
</p>
</CardContent>
</Card>
@ -776,7 +778,7 @@ export const AddTemplateFieldsFormPartial = ({
)}
>
<ChevronDown className="h-4 w-4" />
Dropdown
<Trans>Dropdown</Trans>
</p>
</CardContent>
</Card>
@ -787,16 +789,12 @@ export const AddTemplateFieldsFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={isSubmitting}
disabled={isSubmitting}
goNextLabel="Save Template"
goNextLabel={msg`Save Template`}
onGoBackClick={() => {
previousStep();
remove();

40
packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
View File

@ -3,6 +3,8 @@
import React, { useEffect, useId, useMemo, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { motion } from 'framer-motion';
import { Link2Icon, Plus, Trash } from 'lucide-react';
import { useSession } from 'next-auth/react';
@ -57,6 +59,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
onSubmit,
}: AddTemplatePlaceholderRecipientsFormProps) => {
const initialId = useId();
const { _ } = useLingui();
const { data: session } = useSession();
const user = session?.user;
@ -202,13 +206,15 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
})}
>
{!showAdvancedSettings && index === 0 && (
<FormLabel required>Email</FormLabel>
<FormLabel required>
<Trans>Email</Trans>
</FormLabel>
)}
<FormControl>
<Input
type="email"
placeholder="Email"
placeholder={_(msg`Email`)}
{...field}
disabled={
field.disabled ||
@ -234,11 +240,15 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
'col-span-4': showAdvancedSettings,
})}
>
{!showAdvancedSettings && index === 0 && <FormLabel>Name</FormLabel>}
{!showAdvancedSettings && index === 0 && (
<FormLabel>
<Trans>Name</Trans>
</FormLabel>
)}
<FormControl>
<Input
placeholder="Name"
placeholder={_(msg`Name`)}
{...field}
disabled={
field.disabled ||
@ -299,12 +309,14 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
</TooltipTrigger>
<TooltipContent className="text-foreground z-9999 max-w-md p-4">
<h3 className="text-foreground text-lg font-semibold">
Direct link receiver
<Trans>Direct link receiver</Trans>
</h3>
<p className="text-muted-foreground mt-1">
This field cannot be modified or deleted. When you share this template's
direct link or add it to your public profile, anyone who accesses it can
input their name and email, and fill in the fields assigned to them.
<Trans>
This field cannot be modified or deleted. When you share this template's
direct link or add it to your public profile, anyone who accesses it can
input their name and email, and fill in the fields assigned to them.
</Trans>
</p>
</TooltipContent>
</Tooltip>
@ -340,7 +352,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
onClick={() => onAddPlaceholderRecipient()}
>
<Plus className="-ml-1 mr-2 h-5 w-5" />
Add Placeholder Recipient
<Trans>Add Placeholder Recipient</Trans>
</Button>
<Button
@ -354,7 +366,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
onClick={() => onAddPlaceholderSelfRecipient()}
>
<Plus className="-ml-1 mr-2 h-5 w-5" />
Add Myself
<Trans>Add Myself</Trans>
</Button>
</div>
@ -372,7 +384,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
className="text-muted-foreground ml-2 text-sm"
htmlFor="showAdvancedRecipientSettings"
>
Show advanced settings
<Trans>Show advanced settings</Trans>
</label>
</div>
)}
@ -381,11 +393,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={isSubmitting}

52
packages/ui/primitives/template-flow/add-template-settings.tsx
View File

@ -3,6 +3,8 @@
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { InfoIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
@ -72,6 +74,8 @@ export const AddTemplateSettingsFormPartial = ({
template,
onSubmit,
}: AddTemplateSettingsFormProps) => {
const { _ } = useLingui();
const { documentAuthOption } = extractDocumentAuthMethods({
documentAuth: template.authOptions,
});
@ -126,7 +130,9 @@ export const AddTemplateSettingsFormPartial = ({
name="title"
render={({ field }) => (
<FormItem>
<FormLabel required>Template title</FormLabel>
<FormLabel required>
<Trans>Template title</Trans>
</FormLabel>
<FormControl>
<Input className="bg-background" {...field} />
@ -142,7 +148,7 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Document access
<Trans>Document access</Trans>
<DocumentGlobalAuthAccessTooltip />
</FormLabel>
@ -160,7 +166,7 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Recipient action authentication
<Trans>Recipient action authentication</Trans>
<DocumentGlobalAuthActionTooltip />
</FormLabel>
@ -175,7 +181,7 @@ export const AddTemplateSettingsFormPartial = ({
<Accordion type="multiple">
<AccordionItem value="email-options" className="border-none">
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
Email Options
<Trans>Email Options</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed [&>div]:pb-0">
@ -186,7 +192,9 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel>
Subject <span className="text-muted-foreground">(Optional)</span>
<Trans>
Subject <span className="text-muted-foreground">(Optional)</span>
</Trans>
</FormLabel>
<FormControl>
@ -204,7 +212,9 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel>
Message <span className="text-muted-foreground">(Optional)</span>
<Trans>
Message <span className="text-muted-foreground">(Optional)</span>
</Trans>
</FormLabel>
<FormControl>
@ -225,7 +235,7 @@ export const AddTemplateSettingsFormPartial = ({
<Accordion type="multiple">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
Advanced Options
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed">
@ -236,15 +246,17 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
External ID{' '}
<Trans>External ID</Trans>{' '}
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
Add an external ID to the template. This can be used to identify in
external systems.
<Trans>
Add an external ID to the template. This can be used to identify
in external systems.
</Trans>
</TooltipContent>
</Tooltip>
</FormLabel>
@ -263,7 +275,9 @@ export const AddTemplateSettingsFormPartial = ({
name="meta.dateFormat"
render={({ field }) => (
<FormItem>
<FormLabel>Date Format</FormLabel>
<FormLabel>
<Trans>Date Format</Trans>
</FormLabel>
<FormControl>
<Select {...field} onValueChange={field.onChange}>
@ -291,7 +305,9 @@ export const AddTemplateSettingsFormPartial = ({
name="meta.timezone"
render={({ field }) => (
<FormItem>
<FormLabel>Time Zone</FormLabel>
<FormLabel>
<Trans>Time Zone</Trans>
</FormLabel>
<FormControl>
<Combobox
@ -313,14 +329,16 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
Redirect URL{' '}
<Trans>Redirect URL</Trans>{' '}
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
Add a URL to redirect the user to once the document is signed
<Trans>
Add a URL to redirect the user to once the document is signed
</Trans>
</TooltipContent>
</Tooltip>
</FormLabel>
@ -342,11 +360,7 @@ export const AddTemplateSettingsFormPartial = ({
</DocumentFlowFormContainerContent>
<DocumentFlowFormContainerFooter>
<DocumentFlowFormContainerStep
title={documentFlow.title}
step={currentStep}
maxStep={totalSteps}
/>
<DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
<DocumentFlowFormContainerActions
loading={form.formState.isSubmitting}