Merge branch 'main' into feat/add-pdf-image-renderer

apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx

@@ -115,10 +115,12 @@ export function AssistantConfirmationDialog({
                   <div className="mt-4 flex flex-col gap-4">
                     {!isEditingNextSigner && (
                       <div>
-                        <p className="text-muted-foreground text-sm">
-                          The next recipient to sign this document will be{' '}
-                          <span className="font-semibold">{form.watch('name')}</span> (
-                          <span className="font-semibold">{form.watch('email')}</span>).
+                        <p className="text-sm text-muted-foreground">
+                          <Trans>
+                            The next recipient to sign this document will be{' '}
+                            <span className="font-semibold">{form.watch('name')}</span> (
+                            <span className="font-semibold">{form.watch('email')}</span>).
+                          </Trans>
                         </p>
 
                         <Button

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -258,10 +258,10 @@ export const EnvelopeDistributeDialog = ({
                 >
                   <TabsList className="w-full">
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.EMAIL}>
-                      Email
+                      <Trans>Email</Trans>
                     </TabsTrigger>
                     <TabsTrigger className="w-full" value={DocumentDistributionMethod.NONE}>
-                      None
+                      <Trans>None</Trans>
                     </TabsTrigger>
                   </TabsList>
                 </Tabs>

apps/remix/app/components/dialogs/envelopes-bulk-delete-dialog.tsx

@@ -149,7 +149,12 @@ export const EnvelopesBulkDeleteDialog = ({
         </Alert>
 
         <DialogFooter>
-          <Button type="button" variant="secondary" disabled={isPending}>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => onOpenChange(false)}
+            disabled={isPending}
+          >
             <Trans>Cancel</Trans>
           </Button>
 

apps/remix/app/components/dialogs/organisation-group-delete-dialog.tsx

@@ -77,7 +77,7 @@ export const OrganisationGroupDeleteDialog = ({
           </DialogTitle>
 
           <DialogDescription className="mt-4">
-            <Trans>
+            <Trans context="Removing group from organisation">
               You are about to remove the following group from{' '}
               <span className="font-semibold">{organisation.name}</span>.
             </Trans>

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -127,7 +127,11 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
   };
 
   const mapTextToUrl = (text: string) => {
-    return text.toLowerCase().replace(/\s+/g, '-');
+    return text
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .replace(/\s+/g, '-');
   };
 
   const dialogState = useMemo(() => {
@@ -260,7 +264,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                         <Input className="bg-background" {...field} />
                       </FormControl>
                       {!form.formState.errors.teamUrl && (
-                        <span className="text-foreground/50 text-xs font-normal">
+                        <span className="text-xs font-normal text-foreground/50">
                           {field.value ? (
                             `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
                           ) : (
@@ -288,7 +292,7 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
                           />
 
                           <label
-                            className="text-muted-foreground ml-2 text-sm"
+                            className="ml-2 text-sm text-muted-foreground"
                             htmlFor="inherit-members"
                           >
                             <Trans>Allow all organisation members to access this team</Trans>

apps/remix/app/components/dialogs/team-group-delete-dialog.tsx

@@ -81,7 +81,7 @@ export const TeamGroupDeleteDialog = ({
           </DialogTitle>
 
           <DialogDescription className="mt-4">
-            <Trans>
+            <Trans context="Removing group from team">
               You are about to remove the following group from{' '}
               <span className="font-semibold">{team.name}</span>.
             </Trans>

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -114,7 +114,9 @@ export const ConfigureFieldsView = ({
       templateId: null,
       token: '',
       documentDeletedAt: null,
-      expired: null,
+      expired: null, // !: deprecated Not in use. To be removed in a future migration.
+      expiresAt: null,
+      expirationNotifiedAt: null,
       signedAt: null,
       authOptions: null,
       rejectionReason: null,

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -1,11 +1,14 @@
+import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 
 export const EmbedClientLoading = () => {
   return (
-    <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
+    <div className="fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center bg-background">
       <Loader className="mr-2 h-4 w-4 animate-spin" />
 
-      <span>Loading...</span>
+      <span>
+        <Trans>Loading...</Trans>
+      </span>
     </div>
   );
 };

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -500,7 +500,9 @@ export const EmbedDirectTemplateClientPage = ({
 
       {!hidePoweredBy && (
         <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
-          <span>Powered by</span>
+          <span>
+            <Trans>Powered by</Trans>
+          </span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -511,7 +511,9 @@ export const EmbedSignDocumentV1ClientPage = ({
 
         {!hidePoweredBy && (
           <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
-            <span>Powered by</span>
+            <span>
+              <Trans>Powered by</Trans>
+            </span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}

apps/remix/app/components/embed/embed-document-signing-page-v2.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
+import { EnvelopeType } from '@prisma/client';
 
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 
@@ -25,7 +26,7 @@ export const EmbedSignDocumentV2ClientPage = ({
 }: EmbedSignDocumentV2ClientPageProps) => {
   const { _ } = useLingui();
 
-  const { envelope, recipient, envelopeData, setFullName, fullName } =
+  const { envelope, recipient, envelopeData, setFullName, setEmail, fullName } =
     useRequiredEnvelopeSigningContext();
 
   const { isCompleted, isRejected, recipientSignature } = envelopeData;
@@ -35,6 +36,7 @@ export const EmbedSignDocumentV2ClientPage = ({
   const [hasFinishedInit, setHasFinishedInit] = useState(false);
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
+  const [isEmailLocked, setIsEmailLocked] = useState(envelope.type === EnvelopeType.DOCUMENT);
 
   const onDocumentCompleted = (data: {
     token: string;
@@ -132,6 +134,17 @@ export const EmbedSignDocumentV2ClientPage = ({
       // Since a recipient can be provided a name we can lock it without requiring
       // a to be provided by the parent application, unlike direct templates.
       setIsNameLocked(!!data.lockName);
+
+      if (envelope.type === EnvelopeType.TEMPLATE) {
+        if (!isCompleted && data.email) {
+          setEmail(data.email);
+        }
+
+        if (data.email) {
+          setIsEmailLocked(!!data.lockEmail);
+        }
+      }
+
       setAllowDocumentRejection(!!data.allowDocumentRejection);
 
       if (data.darkModeDisabled) {
@@ -213,6 +226,7 @@ export const EmbedSignDocumentV2ClientPage = ({
   return (
     <EmbedSigningProvider
       isNameLocked={isNameLocked}
+      isEmailLocked={isEmailLocked}
       hidePoweredBy={hidePoweredBy}
       allowDocumentRejection={allowDocumentRejection}
       onDocumentCompleted={onDocumentCompleted}

apps/remix/app/components/embed/embed-recipient-expired.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+
+export const EmbedRecipientExpired = () => {
+  const [hasPostedMessage, setHasPostedMessage] = useState(false);
+
+  useEffect(() => {
+    if (window.parent && !hasPostedMessage) {
+      window.parent.postMessage(
+        {
+          action: 'recipient-expired',
+          data: null,
+        },
+        '*',
+      );
+    }
+
+    setHasPostedMessage(true);
+  }, [hasPostedMessage]);
+
+  if (!hasPostedMessage) {
+    return null;
+  }
+
+  return (
+    <div className="embed--RecipientExpired relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <h3 className="text-center text-2xl font-bold text-foreground">
+        <Trans>Signing Window Expired</Trans>
+      </h3>
+
+      <div className="mt-8 max-w-[50ch] text-center">
+        <p className="text-sm text-muted-foreground">
+          <Trans>
+            Your signing window for this document has expired. Please contact the sender for a new
+            invitation.
+          </Trans>
+        </p>
+
+        <p className="mt-4 text-sm text-muted-foreground">
+          <Trans>Please check with the parent application for more information.</Trans>
+        </p>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/forms/document-preferences-form.tsx

@@ -11,6 +11,10 @@ import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/org
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { DATE_FORMATS } from '@documenso/lib/constants/date-formats';
 import { DOCUMENT_SIGNATURE_TYPES, DocumentSignatureType } from '@documenso/lib/constants/document';
+import {
+  type TEnvelopeExpirationPeriod,
+  ZEnvelopeExpirationPeriod,
+} from '@documenso/lib/constants/envelope-expiration';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -27,6 +31,7 @@ import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import { extractTeamSignatureSettings } from '@documenso/lib/utils/teams';
 import { DocumentSignatureSettingsTooltip } from '@documenso/ui/components/document/document-signature-settings-tooltip';
+import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { RecipientRoleSelect } from '@documenso/ui/components/recipient/recipient-role-select';
 import { Alert } from '@documenso/ui/primitives/alert';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -70,6 +75,7 @@ export type TDocumentPreferencesFormSchema = {
   defaultRecipients: TDefaultRecipients | null;
   delegateDocumentOwnership: boolean | null;
   aiFeaturesEnabled: boolean | null;
+  envelopeExpirationPeriod: TEnvelopeExpirationPeriod | null;
 };
 
 type SettingsSubset = Pick<
@@ -87,6 +93,7 @@ type SettingsSubset = Pick<
   | 'defaultRecipients'
   | 'delegateDocumentOwnership'
   | 'aiFeaturesEnabled'
+  | 'envelopeExpirationPeriod'
 >;
 
 export type DocumentPreferencesFormProps = {
@@ -126,6 +133,7 @@ export const DocumentPreferencesForm = ({
     defaultRecipients: ZDefaultRecipientsSchema.nullable(),
     delegateDocumentOwnership: z.boolean().nullable(),
     aiFeaturesEnabled: z.boolean().nullable(),
+    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullable(),
   });
 
   const form = useForm<TDocumentPreferencesFormSchema>({
@@ -146,6 +154,7 @@ export const DocumentPreferencesForm = ({
         : null,
       delegateDocumentOwnership: settings.delegateDocumentOwnership,
       aiFeaturesEnabled: settings.aiFeaturesEnabled,
+      envelopeExpirationPeriod: settings.envelopeExpirationPeriod ?? null,
     },
     resolver: zodResolver(ZDocumentPreferencesFormSchema),
   });
@@ -669,6 +678,35 @@ export const DocumentPreferencesForm = ({
             )}
           />
 
+          <FormField
+            control={form.control}
+            name="envelopeExpirationPeriod"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Envelope Expiration</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <ExpirationPeriodPicker
+                    value={field.value}
+                    onChange={field.onChange}
+                    inheritLabel={canInherit ? t`Inherit from organisation` : undefined}
+                  />
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls how long recipients have to complete signing before the document
+                    expires. After expiration, recipients can no longer sign the document.
+                  </Trans>
+                </FormDescription>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
           {isAiFeaturesConfigured && (
             <FormField
               control={form.control}

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -97,13 +97,13 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           {menuNavigationLinks.map(({ href, text }) => (
             <Link
               key={href}
-              className="text-foreground hover:text-foreground/80 flex items-center gap-2 text-2xl font-semibold"
+              className="flex items-center gap-2 text-2xl font-semibold text-foreground hover:text-foreground/80"
               to={href}
               onClick={() => handleMenuItemClick()}
             >
               {text}
               {href === '/inbox' && unreadCountData && unreadCountData.count > 0 && (
-                <span className="bg-primary text-primary-foreground flex h-6 min-w-[1.5rem] items-center justify-center rounded-full px-1.5 text-xs font-semibold">
+                <span className="flex h-6 min-w-[1.5rem] items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-primary-foreground">
                   {unreadCountData.count > 99 ? '99+' : unreadCountData.count}
                 </span>
               )}
@@ -111,7 +111,7 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
           ))}
 
           <button
-            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            className="text-2xl font-semibold text-foreground hover:text-foreground/80"
             onClick={async () => authClient.signOut()}
           >
             <Trans>Sign Out</Trans>
@@ -123,8 +123,10 @@ export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps
             <ThemeSwitcher />
           </div>
 
-          <p className="text-muted-foreground text-sm">
-            © {new Date().getFullYear()} Documenso, Inc. <br /> All rights reserved.
+          <p className="text-sm text-muted-foreground">
+            © {new Date().getFullYear()} Documenso, Inc.
+            <br />
+            <Trans>All rights reserved.</Trans>
           </p>
         </div>
       </SheetContent>

apps/remix/app/components/general/billing-plans.tsx

@@ -118,7 +118,9 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
 
                 {price.product.features && price.product.features.length > 0 && (
                   <div className="mt-4 text-muted-foreground">
-                    <div className="text-sm font-medium">Includes:</div>
+                    <div className="text-sm font-medium">
+                      <Trans>Includes:</Trans>
+                    </div>
 
                     <ul className="mt-1 divide-y text-sm">
                       {price.product.features.map((feature, index) => (

apps/remix/app/components/general/document-signing/document-signing-auth-2fa.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
@@ -27,7 +28,6 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuth2FAProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -44,7 +44,6 @@ type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
 
 export const DocumentSigningAuth2FA = ({
   actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -101,14 +100,39 @@ export const DocumentSigningAuth2FA = ({
         <Alert variant="warning">
           <AlertDescription>
             <p>
-              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
-                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
-              ) : (
-                // Todo: Translate
-                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
-              )}
+              {match({ role: recipient.role, actionTarget })
+                .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
+                  <Trans>You need to setup 2FA to sign this field.</Trans>
+                ))
+                .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
+                  <Trans>You need to setup 2FA to sign this document.</Trans>
+                ))
+                .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
+                  <Trans>You need to setup 2FA to approve this field.</Trans>
+                ))
+                .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
+                  <Trans>You need to setup 2FA to approve this document.</Trans>
+                ))
+                .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
+                  <Trans>You need to setup 2FA to view this field.</Trans>
+                ))
+                .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
+                  <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
+                ))
+                .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
+                  <Trans>You need to setup 2FA to view this field.</Trans>
+                ))
+                .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
+                  <Trans>You need to setup 2FA to view this document.</Trans>
+                ))
+                .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
+                  <Trans>You need to setup 2FA to assist with this field.</Trans>
+                ))
+                .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
+                  <Trans>You need to setup 2FA to assist with this document.</Trans>
+                ))
+                .exhaustive()}
             </p>
-
             <p className="mt-2">
               <Trans>
                 By enabling 2FA, you will be required to enter a code from your authenticator app
@@ -138,7 +162,9 @@ export const DocumentSigningAuth2FA = ({
               name="token"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>2FA token</FormLabel>
+                  <FormLabel required>
+                    <Trans>2FA token</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <PinInput {...field} value={field.value ?? ''} maxLength={6}>

apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { Trans, useLingui } from '@lingui/react/macro';
 import { RecipientRole } from '@prisma/client';
+import { match } from 'ts-pattern';
 
 import { authClient } from '@documenso/auth/client';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
@@ -13,13 +14,11 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuthAccountProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
   onOpenChange: (value: boolean) => void;
 };
 
 export const DocumentSigningAuthAccount = ({
   actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onOpenChange,
 }: DocumentSigningAuthAccountProps) => {
   const { recipient, isDirectTemplate } = useRequiredDocumentSigningAuthContext();
@@ -55,32 +54,110 @@ export const DocumentSigningAuthAccount = ({
     <fieldset disabled={isSigningOut} className="space-y-4">
       <Alert variant="warning">
         <AlertDescription>
-          {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
-            <span>
-              {isDirectTemplate ? (
-                <Trans>To mark this document as viewed, you need to be logged in.</Trans>
-              ) : (
-                <Trans>
-                  To mark this document as viewed, you need to be logged in as{' '}
-                  <strong>{recipient.email}</strong>
-                </Trans>
-              )}
-            </span>
-          ) : (
-            <span>
-              {isDirectTemplate ? (
-                <Trans>
-                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
-                  logged in.
-                </Trans>
-              ) : (
-                <Trans>
-                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
-                  logged in as <strong>{recipient.email}</strong>
-                </Trans>
-              )}
-            </span>
-          )}
+          <span>
+            {match({ role: recipient.role, actionTarget })
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To sign this field, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To sign this field, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To sign this document, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To sign this document, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To approve this field, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To approve this field, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To approve this document, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To approve this document, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To view this field, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To view this field, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To mark this document as viewed, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To mark this document as viewed, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To view this field, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To view this field, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To view this document, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To view this document, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To assist with this field, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To assist with this field, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () =>
+                isDirectTemplate ? (
+                  <Trans>To assist with this document, you need to be logged in.</Trans>
+                ) : (
+                  <Trans>
+                    To assist with this document, you need to be logged in as{' '}
+                    <strong>{recipient.email}</strong>
+                  </Trans>
+                ),
+              )
+              .exhaustive()}
+          </span>
         </AlertDescription>
       </Alert>
 

apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx

@@ -8,6 +8,7 @@ import { RecipientRole } from '@prisma/client';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
@@ -38,7 +39,6 @@ import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-p
 
 export type DocumentSigningAuthPasskeyProps = {
   actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -52,7 +52,6 @@ type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
 
 export const DocumentSigningAuthPasskey = ({
   actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,
@@ -128,9 +127,62 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {/* Todo: Translate */}
-            Your browser does not support passkeys, which is required to {actionVerb.toLowerCase()}{' '}
-            this {actionTarget.toLowerCase()}.
+            {match({ role: recipient.role, actionTarget })
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to sign this field.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to sign this document.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to approve this field.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to approve this
+                  document.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to view this field.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to mark this document as
+                  viewed.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to view this field.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to view this document.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to assist with this
+                  field.
+                </Trans>
+              ))
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>
+                  Your browser does not support passkeys, which is required to assist with this
+                  document.
+                </Trans>
+              ))
+              .exhaustive()}
           </AlertDescription>
         </Alert>
 
@@ -178,10 +230,38 @@ export const DocumentSigningAuthPasskey = ({
       <div className="space-y-4">
         <Alert variant="warning">
           <AlertDescription>
-            {/* Todo: Translate */}
-            {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
-              ? 'You need to setup a passkey to mark this document as viewed.'
-              : `You need to setup a passkey to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
+            {match({ role: recipient.role, actionTarget })
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'FIELD' }, () => (
+                <Trans>You need to setup a passkey to sign this field.</Trans>
+              ))
+              .with({ role: RecipientRole.SIGNER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>You need to setup a passkey to sign this document.</Trans>
+              ))
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'FIELD' }, () => (
+                <Trans>You need to setup a passkey to approve this field.</Trans>
+              ))
+              .with({ role: RecipientRole.APPROVER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>You need to setup a passkey to approve this document.</Trans>
+              ))
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'FIELD' }, () => (
+                <Trans>You need to setup a passkey to view this field.</Trans>
+              ))
+              .with({ role: RecipientRole.VIEWER, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>You need to setup a passkey to mark this document as viewed.</Trans>
+              ))
+              .with({ role: RecipientRole.CC, actionTarget: 'FIELD' }, () => (
+                <Trans>You need to setup a passkey to view this field.</Trans>
+              ))
+              .with({ role: RecipientRole.CC, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>You need to setup a passkey to view this document.</Trans>
+              ))
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'FIELD' }, () => (
+                <Trans>You need to setup a passkey to assist with this field.</Trans>
+              ))
+              .with({ role: RecipientRole.ASSISTANT, actionTarget: 'DOCUMENT' }, () => (
+                <Trans>You need to setup a passkey to assist with this document.</Trans>
+              ))
+              .exhaustive()}
           </AlertDescription>
         </Alert>
 
@@ -213,7 +293,9 @@ export const DocumentSigningAuthPasskey = ({
               name="passkeyId"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel required>Passkey</FormLabel>
+                  <FormLabel required>
+                    <Trans>Passkey</Trans>
+                  </FormLabel>
 
                   <FormControl>
                     <Select {...field} onValueChange={field.onChange}>
@@ -241,20 +323,24 @@ export const DocumentSigningAuthPasskey = ({
 
             {formErrorCode && (
               <Alert variant="destructive">
-                <AlertTitle>Unauthorized</AlertTitle>
+                <AlertTitle>
+                  <Trans>Unauthorized</Trans>
+                </AlertTitle>
                 <AlertDescription>
-                  We were unable to verify your details. Please try again or contact support
+                  <Trans>
+                    We were unable to verify your details. Please try again or contact support
+                  </Trans>
                 </AlertDescription>
               </Alert>
             )}
 
             <DialogFooter>
               <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                Cancel
+                <Trans>Cancel</Trans>
               </Button>
 
               <Button type="submit" loading={isCurrentlyAuthenticating}>
-                Sign
+                <Trans>Sign</Trans>
               </Button>
             </DialogFooter>
           </div>

apps/remix/app/components/general/document-signing/document-signing-auth-password.tsx

@@ -23,8 +23,6 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 
 export type DocumentSigningAuthPasswordProps = {
-  actionTarget?: 'FIELD' | 'DOCUMENT';
-  actionVerb?: string;
   open: boolean;
   onOpenChange: (value: boolean) => void;
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
@@ -40,8 +38,6 @@ const ZPasswordAuthFormSchema = z.object({
 type TPasswordAuthFormSchema = z.infer<typeof ZPasswordAuthFormSchema>;
 
 export const DocumentSigningAuthPassword = ({
-  actionTarget = 'FIELD',
-  actionVerb = 'sign',
   onReauthFormSubmit,
   open,
   onOpenChange,

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -162,10 +162,12 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Automatically sign fields</DialogTitle>
+          <DialogTitle>
+            <Trans>Automatically sign fields</Trans>
+          </DialogTitle>
         </DialogHeader>
 
-        <div className="text-muted-foreground max-w-[50ch]">
+        <div className="max-w-[50ch] text-muted-foreground">
           <p>
             <Trans>
               When you sign a document, we can automatically fill in and sign the following fields

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -122,7 +122,9 @@ export const DocumentSigningMobileWidget = () => {
 
               {!hidePoweredBy && (
                 <div className="mt-2 inline-block rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:hidden">
-                  <span>Powered by</span>
+                  <span>
+                    <Trans>Powered by</Trans>
+                  </span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </div>
               )}

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -259,7 +259,9 @@ export const DocumentSigningPageViewV2 = () => {
                   target="_blank"
                   className="fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:block"
                 >
-                  <span>Powered by</span>
+                  <span>
+                    <Trans>Powered by</Trans>
+                  </span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />
                 </a>
               )}

apps/remix/app/components/general/document/document-page-view-recipients.tsx

@@ -9,19 +9,21 @@ import {
   AlertTriangle,
   CheckIcon,
   Clock,
+  Clock8Icon,
   MailIcon,
   MailOpenIcon,
   PenIcon,
   PlusIcon,
   UserIcon,
 } from 'lucide-react';
+import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { formatSigningLink } from '@documenso/lib/utils/recipients';
+import { formatSigningLink, isRecipientExpired } from '@documenso/lib/utils/recipients';
 import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
@@ -44,7 +46,7 @@ export const DocumentPageViewRecipients = ({
   envelope,
   documentRootPath,
 }: DocumentPageViewRecipientsProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
   const { toast } = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -66,9 +68,9 @@ export const DocumentPageViewRecipients = ({
   }, [searchParams, setSearchParams]);
 
   return (
-    <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
+    <section className="flex flex-col rounded-xl border border-border bg-widget dark:bg-background">
       <div className="flex flex-row items-center justify-between px-4 py-3">
-        <h1 className="text-foreground font-medium">
+        <h1 className="font-medium text-foreground">
           <Trans>Recipients</Trans>
         </h1>
 
@@ -87,7 +89,7 @@ export const DocumentPageViewRecipients = ({
         )}
       </div>
 
-      <ul className="text-muted-foreground divide-y border-t">
+      <ul className="divide-y border-t text-muted-foreground">
         {recipients.length === 0 && (
           <li className="flex flex-col items-center justify-center py-6 text-sm">
             <Trans>No recipients</Trans>
@@ -98,9 +100,9 @@ export const DocumentPageViewRecipients = ({
           <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
             <AvatarWithText
               avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
-              primaryText={<p className="text-muted-foreground text-sm">{recipient.email}</p>}
+              primaryText={<p className="text-sm text-muted-foreground">{recipient.email}</p>}
               secondaryText={
-                <p className="text-muted-foreground/70 text-xs">
+                <p className="text-xs text-muted-foreground/70">
                   {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
                 </p>
               }
@@ -154,12 +156,41 @@ export const DocumentPageViewRecipients = ({
                 )}
 
               {envelope.status !== DocumentStatus.DRAFT &&
-                recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
+                isRecipientExpired(recipient) && (
+                  <Badge variant="destructive">
+                    <Clock8Icon className="mr-1 h-3 w-3" />
+                    <Trans>Expired</Trans>
+                  </Badge>
+                )}
+
+              {envelope.status !== DocumentStatus.DRAFT &&
+                recipient.signingStatus === SigningStatus.NOT_SIGNED &&
+                !isRecipientExpired(recipient) &&
+                (recipient.expiresAt ? (
+                  <PopoverHover
+                    trigger={
+                      <Badge variant="secondary">
+                        <Clock className="mr-1 h-3 w-3" />
+                        <Trans>Pending</Trans>
+                      </Badge>
+                    }
+                  >
+                    <p className="text-xs text-muted-foreground">
+                      <Trans>
+                        Expires{' '}
+                        {recipient.expiresAt
+                          ? i18n.date(recipient.expiresAt, DateTime.DATETIME_MED)
+                          : 'N/A'}
+                      </Trans>
+                    </p>
+                  </PopoverHover>
+                ) : (
                   <Badge variant="secondary">
                     <Clock className="mr-1 h-3 w-3" />
                     <Trans>Pending</Trans>
                   </Badge>
-                )}
+                ))}
 
               {envelope.status !== DocumentStatus.DRAFT &&
                 recipient.signingStatus === SigningStatus.REJECTED && (
@@ -175,7 +206,7 @@ export const DocumentPageViewRecipients = ({
                       <Trans>Reason for rejection: </Trans>
                     </p>
 
-                    <p className="text-muted-foreground mt-1 text-sm">
+                    <p className="mt-1 text-sm text-muted-foreground">
                       {recipient.rejectionReason}
                     </p>
                   </PopoverHover>
@@ -183,7 +214,8 @@ export const DocumentPageViewRecipients = ({
 
               {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
-                recipient.role !== RecipientRole.CC && (
+                recipient.role !== RecipientRole.CC &&
+                !isRecipientExpired(recipient) && (
                   <TooltipProvider>
                     <Tooltip open={shouldHighlightCopyButtons && i === 0}>
                       <TooltipTrigger asChild>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -434,15 +434,31 @@ export default function EnvelopeEditorFieldsPageRenderer({
       renderFieldOnLayer(field);
     });
 
+    // Reconcile selection state with live field nodes after flush/sync updates.
+    const liveSelectedFieldGroups = selectedKonvaFieldGroups.filter((fieldGroup) => {
+      if (!fieldGroup.getStage() || !fieldGroup.getParent()) {
+        return false;
+      }
+
+      return localPageFields.some((field) => field.formId === fieldGroup.id());
+    });
+
+    if (liveSelectedFieldGroups.length !== selectedKonvaFieldGroups.length) {
+      setSelectedFields(liveSelectedFieldGroups);
+    }
+
     // Rerender the transformer
     interactiveTransformer.current?.forceUpdate();
 
     pageLayer.current.batchDraw();
-  }, [localPageFields]);
+  }, [localPageFields, selectedKonvaFieldGroups]);
 
   const setSelectedFields = (nodes: Konva.Node[]) => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const fieldGroups = nodes.filter((node) => node.hasName('field-group')) as Konva.Group[];
+    const fieldGroups = nodes.filter(
+      (node) =>
+        node.hasName('field-group') && Boolean(node.getStage()) && Boolean(node.getParent()),
+    ) as Konva.Group[];
 
     interactiveTransformer.current?.nodes(fieldGroups);
     setSelectedKonvaFieldGroups(fieldGroups);
@@ -665,6 +681,10 @@ const FieldActionButtons = ({
       selectedFieldFormId.includes(field.formId),
     );
 
+    if (fields.length === 0) {
+      return null;
+    }
+
     const recipient = envelope.recipients.find(
       (recipient) => recipient.id === fields[0].recipientId,
     );
@@ -680,7 +700,7 @@ const FieldActionButtons = ({
     }
 
     return null;
-  }, [editorFields.localFields]);
+  }, [editorFields.localFields, envelope.recipients, selectedFieldFormId]);
 
   return (
     <div className="flex flex-col items-center" {...props}>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -297,19 +297,31 @@ export const EnvelopeEditorFieldsPage = () => {
 
                       <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Pos X:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos X:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Pos Y:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Width:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
-                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">
+                            <Trans>Height:</Trans>
+                          </span>
+                          &nbsp;
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -22,6 +22,7 @@ import {
   DOCUMENT_DISTRIBUTION_METHODS,
   DOCUMENT_SIGNATURE_TYPES,
 } from '@documenso/lib/constants/document';
+import { ZEnvelopeExpirationPeriod } from '@documenso/lib/constants/envelope-expiration';
 import {
   SUPPORTED_LANGUAGES,
   SUPPORTED_LANGUAGE_CODES,
@@ -62,6 +63,7 @@ import {
   DocumentVisibilitySelect,
   DocumentVisibilityTooltip,
 } from '@documenso/ui/components/document/document-visibility-select';
+import { ExpirationPeriodPicker } from '@documenso/ui/components/document/expiration-period-picker';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { CardDescription, CardHeader, CardTitle } from '@documenso/ui/primitives/card';
@@ -135,6 +137,7 @@ export const ZAddSettingsFormSchema = z.object({
     signatureTypes: z.array(z.nativeEnum(DocumentSignatureType)).min(1, {
       message: msg`At least one signature type must be enabled`.id,
     }),
+    envelopeExpirationPeriod: ZEnvelopeExpirationPeriod.nullish(),
   }),
 });
 
@@ -207,6 +210,7 @@ export const EnvelopeEditorSettingsDialog = ({
         emailReplyTo: envelope.documentMeta.emailReplyTo ?? undefined,
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
+        envelopeExpirationPeriod: envelope.documentMeta?.envelopeExpirationPeriod ?? null,
       },
     };
   };
@@ -245,6 +249,7 @@ export const EnvelopeEditorSettingsDialog = ({
       message,
       subject,
       emailReplyTo,
+      envelopeExpirationPeriod,
     } = data.meta;
 
     const parsedGlobalAccessAuth = z
@@ -273,6 +278,7 @@ export const EnvelopeEditorSettingsDialog = ({
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
           uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          envelopeExpirationPeriod,
         },
       });
 
@@ -373,7 +379,7 @@ export const EnvelopeEditorSettingsDialog = ({
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
               <fieldset
-                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 pt-6"
+                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 py-6"
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >
@@ -636,6 +642,40 @@ export const EnvelopeEditorSettingsDialog = ({
                           </FormItem>
                         )}
                       />
+
+                      <FormField
+                        control={form.control}
+                        name="meta.envelopeExpirationPeriod"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel className="flex flex-row items-center">
+                              <Trans>Expiration</Trans>
+                              <Tooltip>
+                                <TooltipTrigger>
+                                  <InfoIcon className="mx-2 h-4 w-4" />
+                                </TooltipTrigger>
+
+                                <TooltipContent className="max-w-xs text-muted-foreground">
+                                  <Trans>
+                                    How long recipients have to complete this document after it is
+                                    sent. Uses the team default when set to inherit.
+                                  </Trans>
+                                </TooltipContent>
+                              </Tooltip>
+                            </FormLabel>
+
+                            <FormControl>
+                              <ExpirationPeriodPicker
+                                value={field.value}
+                                onChange={field.onChange}
+                                disabled={envelopeHasBeenSent}
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
                     </>
                   ))
                   .with('email', () => (

apps/remix/app/components/general/user-profile-skeleton.tsx

@@ -21,17 +21,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
   return (
     <div
       className={cn(
-        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        'flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background',
         className,
       )}
     >
-      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm lowercase">
+      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-sm lowercase text-muted-foreground">
         {baseUrl.host}/u/{user.url}
       </div>
 
       <div className="mt-4">
-        <div className="bg-primary/10 rounded-full p-1.5">
-          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+        <div className="rounded-full bg-primary/10 p-1.5">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 bg-background">
             <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
           </div>
         </div>
@@ -41,17 +41,17 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
         <div className="flex items-center justify-center gap-x-2">
           <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
 
-          <VerifiedIcon className="text-primary h-8 w-8" />
+          <VerifiedIcon className="h-8 w-8 text-primary" />
         </div>
 
-        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
-        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+        <div className="mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300 dark:bg-foreground/30" />
+        <div className="mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200 dark:bg-foreground/20" />
       </div>
 
       <div className="mt-8 w-full">
-        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
-          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
-            Documents
+        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
+          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
+            <Trans>Documents</Trans>
           </div>
 
           {Array(rows)
@@ -59,14 +59,14 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk
             .map((_, index) => (
               <div
                 key={index}
-                className="bg-background flex items-center justify-between gap-x-6 p-4"
+                className="flex items-center justify-between gap-x-6 bg-background p-4"
               >
                 <div className="flex items-center gap-x-2">
-                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />
 
                   <div className="space-y-2">
-                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
-                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
+                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                   </div>
                 </div>
 

apps/remix/app/components/general/webhook-multiselect-combobox.tsx

@@ -1,5 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { WebhookTriggerEvents } from '@prisma/client';
 
 import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
@@ -41,7 +42,11 @@ export const WebhookMultiSelectCombobox = ({
       placeholder={_(msg`Select triggers`)}
       hideClearAllButton
       hidePlaceholderWhenSelected
-      emptyIndicator={<p className="text-center text-sm">No triggers available</p>}
+      emptyIndicator={
+        <p className="text-center text-sm">
+          <Trans>No triggers available</Trans>
+        </p>
+      }
     />
   );
 };

apps/remix/app/components/tables/admin-document-logs-table.tsx

@@ -96,7 +96,9 @@ export const AdminDocumentLogsTable = ({ envelopeId }: AdminDocumentLogsTablePro
               )}
             </div>
           ) : (
-            <p>N/A</p>
+            <p>
+              <Trans>N/A</Trans>
+            </p>
           ),
       },
       {

apps/remix/app/components/tables/admin-user-teams-table.tsx

@@ -0,0 +1,146 @@
+import { useMemo } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { useLingui as useLinguiMacro } from '@lingui/react/macro';
+import { Link, useSearchParams } from 'react-router';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams-translations';
+import { ZUrlSearchParamsSchema } from '@documenso/lib/types/search-params';
+import type { TeamMemberRole } from '@documenso/prisma/generated/types';
+import { trpc } from '@documenso/trpc/react';
+import { Badge } from '@documenso/ui/primitives/badge';
+import type { DataTableColumnDef } from '@documenso/ui/primitives/data-table';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@documenso/ui/primitives/hover-card';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+type AdminUserTeamsTableProps = {
+  userId: number;
+};
+
+export const AdminUserTeamsTable = ({ userId }: AdminUserTeamsTableProps) => {
+  const { i18n } = useLingui();
+  const { t } = useLinguiMacro();
+
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZUrlSearchParamsSchema.parse(Object.fromEntries(searchParams ?? []));
+
+  const { data, isLoading, isLoadingError } = trpc.admin.user.findTeams.useQuery({
+    userId,
+    query: parsedSearchParams.query,
+    page: parsedSearchParams.page,
+    perPage: parsedSearchParams.perPage,
+  });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: t`Team`,
+        accessorKey: 'name',
+        cell: ({ row }) => (
+          <HoverCard>
+            <HoverCardTrigger className="cursor-default underline decoration-dotted underline-offset-4">
+              {row.original.name}
+            </HoverCardTrigger>
+            <HoverCardContent
+              className="w-auto font-mono text-xs text-muted-foreground"
+              align="start"
+            >
+              <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1">
+                <dt>id</dt>
+                <dd>{row.original.id}</dd>
+                <dt>url</dt>
+                <dd>{row.original.url}</dd>
+              </dl>
+            </HoverCardContent>
+          </HoverCard>
+        ),
+      },
+      {
+        header: t`Organisation`,
+        accessorKey: 'organisation',
+        cell: ({ row }) => (
+          <Link
+            to={`/admin/organisations/${row.original.organisation.id}`}
+            className="hover:underline"
+          >
+            {row.original.organisation.name}
+          </Link>
+        ),
+      },
+      {
+        header: t`Role`,
+        accessorKey: 'teamRole',
+        cell: ({ row }) => (
+          <Badge variant="neutral">
+            {i18n._(TEAM_MEMBER_ROLE_MAP[row.original.teamRole as TeamMemberRole])}
+          </Badge>
+        ),
+      },
+      {
+        header: t`Created At`,
+        accessorKey: 'createdAt',
+        cell: ({ row }) => i18n.date(row.original.createdAt),
+      },
+    ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
+  }, []);
+
+  return (
+    <DataTable
+      columns={columns}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="py-4 pr-4">
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-16 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) =>
+        table.getPageCount() > 1 ? (
+          <DataTablePagination additionalInformation="VisibleCount" table={table} />
+        ) : null
+      }
+    </DataTable>
+  );
+};

apps/remix/app/components/tables/document-logs-table.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
 import { DateTime } from 'luxon';
 import type { DateTimeFormatOptions } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -88,7 +89,9 @@ export const DocumentLogsTable = ({ documentId, userId }: DocumentLogsTableProps
               )}
             </div>
           ) : (
-            <p>N/A</p>
+            <p>
+              <Trans>N/A</Trans>
+            </p>
           ),
       },
       {

apps/remix/app/components/tables/envelopes-table-bulk-action-bar.tsx

@@ -24,7 +24,7 @@ export const EnvelopesTableBulkActionBar = ({
   }
 
   return (
-    <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-x-4 rounded-lg border border-border bg-widget px-4 py-3 shadow-lg">
+    <div className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-x-4 rounded-lg border border-border bg-background px-4 py-3 shadow-lg">
       <span className="text-sm font-medium">
         <Trans>{selectedCount} selected</Trans>
       </span>
@@ -36,13 +36,7 @@ export const EnvelopesTableBulkActionBar = ({
         <Trans>Move to Folder</Trans>
       </Button>
 
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={onDeleteClick}
-        className="text-destructive hover:text-destructive"
-      >
+      <Button type="button" variant="destructive" size="sm" onClick={onDeleteClick}>
         <Trash2Icon className="mr-2 h-4 w-4" />
         <Trans>Delete</Trans>
       </Button>

apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx

@@ -107,7 +107,11 @@ export default function OrganisationGroupSettingsPage({
         cell: ({ row }) => (
           <div className="flex items-center gap-2">
             <Link to={`/admin/users/${row.original.user.id}`}>{row.original.user.name}</Link>
-            {row.original.user.id === organisation?.ownerUserId && <Badge>Owner</Badge>}
+            {row.original.user.id === organisation?.ownerUserId && (
+              <Badge>
+                <Trans>Owner</Trans>
+              </Badge>
+            )}
           </div>
         ),
       },
@@ -208,7 +212,9 @@ export default function OrganisationGroupSettingsPage({
                 {SUBSCRIPTION_STATUS_MAP[organisation.subscription.status]} subscription found
               </span>
             ) : (
-              <span>No subscription found</span>
+              <span>
+                <Trans>No subscription found</Trans>
+              </span>
             )}
           </AlertDescription>
         </div>

apps/remix/app/routes/_authenticated+/admin+/users.$id.tsx

@@ -10,6 +10,12 @@ import type { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import type { TGetUserResponse } from '@documenso/trpc/server/admin-router/get-user.types';
 import { ZUpdateUserRequestSchema } from '@documenso/trpc/server/admin-router/update-user.types';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -30,6 +36,7 @@ import { AdminUserEnableDialog } from '~/components/dialogs/admin-user-enable-di
 import { AdminUserResetTwoFactorDialog } from '~/components/dialogs/admin-user-reset-two-factor-dialog';
 import { GenericErrorLayout } from '~/components/general/generic-error-layout';
 import { AdminOrganisationsTable } from '~/components/tables/admin-organisations-table';
+import { AdminUserTeamsTable } from '~/components/tables/admin-user-teams-table';
 
 import { MultiSelectRoleCombobox } from '../../../components/general/multiselect-role-combobox';
 
@@ -197,7 +204,7 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
             <h3 className="text-lg font-semibold leading-none tracking-tight">
               <Trans>User Organisations</Trans>
             </h3>
-            <p className="text-muted-foreground mt-1.5 text-sm">
+            <p className="mt-1.5 text-sm text-muted-foreground">
               <Trans>Organisations that the user is a member of.</Trans>
             </p>
           </div>
@@ -219,6 +226,28 @@ const AdminUserPage = ({ user }: { user: TGetUserResponse }) => {
         />
       </div>
 
+      <hr className="my-8" />
+
+      <Accordion type="single" collapsible>
+        <AccordionItem value="team-memberships" className="border-b-0">
+          <AccordionTrigger className="py-0">
+            <div className="text-left">
+              <h3 className="text-lg font-semibold leading-none tracking-tight">
+                <Trans>Team Memberships</Trans>
+              </h3>
+              <p className="mt-1.5 text-sm font-normal text-muted-foreground">
+                <Trans>Teams that this user is a member of and their roles.</Trans>
+              </p>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="mt-4">
+              <AdminUserTeamsTable userId={user.id} />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
       <div className="mt-16 flex flex-col gap-4">
         {user && user.twoFactorEnabled && <AdminUserResetTwoFactorDialog user={user} />}
         {user && user.disabled && <AdminUserEnableDialog userToEnable={user} />}

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.document.tsx

@@ -60,6 +60,7 @@ export default function OrganisationSettingsDocumentPage() {
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
+        envelopeExpirationPeriod,
       } = data;
 
       if (
@@ -90,6 +91,7 @@ export default function OrganisationSettingsDocumentPage() {
           drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
           delegateDocumentOwnership: delegateDocumentOwnership,
           aiFeaturesEnabled,
+          envelopeExpirationPeriod: envelopeExpirationPeriod ?? undefined,
         },
       });
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents._index.tsx

@@ -7,6 +7,7 @@ import { useParams, useSearchParams } from 'react-router';
 import { Link } from 'react-router';
 import { z } from 'zod';
 
+import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { parseToIntegerArray } from '@documenso/lib/utils/params';
@@ -58,7 +59,10 @@ export default function DocumentsPage() {
   const [isMovingDocument, setIsMovingDocument] = useState(false);
   const [documentToMove, setDocumentToMove] = useState<number | null>(null);
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = useSessionStorage<RowSelectionState>(
+    'documents-bulk-selection',
+    {},
+  );
   const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
   const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
 
@@ -121,11 +125,6 @@ export default function DocumentsPage() {
     }
   }, [data?.stats]);
 
-  // Clear selection when navigation or filters change
-  useEffect(() => {
-    setRowSelection({});
-  }, [folderId, findDocumentSearchParams]);
-
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.DOCUMENT}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.folders._index.tsx

@@ -66,7 +66,9 @@ export default function DocumentsFoldersPage() {
             onClick={() => navigateToFolder(null)}
           >
             <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
+            <span>
+              <Trans>Home</Trans>
+            </span>
           </Button>
         </div>
 
@@ -76,7 +78,7 @@ export default function DocumentsFoldersPage() {
       </div>
 
       <div className="relative w-full max-w-md py-6">
-        <SearchIcon className="text-muted-foreground absolute left-2 top-9 h-4 w-4" />
+        <SearchIcon className="absolute left-2 top-9 h-4 w-4 text-muted-foreground" />
         <Input
           placeholder={t`Search folders...`}
           value={searchTerm}
@@ -91,7 +93,7 @@ export default function DocumentsFoldersPage() {
 
       {isFoldersLoading ? (
         <div className="mt-6 flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       ) : (
         <>
@@ -126,7 +128,7 @@ export default function DocumentsFoldersPage() {
 
           <div>
             {searchTerm && foldersData?.folders.filter(isFolderMatchingSearch).length === 0 && (
-              <div className="text-muted-foreground mt-6 text-center">
+              <div className="mt-6 text-center text-muted-foreground">
                 <Trans>No folders found matching "{searchTerm}"</Trans>
               </div>
             )}

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.document.tsx

@@ -53,6 +53,7 @@ export default function TeamsSettingsPage() {
         defaultRecipients,
         delegateDocumentOwnership,
         aiFeaturesEnabled,
+        envelopeExpirationPeriod,
       } = data;
 
       await updateTeamSettings({
@@ -67,6 +68,7 @@ export default function TeamsSettingsPage() {
           includeAuditLog,
           defaultRecipients,
           aiFeaturesEnabled,
+          envelopeExpirationPeriod,
           ...(signatureTypes.length === 0
             ? {
                 typedSignatureEnabled: null,

apps/remix/app/routes/_authenticated+/t.$teamUrl+/settings.public-profile.tsx

@@ -143,7 +143,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
           <TooltipTrigger asChild>
             <div
               className={cn(
-                'text-muted-foreground/50 flex flex-row items-center justify-center space-x-2 text-xs',
+                'flex flex-row items-center justify-center space-x-2 text-xs text-muted-foreground/50',
                 {
                   '[&>*:first-child]:text-muted-foreground': !isPublicProfileVisible,
                   '[&>*:last-child]:text-muted-foreground': isPublicProfileVisible,
@@ -164,7 +164,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
             </div>
           </TooltipTrigger>
 
-          <TooltipContent className="text-muted-foreground max-w-[40ch] space-y-2 py-2">
+          <TooltipContent className="max-w-[40ch] space-y-2 py-2 text-muted-foreground">
             {isPublicProfileVisible ? (
               <>
                 <p>
@@ -207,7 +207,9 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
             directTemplates={enabledPrivateDirectTemplates}
             trigger={
               <Button variant="outline">
-                <Trans>Link template</Trans>
+                <Trans context="Action button to link template to public profile">
+                  Link template
+                </Trans>
               </Button>
             }
           />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates._index.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
 import { Bird } from 'lucide-react';
 import { useParams, useSearchParams } from 'react-router';
 
+import { useSessionStorage } from '@documenso/lib/client-only/hooks/use-session-storage';
 import { FolderType } from '@documenso/lib/types/folder-type';
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
@@ -34,7 +35,10 @@ export default function TemplatesPage() {
   const page = Number(searchParams.get('page')) || 1;
   const perPage = Number(searchParams.get('perPage')) || 10;
 
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [rowSelection, setRowSelection] = useSessionStorage<RowSelectionState>(
+    'templates-bulk-selection',
+    {},
+  );
   const [isBulkMoveDialogOpen, setIsBulkMoveDialogOpen] = useState(false);
   const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
 
@@ -51,11 +55,6 @@ export default function TemplatesPage() {
     folderId,
   });
 
-  // Clear selection when navigation or filters change
-  useEffect(() => {
-    setRowSelection({});
-  }, [folderId, page, perPage]);
-
   return (
     <EnvelopeDropZoneWrapper type={EnvelopeType.TEMPLATE}>
       <div className="mx-auto max-w-screen-xl px-4 md:px-8">

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.folders._index.tsx

@@ -66,7 +66,9 @@ export default function TemplatesFoldersPage() {
             onClick={() => navigateToFolder(null)}
           >
             <HomeIcon className="h-4 w-4" />
-            <span>Home</span>
+            <span>
+              <Trans>Home</Trans>
+            </span>
           </Button>
         </div>
 
@@ -76,7 +78,7 @@ export default function TemplatesFoldersPage() {
       </div>
 
       <div className="relative w-full max-w-md py-6">
-        <SearchIcon className="text-muted-foreground absolute left-2 top-9 h-4 w-4" />
+        <SearchIcon className="absolute left-2 top-9 h-4 w-4 text-muted-foreground" />
         <Input
           placeholder={t`Search folders...`}
           value={searchTerm}
@@ -91,7 +93,7 @@ export default function TemplatesFoldersPage() {
 
       {isFoldersLoading ? (
         <div className="mt- flex justify-center">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>
       ) : (
         <>
@@ -126,7 +128,7 @@ export default function TemplatesFoldersPage() {
 
           <div>
             {searchTerm && foldersData?.folders.filter(isFolderMatchingSearch).length === 0 && (
-              <div className="text-muted-foreground mt-6 text-center">
+              <div className="mt-6 text-center text-muted-foreground">
                 <Trans>No folders found matching "{searchTerm}"</Trans>
               </div>
             )}

apps/remix/app/routes/_profile+/p.$url.tsx

@@ -64,7 +64,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
   return (
     <div className="flex flex-col items-center justify-center py-4 sm:py-32">
       <div className="flex flex-col items-center">
-        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
+        <Avatar className="h-24 w-24 border-2 border-solid dark:border-border">
           {publicProfile.avatarImageId && (
             <AvatarImage src={formatAvatarUrl(publicProfile.avatarImageId)} />
           )}
@@ -99,10 +99,10 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
                 />
 
                 <div className="ml-2">
-                  <p className="text-foreground text-base font-semibold">
+                  <p className="text-base font-semibold text-foreground">
                     {BADGE_DATA[publicProfile.badge.type].name}
                   </p>
-                  <p className="text-muted-foreground mt-0.5 text-sm">
+                  <p className="mt-0.5 text-sm text-muted-foreground">
                     <Trans>
                       Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
                     </Trans>
@@ -113,7 +113,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
           )}
         </div>
 
-        <div className="text-muted-foreground mt-4 space-y-1">
+        <div className="mt-4 space-y-1 text-muted-foreground">
           {(profile.bio ?? '').split('\n').map((line, index) => (
             <p
               key={index}
@@ -127,7 +127,7 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
 
       {templates.length === 0 && (
         <div className="mt-4 w-full max-w-xl border-t pt-4">
-          <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
+          <p className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed text-muted-foreground">
             <Trans>
               It looks like {publicProfile.name} hasn't added any documents to their profile yet.
             </Trans>{' '}
@@ -167,24 +167,24 @@ export default function PublicProfilePage({ loaderData }: Route.ComponentProps)
             <TableBody>
               {templates.map((template) => (
                 <TableRow key={template.id}>
-                  <TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
+                  <TableCell className="flex flex-col justify-between overflow-hidden text-sm text-muted-foreground sm:flex-row">
                     <div className="flex flex-1 items-start justify-start gap-2">
                       <FileIcon
-                        className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                        className="h-8 w-8 flex-shrink-0 text-muted-foreground/40"
                         strokeWidth={1.5}
                       />
 
                       <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
                         <div>
-                          <p className="text-foreground text-sm font-semibold leading-none">
+                          <p className="text-sm font-semibold leading-none text-foreground">
                             {template.publicTitle}
                           </p>
-                          <p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
+                          <p className="mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs text-muted-foreground">
                             {template.publicDescription}
                           </p>
                         </div>
 
-                        <Button asChild className="w-20">
+                        <Button asChild className="w-fit">
                           <Link to={formatDirectTemplatePath(template.directLink.token)}>
                             <Trans>Sign</Trans>
                           </Link>

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -25,6 +25,7 @@ import { getTeamSettings } from '@documenso/lib/server-only/team/get-team-settin
 import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { isRecipientExpired } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
@@ -140,6 +141,10 @@ const handleV1Loader = async ({ params, request }: Route.LoaderArgs) => {
     throw redirect(`/sign/${token}/rejected`);
   }
 
+  if (isRecipientExpired(recipient)) {
+    throw redirect(`/sign/${token}/expired`);
+  }
+
   if (
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
@@ -201,7 +206,8 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     return envelopeForSigning;
   }
 
-  const { envelope, recipient, isCompleted, isRejected, isRecipientsTurn } = envelopeForSigning;
+  const { envelope, recipient, isCompleted, isRejected, isExpired, isRecipientsTurn } =
+    envelopeForSigning;
 
   if (!isRecipientsTurn) {
     throw redirect(`/sign/${token}/waiting`);
@@ -233,12 +239,6 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     } as const;
   }
 
-  await viewedDocument({
-    token,
-    requestMetadata,
-    recipientAccessAuth: derivedRecipientAccessAuth,
-  }).catch(() => null);
-
   if (isRejected) {
     throw redirect(`/sign/${token}/rejected`);
   }
@@ -247,6 +247,16 @@ const handleV2Loader = async ({ params, request }: Route.LoaderArgs) => {
     throw redirect(envelope.documentMeta.redirectUrl || `/sign/${token}/complete`);
   }
 
+  if (isExpired) {
+    throw redirect(`/sign/${token}/expired`);
+  }
+
+  await viewedDocument({
+    token,
+    requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  }).catch(() => null);
+
   return {
     isDocumentAccessValid: true,
     envelopeForSigning,

apps/remix/app/routes/_recipient+/sign.$token+/expired.tsx

@@ -0,0 +1,114 @@
+import { Trans } from '@lingui/react/macro';
+import { TimerOffIcon } from 'lucide-react';
+import { Link } from 'react-router';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { isRecipientAuthorized } from '@documenso/lib/server-only/document/is-recipient-authorized';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
+import { truncateTitle } from '~/utils/truncate-title';
+
+import type { Route } from './+types/expired';
+
+export async function loader({ params, request }: Route.LoaderArgs) {
+  const { user } = await getOptionalSession(request);
+
+  const { token } = params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+    requireAccessAuth: false,
+  }).catch(() => null);
+
+  if (!document) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const title = document.title;
+
+  const recipient = await getRecipientByToken({ token }).catch(() => null);
+
+  if (!recipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  const isDocumentAccessValid = await isRecipientAuthorized({
+    type: 'ACCESS',
+    documentAuthOptions: document.authOptions,
+    recipient,
+    userId: user?.id,
+  });
+
+  const recipientEmail = recipient.email;
+
+  if (isDocumentAccessValid) {
+    return {
+      isDocumentAccessValid: true,
+      recipientEmail,
+      title,
+    };
+  }
+
+  return {
+    isDocumentAccessValid: false,
+    recipientEmail,
+  };
+}
+
+export default function ExpiredSigningPage({ loaderData }: Route.ComponentProps) {
+  const { sessionData } = useOptionalSession();
+  const user = sessionData?.user;
+
+  const { isDocumentAccessValid, recipientEmail, title } = loaderData;
+
+  if (!isDocumentAccessValid) {
+    return <DocumentSigningAuthPageView email={recipientEmail} />;
+  }
+
+  return (
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+      <Badge
+        variant="neutral"
+        size="default"
+        title={title}
+        className="mb-6 rounded-xl border bg-transparent"
+      >
+        {truncateTitle(title ?? '')}
+      </Badge>
+
+      <div className="flex flex-col items-center">
+        <div className="flex items-center gap-x-4">
+          <TimerOffIcon className="h-10 w-10 text-orange-500" />
+
+          <h2 className="max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+            <Trans>Signing Deadline Expired</Trans>
+          </h2>
+        </div>
+
+        <p className="mt-6 max-w-[60ch] text-center text-sm text-muted-foreground">
+          <Trans>
+            The signing deadline for this document has passed. Please contact the document owner if
+            you need a new copy to sign.
+          </Trans>
+        </p>
+
+        {user && (
+          <Button className="mt-6" asChild>
+            <Link to={`/`}>
+              <Trans>Return Home</Trans>
+            </Link>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/remix/app/routes/embed+/_v0+/_layout.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react/macro';
 import { Outlet, isRouteErrorResponse, useRouteError } from 'react-router';
 
 import {
@@ -12,6 +13,7 @@ import { EmbedDocumentCompleted } from '~/components/embed/embed-document-comple
 import { EmbedDocumentRejected } from '~/components/embed/embed-document-rejected';
 import { EmbedDocumentWaitingForTurn } from '~/components/embed/embed-document-waiting-for-turn';
 import { EmbedPaywall } from '~/components/embed/embed-paywall';
+import { EmbedRecipientExpired } from '~/components/embed/embed-recipient-expired';
 
 import type { Route } from './+types/_layout';
 
@@ -78,6 +80,10 @@ export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
       return <EmbedDocumentWaitingForTurn />;
     }
 
+    if (error.status === 403 && error.data.type === 'embed-recipient-expired') {
+      return <EmbedRecipientExpired />;
+    }
+
     // !: Not used at the moment, may be removed in the future.
     if (error.status === 403 && error.data.type === 'embed-document-rejected') {
       return <EmbedDocumentRejected />;
@@ -89,5 +95,9 @@ export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
     }
   }
 
-  return <div>Not Found</div>;
+  return (
+    <div>
+      <Trans>Not Found</Trans>
+    </div>
+  );
 }

apps/remix/app/routes/embed+/_v0+/sign.$token.tsx

@@ -19,6 +19,7 @@ import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/
 import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { isRecipientExpired } from '@documenso/lib/utils/recipients';
 import { prisma } from '@documenso/prisma';
 
 import { EmbedSignDocumentV1ClientPage } from '~/components/embed/embed-document-signing-page-v1';
@@ -78,6 +79,17 @@ async function handleV1Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
+  if (isRecipientExpired(recipient)) {
+    throw data(
+      {
+        type: 'embed-recipient-expired',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
   const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
     documentAuth: document.authOptions,
   });
@@ -190,7 +202,7 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
-  const { envelope, recipient, isRecipientsTurn } = envelopeForSigning;
+  const { envelope, recipient, isRecipientsTurn, isExpired } = envelopeForSigning;
 
   const organisationClaim = await getOrganisationClaimByTeamId({ teamId: envelope.teamId });
 
@@ -208,6 +220,17 @@ async function handleV2Loader({ params, request }: Route.LoaderArgs) {
     );
   }
 
+  if (isExpired) {
+    throw data(
+      {
+        type: 'embed-recipient-expired',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
   if (!isRecipientsTurn) {
     throw data(
       {

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -1,5 +1,6 @@
 import { useLayoutEffect } from 'react';
 
+import { Trans } from '@lingui/react/macro';
 import { Outlet, useLoaderData } from 'react-router';
 
 import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embedding-presign/verify-embedding-presign-token';
@@ -75,7 +76,11 @@ export default function AuthoringLayout() {
   }, []);
 
   if (!hasValidToken) {
-    return <div>Invalid embedding presign token provided</div>;
+    return (
+      <div>
+        <Trans>Invalid embedding presign token provided</Trans>
+      </div>
+    );
   }
 
   return (

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
+import { Trans } from '@lingui/react/macro';
 import { SigningStatus } from '@prisma/client';
 import { useRevalidator } from 'react-router';
 
@@ -282,8 +283,10 @@ export default function MultisignPage() {
         </DocumentSigningProvider>
 
         {!hidePoweredBy && (
-          <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-            <span>Powered by</span>
+          <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
+            <span>
+              <Trans>Powered by</Trans>
+            </span>
             <BrandingLogo className="ml-2 inline-block h-[14px]" />
           </div>
         )}
@@ -297,8 +300,10 @@ export default function MultisignPage() {
       <MultiSignDocumentList envelopes={envelopes} onDocumentSelect={onSelectDocument} />
 
       {!hidePoweredBy && (
-        <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
-          <span>Powered by</span>
+        <div className="fixed bottom-0 left-0 z-40 rounded-tr bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100">
+          <span>
+            <Trans>Powered by</Trans>
+          </span>
           <BrandingLogo className="ml-2 inline-block h-[14px]" />
         </div>
       )}

apps/remix/package.json

@@ -46,7 +46,6 @@
     "content-disposition": "^1.0.1",
     "framer-motion": "^12.23.24",
     "hono": "4.11.4",
-    "hono-rate-limiter": "^0.4.2",
     "hono-react-router-adapter": "^0.6.5",
     "input-otp": "^1.4.2",
     "isbot": "^5.1.32",
@@ -106,5 +105,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "2.6.0"
+  "version": "2.6.1"
 }

apps/remix/server/router.ts

@@ -1,18 +1,25 @@
 import { Hono } from 'hono';
-import { rateLimiter } from 'hono-rate-limiter';
 import { contextStorage } from 'hono/context-storage';
 import { cors } from 'hono/cors';
-import { requestId } from 'hono/request-id';
 import type { RequestIdVariables } from 'hono/request-id';
+import { requestId } from 'hono/request-id';
 import type { Logger } from 'pino';
 
 import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
-import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { LicenseClient } from '@documenso/lib/server-only/license/license-client';
+import { createRateLimitMiddleware } from '@documenso/lib/server-only/rate-limit/rate-limit-middleware';
+import {
+  aiRateLimit,
+  apiTrpcRateLimit,
+  apiV1RateLimit,
+  apiV2RateLimit,
+  fileUploadRateLimit,
+} from '@documenso/lib/server-only/rate-limit/rate-limits';
 import { TelemetryClient } from '@documenso/lib/server-only/telemetry/telemetry-client';
-import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
+import { migrateDeletedAccountServiceAccount } from '@documenso/lib/server-only/user/service-accounts/deleted-account';
+import { migrateLegacyServiceAccount } from '@documenso/lib/server-only/user/service-accounts/legacy-service-account';
 import { env } from '@documenso/lib/utils/env';
 import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
@@ -35,38 +42,13 @@ export interface HonoEnv {
 const app = new Hono<HonoEnv>();
 
 /**
- * Rate limiting for v1 and v2 API routes only.
- * - 100 requests per minute per IP address
+ * Database-backed rate limiting for API routes.
  */
-const rateLimitMiddleware = rateLimiter({
-  windowMs: 60 * 1000, // 1 minute
-  limit: 100, // 100 requests per window
-  keyGenerator: (c) => {
-    try {
-      return getIpAddress(c.req.raw);
-    } catch (error) {
-      return 'unknown';
-    }
-  },
-  message: {
-    error: 'Too many requests, please try again later.',
-  },
-});
-
-const aiRateLimitMiddleware = rateLimiter({
-  windowMs: 60 * 1000, // 1 minute
-  limit: 3, // 3 requests per window
-  keyGenerator: (c) => {
-    try {
-      return getIpAddress(c.req.raw);
-    } catch (error) {
-      return 'unknown';
-    }
-  },
-  message: {
-    error: 'Too many requests, please try again later.',
-  },
-});
+const apiV1RateLimitMiddleware = createRateLimitMiddleware(apiV1RateLimit);
+const apiV2RateLimitMiddleware = createRateLimitMiddleware(apiV2RateLimit);
+const aiRateLimitMiddleware = createRateLimitMiddleware(aiRateLimit);
+const trpcRateLimitMiddleware = createRateLimitMiddleware(apiTrpcRateLimit);
+const fileRateLimitMiddleware = createRateLimitMiddleware(fileUploadRateLimit);
 
 /**
  * Attach session and context to requests.
@@ -84,6 +66,7 @@ app.use(async (c, next) => {
 
   const honoLogger = logger.child({
     requestId: c.var.requestId,
+    requestPath: c.req.path,
     ipAddress: metadata.ipAddress,
     userAgent: metadata.userAgent,
   });
@@ -93,14 +76,20 @@ app.use(async (c, next) => {
   await next();
 });
 
-// Apply rate limit to /api/v1/*
-app.use('/api/v1/*', rateLimitMiddleware);
-app.use('/api/v2/*', rateLimitMiddleware);
+// Apply cors and rate limits to API routes.
+app.use(`/api/v1/*`, cors());
+app.use('/api/v1/*', apiV1RateLimitMiddleware);
+app.use(`/api/v2/*`, cors());
+app.use('/api/v2/*', apiV2RateLimitMiddleware);
+app.use(`/api/v2-beta/*`, cors());
+app.use('/api/v2-beta/*', apiV2RateLimitMiddleware);
 
 // Auth server.
 app.route('/api/auth', auth);
 
 // Files route.
+app.use('/api/files/upload-pdf', fileRateLimitMiddleware);
+app.use('/api/files/presigned-post-url', fileRateLimitMiddleware);
 app.route('/api/files', filesRoute);
 
 // AI route.
@@ -108,28 +97,26 @@ app.use('/api/ai/*', aiRateLimitMiddleware);
 app.route('/api/ai', aiRoute);
 
 // API servers.
-app.use(`/api/v1/*`, cors());
 app.route('/api/v1', tsRestHonoApp);
 app.use('/api/jobs/*', jobsClient.getApiHandler());
+app.use('/api/trpc/*', trpcRateLimitMiddleware);
 app.use('/api/trpc/*', reactRouterTrpcServer);
 
 // Unstable API server routes. Order matters for these two.
-app.get(`${API_V2_URL}/openapi.json`, (c) => c.json(openApiDocument));
-app.use(`${API_V2_URL}/*`, cors());
+app.get(`/api/v2/openapi.json`, (c) => c.json(openApiDocument));
 // Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
-app.route(`${API_V2_URL}`, downloadRoute);
-app.use(`${API_V2_URL}/*`, async (c) =>
+app.route(`/api/v2`, downloadRoute);
+app.use(`/api/v2/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: false,
   }),
 );
 
 // Unstable API server routes. Order matters for these two.
-app.get(`${API_V2_BETA_URL}/openapi.json`, (c) => c.json(openApiDocument));
-app.use(`${API_V2_BETA_URL}/*`, cors());
+app.get(`/api/v2-beta/openapi.json`, (c) => c.json(openApiDocument));
 // Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
-app.route(`${API_V2_BETA_URL}`, downloadRoute);
-app.use(`${API_V2_BETA_URL}/*`, async (c) =>
+app.route(`/api/v2-beta`, downloadRoute);
+app.use(`/api/v2-beta/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: true,
   }),
@@ -144,4 +131,11 @@ if (env('NODE_ENV') !== 'development') {
 // Start license client to verify license on startup.
 void LicenseClient.start();
 
+// Start cron scheduler for background jobs (e.g. envelope expiration sweep).
+// No-op for Inngest provider which handles cron externally.
+jobsClient.startCron();
+
+void migrateDeletedAccountServiceAccount();
+void migrateLegacyServiceAccount();
+
 export default app;