fix: wip

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
   rules: {
     '@next/next/no-img-element': 'off',
     'no-unreachable': 'error',
+    'react-hooks/exhaustive-deps': 'off',
   },
   settings: {
     next: {

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -7,6 +7,7 @@ import { Trans } from '@lingui/react/macro';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Plus } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -50,6 +51,7 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TCreateTeamEmailFormSchema>({
     resolver: zodResolver(ZCreateTeamEmailFormSchema),
@@ -76,7 +78,7 @@ export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDi
         duration: 5000,
       });
 
-      // router.refresh(); // Todo
+      await revalidate();
 
       setOpen(false);
     } catch (err) {

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

@@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Prisma } from '@prisma/client';
+import { useRevalidator } from 'react-router';
 
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -44,6 +45,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
     trpc.team.deleteTeamEmail.useMutation({
@@ -92,7 +94,7 @@ export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDele
       await deleteTeamEmailVerification({ teamId: team.id });
     }
 
-    // router.refresh(); // Todo
+    await revalidate();
   };
 
   return (

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -7,6 +7,7 @@ import { Trans } from '@lingui/react/macro';
 import type { TeamEmail } from '@prisma/client';
 import type * as DialogPrimitive from '@radix-ui/react-dialog';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -51,6 +52,7 @@ export const TeamEmailUpdateDialog = ({
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TUpdateTeamEmailFormSchema>({
     resolver: zodResolver(ZUpdateTeamEmailFormSchema),
@@ -76,7 +78,7 @@ export const TeamEmailUpdateDialog = ({
         duration: 5000,
       });
 
-      // router.refresh(); // Todo
+      await revalidate();
 
       setOpen(false);
     } catch (err) {

apps/remix/app/components/dialogs/team-member-invite-dialog.tsx

@@ -46,9 +46,9 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useCurrentTeam } from '~/providers/team';
+
 export type TeamMemberInviteDialogProps = {
-  currentUserTeamRole: TeamMemberRole;
-  teamId: number;
   trigger?: React.ReactNode;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
@@ -95,12 +95,7 @@ const ZImportTeamMemberSchema = z.array(
   }),
 );
 
-export const TeamMemberInviteDialog = ({
+export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDialogProps) => {
-  currentUserTeamRole,
-  teamId,
-  trigger,
-  ...props
-}: TeamMemberInviteDialogProps) => {
   const [open, setOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
@@ -108,6 +103,8 @@ export const TeamMemberInviteDialog = ({
   const { _ } = useLingui();
   const { toast } = useToast();
 
+  const team = useCurrentTeam();
+
   const form = useForm<TInviteTeamMembersFormSchema>({
     resolver: zodResolver(ZInviteTeamMembersFormSchema),
     defaultValues: {
@@ -141,7 +138,7 @@ export const TeamMemberInviteDialog = ({
   const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
     try {
       await createTeamMemberInvites({
-        teamId,
+        teamId: team.id,
         invitations,
       });
 
@@ -203,7 +200,7 @@ export const TeamMemberInviteDialog = ({
 
           setInvitationType('INDIVIDUAL');
         } catch (err) {
-          console.error(err.message);
+          console.error(err);
 
           toast({
             title: _(msg`Something went wrong`),
@@ -324,11 +321,13 @@ export const TeamMemberInviteDialog = ({
                                   </SelectTrigger>
 
                                   <SelectContent position="popper">
-                                    {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamMember.role].map(
-                                      <SelectItem key={role} value={role}>
+                                      (role) => (
-                                        {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                                        <SelectItem key={role} value={role}>
-                                      </SelectItem>
+                                          {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
-                                    ))}
+                                        </SelectItem>
+                                      ),
+                                    )}
                                   </SelectContent>
                                 </Select>
                               </FormControl>

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

@@ -6,6 +6,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
@@ -56,6 +57,7 @@ export const TeamTransferDialog = ({
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { mutateAsync: requestTeamOwnershipTransfer } =
     trpc.team.requestTeamOwnershipTransfer.useMutation();
@@ -98,7 +100,7 @@ export const TeamTransferDialog = ({
         clearPaymentMethods,
       });
 
-      // router.refresh(); // Todo
+      await revalidate();
 
       toast({
         title: _(msg`Success`),

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -10,7 +10,7 @@ import {
   type TemplateDirectLink,
 } from '@prisma/client';
 import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
-import { Link } from 'react-router';
+import { Link, useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -64,6 +64,7 @@ export const TemplateDirectLinkDialog = ({
   const { toast } = useToast();
   const { quota, remaining } = useLimits();
   const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
 
   const [, copy] = useCopyToClipboard();
 
@@ -84,7 +85,9 @@ export const TemplateDirectLinkDialog = ({
     isPending: isCreatingTemplateDirectLink,
     reset: resetCreateTemplateDirectLink,
   } = trpcReact.template.createTemplateDirectLink.useMutation({
-    onSuccess: (data) => {
+    onSuccess: async (data) => {
+      await revalidate();
+
       setToken(data.token);
       setIsEnabled(data.enabled);
       setCurrentStep('MANAGE');
@@ -102,7 +105,9 @@ export const TemplateDirectLinkDialog = ({
 
   const { mutateAsync: toggleTemplateDirectLink, isPending: isTogglingTemplateAccess } =
     trpcReact.template.toggleTemplateDirectLink.useMutation({
-      onSuccess: (data) => {
+      onSuccess: async (data) => {
+        await revalidate();
+
         const enabledDescription = msg`Direct link signing has been enabled`;
         const disabledDescription = msg`Direct link signing has been disabled`;
 
@@ -125,7 +130,9 @@ export const TemplateDirectLinkDialog = ({
 
   const { mutateAsync: deleteTemplateDirectLink, isPending: isDeletingTemplateDirectLink } =
     trpcReact.template.deleteTemplateDirectLink.useMutation({
-      onSuccess: () => {
+      onSuccess: async () => {
+        await revalidate();
+
         onOpenChange(false);
         setToken(null);
 

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -6,6 +6,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -41,6 +42,7 @@ export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
 export const DisableAuthenticatorAppDialog = () => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
@@ -92,8 +94,7 @@ export const DisableAuthenticatorAppDialog = () => {
         onCloseTwoFactorDisableDialog();
       });
 
-      // Todo
+      await revalidate();
-      // router.refresh();
     } catch (_err) {
       toast({
         title: _(msg`Unable to disable two-factor authentication`),

apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -5,6 +5,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
@@ -47,6 +48,7 @@ export type EnableAuthenticatorAppDialogProps = {
 export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const [isOpen, setIsOpen] = useState(false);
   const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
@@ -128,8 +130,7 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
 
     if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
       setRecoveryCodes(null);
-      // Todo
+      void revalidate();
-      // router.refresh();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

apps/remix/app/components/forms/profile.tsx

@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { useSession } from '@documenso/lib/client-only/providers/session';
@@ -42,6 +43,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
   const { user } = useSession();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TProfileFormSchema>({
     values: {
@@ -68,7 +70,7 @@ export const ProfileForm = ({ className }: ProfileFormProps) => {
         duration: 5000,
       });
 
-      // router.refresh(); // Todo
+      await revalidate();
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),

apps/remix/app/components/forms/signup.tsx

@@ -168,7 +168,6 @@ export const SignUpForm = ({
   };
 
   const onNextClick = async () => {
-    console.log('hello-world');
     const valid = await form.trigger(['name', 'email', 'password', 'signature']);
 
     if (valid) {

apps/remix/app/components/forms/team-update-form.tsx

@@ -73,7 +73,7 @@ export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogPr
       });
 
       if (url !== teamUrl) {
-        await navigate(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${url}/settings`);
+        await navigate(`/t/${url}/settings`);
       }
     } catch (err) {
       const error = AppError.parseError(err);

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

@@ -1,4 +1,4 @@
-import { useState, useTransition } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -6,6 +6,7 @@ import { Plural, Trans } from '@lingui/react/macro';
 import type { Field, Recipient } from '@prisma/client';
 import { FieldType } from '@prisma/client';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { P, match } from 'ts-pattern';
 
 import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
@@ -60,12 +61,12 @@ export type DocumentSigningAutoSignProps = {
 export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAutoSignProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { email, fullName } = useRequiredDocumentSigningContext();
   const { derivedRecipientActionAuth } = useRequiredDocumentSigningAuthContext();
 
   const [open, setOpen] = useState(false);
-  const [isPending, startTransition] = useTransition();
 
   const form = useForm();
 
@@ -153,12 +154,7 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
       });
     }
 
-    startTransition(() => {
+    await revalidate();
-      // Todo
-      // router.refresh();
-
-      setOpen(false);
-    });
   };
 
   unsafe_useEffectOnce(() => {
@@ -219,7 +215,7 @@ export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAu
               <Button
                 type="submit"
                 className="min-w-[6rem]"
-                loading={form.formState.isSubmitting || isPending}
+                loading={form.formState.isSubmitting}
                 disabled={!autoSignableFields.length}
               >
                 <Trans>Sign</Trans>

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useMemo, useState, useTransition } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -40,8 +41,8 @@ export const DocumentSigningCheckboxField = ({
 }: DocumentSigningCheckboxFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
-  const [isPending, startTransition] = useTransition();
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
   const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
@@ -84,7 +85,7 @@ export const DocumentSigningCheckboxField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
   const shouldAutoSignField =
     (!field.inserted && checkedValues.length > 0 && isLengthConditionMet) ||
     (!field.inserted && isReadOnly && isLengthConditionMet);
@@ -105,8 +106,7 @@ export const DocumentSigningCheckboxField = ({
         await signFieldWithToken(payload);
       }
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -141,8 +141,7 @@ export const DocumentSigningCheckboxField = ({
         setCheckedValues([]);
       }
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 
@@ -214,9 +213,7 @@ export const DocumentSigningCheckboxField = ({
       });
     } finally {
       setCheckedValues(updatedValues);
-
+      await revalidate();
-      // Todo
-      // startTransition(() => router.refresh());
     }
   };
 

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -1,10 +1,9 @@
-import { useTransition } from 'react';
-
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import {
   DEFAULT_DOCUMENT_DATE_FORMAT,
@@ -43,8 +42,7 @@ export const DocumentSigningDateField = ({
 }: DocumentSigningDateFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
+  const { revalidate } = useRevalidator();
-  const [isPending, startTransition] = useTransition();
 
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
@@ -54,14 +52,14 @@ export const DocumentSigningDateField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
 
   const isDifferentTime = field.inserted && localDateString !== field.customText;
 
   const tooltipText = _(
-    msg`"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`,
+    msg`"${field.customText}" will appear on the document as it has a timezone of "${timezone || ''}".`,
   );
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
@@ -80,8 +78,7 @@ export const DocumentSigningDateField = ({
 
       await signFieldWithToken(payload);
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -113,8 +110,7 @@ export const DocumentSigningDateField = ({
 
       await removeSignedFieldWithToken(payload);
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -43,8 +44,7 @@ export const DocumentSigningDropdownField = ({
 }: DocumentSigningDropdownFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
+  const { revalidate } = useRevalidator();
-  const [isPending, startTransition] = useTransition();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
@@ -61,7 +61,7 @@ export const DocumentSigningDropdownField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
   const shouldAutoSignField =
     (!field.inserted && localChoice) || (!field.inserted && isReadOnly && defaultValue);
 
@@ -87,8 +87,7 @@ export const DocumentSigningDropdownField = ({
 
       setLocalChoice('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -126,8 +125,7 @@ export const DocumentSigningDropdownField = ({
 
       setLocalChoice('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -1,10 +1,9 @@
-import { useTransition } from 'react';
-
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -35,11 +34,10 @@ export const DocumentSigningEmailField = ({
 }: DocumentSigningEmailFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { email: providedEmail } = useRequiredDocumentSigningContext();
 
-  const [isPending, startTransition] = useTransition();
-
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
@@ -48,7 +46,7 @@ export const DocumentSigningEmailField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
@@ -69,8 +67,7 @@ export const DocumentSigningEmailField = ({
 
       await signFieldWithToken(payload);
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -102,8 +99,7 @@ export const DocumentSigningEmailField = ({
 
       await removeSignedFieldWithToken(payload);
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -107,7 +107,11 @@ export const DocumentSigningForm = ({
       timestamp: new Date().toISOString(),
     });
 
-    await navigate(redirectUrl ? redirectUrl : `/sign/${recipient.token}/complete`);
+    if (redirectUrl) {
+      window.location.href = redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
   };
 
   return (

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -1,10 +1,9 @@
-import { useTransition } from 'react';
-
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -36,12 +35,11 @@ export const DocumentSigningInitialsField = ({
 }: DocumentSigningInitialsFieldProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
 
   const { fullName } = useRequiredDocumentSigningContext();
   const initials = extractInitials(fullName);
 
-  const [isPending, startTransition] = useTransition();
-
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
@@ -50,7 +48,7 @@ export const DocumentSigningInitialsField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
@@ -71,8 +69,7 @@ export const DocumentSigningInitialsField = ({
 
       await signFieldWithToken(payload);
 
-      // Tod
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -104,7 +101,7 @@ export const DocumentSigningInitialsField = ({
 
       await removeSignedFieldWithToken(payload);
 
-      // startTransition(() => router.refresh());
+      await revalidate();
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -1,10 +1,11 @@
-import { useState, useTransition } from 'react';
+import { useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -40,14 +41,13 @@ export const DocumentSigningNameField = ({
 }: DocumentSigningNameFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { fullName: providedFullName, setFullName: setProvidedFullName } =
     useRequiredDocumentSigningContext();
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
-  const [isPending, startTransition] = useTransition();
-
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
@@ -56,7 +56,7 @@ export const DocumentSigningNameField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const [showFullNameModal, setShowFullNameModal] = useState(false);
   const [localFullName, setLocalFullName] = useState('');
@@ -107,7 +107,7 @@ export const DocumentSigningNameField = ({
 
       await signFieldWithToken(payload);
 
-      // startTransition(() => router.refresh());
+      await revalidate();
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -139,7 +139,7 @@ export const DocumentSigningNameField = ({
 
       await removeSignedFieldWithToken(payload);
 
-      // startTransition(() => router.refresh());
+      await revalidate();
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { Hash, Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -49,8 +50,8 @@ export const DocumentSigningNumberField = ({
 }: DocumentSigningNumberFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
-  const [isPending, startTransition] = useTransition();
   const [showRadioModal, setShowRadioModal] = useState(false);
 
   const parsedFieldMeta = field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null;
@@ -80,7 +81,7 @@ export const DocumentSigningNumberField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value;
@@ -136,8 +137,7 @@ export const DocumentSigningNumberField = ({
 
       setLocalNumber('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -188,8 +188,7 @@ export const DocumentSigningNumberField = ({
 
       setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta?.value) : '');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import type { Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -37,8 +38,7 @@ export const DocumentSigningRadioField = ({
 }: DocumentSigningRadioFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
-
+  const { revalidate } = useRevalidator();
-  const [isPending, startTransition] = useTransition();
 
   const parsedFieldMeta = ZRadioFieldMeta.parse(field.fieldMeta);
   const values = parsedFieldMeta.values?.map((item) => ({
@@ -60,7 +60,7 @@ export const DocumentSigningRadioField = ({
     isPending: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
   const shouldAutoSignField =
     (!field.inserted && selectedOption) ||
     (!field.inserted && defaultValue) ||
@@ -88,8 +88,7 @@ export const DocumentSigningRadioField = ({
 
       setSelectedOption('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -122,8 +121,7 @@ export const DocumentSigningRadioField = ({
 
       setSelectedOption('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -1,10 +1,11 @@
-import { useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Recipient } from '@prisma/client';
 import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
@@ -45,6 +46,7 @@ export const DocumentSigningSignatureField = ({
 }: DocumentSigningSignatureFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const signatureRef = useRef<HTMLParagraphElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -59,8 +61,6 @@ export const DocumentSigningSignatureField = ({
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
-  const [isPending, startTransition] = useTransition();
-
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
@@ -71,7 +71,7 @@ export const DocumentSigningSignatureField = ({
 
   const { signature } = field;
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
   const [showSignatureModal, setShowSignatureModal] = useState(false);
   const [localSignature, setLocalSignature] = useState<string | null>(null);
@@ -143,13 +143,11 @@ export const DocumentSigningSignatureField = ({
 
       if (onSignField) {
         await onSignField(payload);
-        return;
+      } else {
+        await signFieldWithToken(payload);
       }
 
-      await signFieldWithToken(payload);
+      await revalidate();
-
-      // Todo
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -177,12 +175,11 @@ export const DocumentSigningSignatureField = ({
       if (onUnsignField) {
         await onUnsignField(payload);
         return;
+      } else {
+        await removeSignedFieldWithToken(payload);
       }
 
-      await removeSignedFieldWithToken(payload);
+      await revalidate();
-
-      // Todo
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState, useTransition } from 'react';
+import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
 import type { Recipient } from '@prisma/client';
 import { Loader, Type } from 'lucide-react';
+import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -41,6 +42,7 @@ export const DocumentSigningTextField = ({
 }: DocumentSigningTextFieldProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const initialErrors: Record<string, string[]> = {
     required: [],
@@ -52,8 +54,6 @@ export const DocumentSigningTextField = ({
 
   const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
 
-  const [isPending, startTransition] = useTransition();
-
   const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
     trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
@@ -64,7 +64,7 @@ export const DocumentSigningTextField = ({
 
   const parsedFieldMeta = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null;
 
-  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
   const shouldAutoSignField =
     (!field.inserted && parsedFieldMeta?.text) ||
     (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);
@@ -153,8 +153,7 @@ export const DocumentSigningTextField = ({
 
       setLocalCustomText('');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       const error = AppError.parseError(err);
 
@@ -188,8 +187,7 @@ export const DocumentSigningTextField = ({
 
       setLocalCustomText(parsedFieldMeta?.text ?? '');
 
-      // Todo
+      await revalidate();
-      // startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
 

apps/remix/app/components/general/document/document-search.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
@@ -10,8 +10,7 @@ import { Input } from '@documenso/ui/primitives/input';
 export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string }) => {
   const { _ } = useLingui();
 
-  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
-  const [searchParams] = useSearchParams();
 
   const [searchTerm, setSearchTerm] = useState(initialValue);
   const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
@@ -20,12 +19,12 @@ export const DocumentSearch = ({ initialValue = '' }: { initialValue?: string })
     (term: string) => {
       const params = new URLSearchParams(searchParams?.toString() ?? '');
       if (term) {
-        params.set('search', term);
+        params.set('query', term);
       } else {
-        params.delete('search');
+        params.delete('query');
       }
 
-      void navigate(`?${params.toString()}`);
+      setSearchParams(params);
     },
     [searchParams],
   );

apps/remix/app/components/general/teams/team-transfer-status.tsx

@@ -3,6 +3,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { TeamMemberRole, TeamTransferVerification } from '@prisma/client';
 import { AnimatePresence } from 'framer-motion';
+import { useRevalidator } from 'react-router';
 
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
 import { isTokenExpired } from '@documenso/lib/utils/token-verification';
@@ -28,12 +29,13 @@ export const TeamTransferStatus = ({
 }: TeamTransferStatusProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const isExpired = transferVerification && isTokenExpired(transferVerification.expiresAt);
 
   const { mutateAsync: deleteTeamTransferRequest, isPending } =
     trpc.team.deleteTeamTransferRequest.useMutation({
-      onSuccess: () => {
+      onSuccess: async () => {
         if (!isExpired) {
           toast({
             title: _(msg`Success`),
@@ -42,8 +44,7 @@ export const TeamTransferStatus = ({
           });
         }
 
-        // todo?
+        await revalidate();
-        // router.refresh();
       },
       onError: () => {
         toast({

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

@@ -5,6 +5,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { type Field, type Recipient, type Signature, SigningStatus } from '@prisma/client';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -42,6 +43,7 @@ export type RecipientItemProps = {
 export const AdminDocumentRecipientItemTable = ({ recipient }: RecipientItemProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TAdminUpdateRecipientFormSchema>({
     defaultValues: {
@@ -109,8 +111,7 @@ export const AdminDocumentRecipientItemTable = ({ recipient }: RecipientItemProp
         description: _(msg`The recipient has been updated successfully`),
       });
 
-      // todo
+      await revalidate();
-      // router.refresh();
     } catch (error) {
       toast({
         title: _(msg`Failed to update recipient`),

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

@@ -4,7 +4,6 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Link, useSearchParams } from 'react-router';
-import { useNavigate } from 'react-router';
 import { useLocation } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
@@ -18,8 +17,7 @@ import { UserSettingsPendingTeamsDataTable } from './user-settings-pending-teams
 export const UserSettingsTeamsPageDataTable = () => {
   const { _ } = useLingui();
 
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
@@ -39,10 +37,6 @@ export const UserSettingsTeamsPageDataTable = () => {
    * Handle debouncing the search query.
    */
   useEffect(() => {
-    if (!pathname) {
-      return;
-    }
-
     const params = new URLSearchParams(searchParams?.toString());
 
     params.set('query', debouncedSearchQuery);
@@ -51,8 +45,8 @@ export const UserSettingsTeamsPageDataTable = () => {
       params.delete('query');
     }
 
-    void navigate(`${pathname}?${params.toString()}`);
+    setSearchParams(params);
-  }, [debouncedSearchQuery, pathname, navigate, searchParams]);
+  }, [debouncedSearchQuery, pathname, searchParams]);
 
   return (
     <div>

apps/remix/app/routes/_authenticated+/admin+/site-settings.tsx

@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
@@ -47,6 +48,7 @@ export default function AdminBannerPage({ loaderData }: Route.ComponentProps) {
 
   const { toast } = useToast();
   const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
 
   const form = useForm<TBannerFormSchema>({
     resolver: zodResolver(ZBannerFormSchema),
@@ -80,8 +82,7 @@ export default function AdminBannerPage({ loaderData }: Route.ComponentProps) {
         duration: 5000,
       });
 
-      // Todo
+      await revalidate();
-      // router.refresh();
     } catch (err) {
       toast({
         title: _(msg`An unknown error occurred`),

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

@@ -3,6 +3,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -32,6 +33,7 @@ type TUserFormSchema = z.infer<typeof ZUserFormSchema>;
 export default function UserPage({ params }: { params: { id: number } }) {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const { data: user } = trpc.profile.getUser.useQuery(
     {
@@ -64,8 +66,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
         roles,
       });
 
-      // Todo
+      await revalidate();
-      // router.refresh();
 
       toast({
         title: _(msg`Profile updated`),

apps/remix/app/routes/_authenticated+/documents+/_index.tsx

@@ -3,8 +3,10 @@ import { useEffect, useMemo, useState } from 'react';
 import { Trans } from '@lingui/react/macro';
 import { useSearchParams } from 'react-router';
 import { Link } from 'react-router';
+import { z } from 'zod';
 
 import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { parseToIntegerArray } from '@documenso/lib/utils/params';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { trpc } from '@documenso/trpc/react';
@@ -33,8 +35,9 @@ const ZSearchParamsSchema = ZFindDocumentsInternalRequestSchema.pick({
   period: true,
   page: true,
   perPage: true,
-  senderIds: true,
   query: true,
+}).extend({
+  senderIds: z.string().transform(parseToIntegerArray).optional().catch([]),
 });
 
 export default function DocumentsPage() {
@@ -59,7 +62,7 @@ export default function DocumentsPage() {
     ...findDocumentSearchParams,
   });
 
-  const getTabHref = (value: typeof status) => {
+  const getTabHref = (value: keyof typeof ExtendedDocumentStatus) => {
     const params = new URLSearchParams(searchParams);
 
     params.set('status', value);

apps/remix/app/routes/_authenticated+/settings+/webhooks+/$id.tsx

@@ -4,7 +4,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
-import { useParams } from 'react-router';
+import { useParams, useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -36,6 +36,7 @@ export default function WebhookPage() {
 
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const webhookId = params.id || '';
 
@@ -71,8 +72,7 @@ export default function WebhookPage() {
         duration: 5000,
       });
 
-      // Todo
+      await revalidate();
-      // router.refresh();
     } catch (err) {
       toast({
         title: _(msg`Failed to update webhook`),

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Link, useLocation, useNavigate, useSearchParams } from 'react-router';
+import { Link, useLocation, useSearchParams } from 'react-router';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { Input } from '@documenso/ui/primitives/input';
@@ -13,15 +13,11 @@ import { TeamMemberInviteDialog } from '~/components/dialogs/team-member-invite-
 import { SettingsHeader } from '~/components/general/settings-header';
 import { TeamSettingsMemberInvitesTable } from '~/components/tables/team-settings-member-invites-table';
 import { TeamSettingsMembersDataTable } from '~/components/tables/team-settings-members-table';
-import { useCurrentTeam } from '~/providers/team';
 
 export default function TeamsSettingsMembersPage() {
   const { _ } = useLingui();
 
-  const team = useCurrentTeam();
+  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
@@ -34,10 +30,6 @@ export default function TeamsSettingsMembersPage() {
    * Handle debouncing the search query.
    */
   useEffect(() => {
-    if (!pathname) {
-      return;
-    }
-
     const params = new URLSearchParams(searchParams?.toString());
 
     params.set('query', debouncedSearchQuery);
@@ -46,8 +38,13 @@ export default function TeamsSettingsMembersPage() {
       params.delete('query');
     }
 
-    void navigate(`${pathname}?${params.toString()}`);
+    // If nothing  to change then do nothing.
-  }, [debouncedSearchQuery, pathname, navigate, searchParams]);
+    if (params.toString() === searchParams?.toString()) {
+      return;
+    }
+
+    setSearchParams(params);
+  }, [debouncedSearchQuery, pathname, searchParams]);
 
   return (
     <div>
@@ -55,10 +52,7 @@ export default function TeamsSettingsMembersPage() {
         title={_(msg`Members`)}
         subtitle={_(msg`Manage the members or invite new members.`)}
       >
-        <TeamMemberInviteDialog
+        <TeamMemberInviteDialog />
-          teamId={team.id}
-          currentUserTeamRole={team.currentTeamMember.role}
-        />
       </SettingsHeader>
 
       <div>

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

@@ -4,6 +4,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
 import type { z } from 'zod';
 
 import { trpc } from '@documenso/trpc/react';
@@ -36,6 +37,7 @@ type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
 export default function WebhookPage({ params }: Route.ComponentProps) {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const team = useCurrentTeam();
 
@@ -73,8 +75,7 @@ export default function WebhookPage({ params }: Route.ComponentProps) {
         duration: 5000,
       });
 
-      // Todo
+      await revalidate();
-      // router.refresh();
     } catch (err) {
       toast({
         title: _(msg`Failed to update webhook`),

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

@@ -48,7 +48,7 @@ export async function loader({ params }: Route.LoaderArgs) {
 
   // Ensure typesafety when we add more options.
   const isAccessAuthValid = match(derivedRecipientAccessAuth)
-    .with(DocumentAccessAuth.ACCOUNT, () => session?.user !== null)
+    .with(DocumentAccessAuth.ACCOUNT, () => Boolean(session?.user))
     .with(null, () => true)
     .exhaustive();
 

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

@@ -1,9 +1,11 @@
+import { useEffect } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
+import { type Document, DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
 import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
-import { Link } from 'react-router';
+import { Link, useRevalidator } from 'react-router';
 import { getOptionalLoaderSession } from 'server/utils/get-loader-session';
 import { match } from 'ts-pattern';
 
@@ -254,35 +256,32 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
         </div>
       </div>
 
-      {/* Todo */}
+      <PollUntilDocumentCompleted document={document} />
-      {/* Todo */}
-      {/* <PollUntilDocumentCompleted document={document} /> */}
     </div>
   );
 }
 
-// Todo: Refresh on focus? Was in a layout w it before.
+export type PollUntilDocumentCompletedProps = {
-// Todo:
+  document: Pick<Document, 'id' | 'status' | 'deletedAt'>;
-// export type PollUntilDocumentCompletedProps = {
+};
-//   document: Pick<Document, 'id' | 'status' | 'deletedAt'>;
-// };
 
-// export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentCompletedProps) => {
+export const PollUntilDocumentCompleted = ({ document }: PollUntilDocumentCompletedProps) => {
-//   const router = useRouter();
+  const { revalidate } = useRevalidator();
 
-//   useEffect(() => {
+  useEffect(() => {
-//     if (document.status === DocumentStatus.COMPLETED) {
+    if (document.status === DocumentStatus.COMPLETED) {
-//       return;
+      return;
-//     }
+    }
 
-//     const interval = setInterval(() => {
+    const interval = setInterval(() => {
-//       if (window.document.hasFocus()) {
+      if (window.document.hasFocus()) {
-//         router.refresh();
+        void revalidate();
-//       }
+      }
-//     }, 5000);
+    }, 5000);
 
-//     return () => clearInterval(interval);
+    return () => clearInterval(interval);
-//   }, [router, document.status]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document.status]);
 
-//   return <></>;
+  return <></>;
-// };
+};

apps/remix/app/routes/_unauthenticated+/verify-email.$token.tsx

@@ -8,7 +8,7 @@ import { Link, redirect, useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { authClient } from '@documenso/auth/client';
-import { EMAIL_VERIFICATION_STATE } from '@documenso/lib/server-only/user/verify-email';
+import { EMAIL_VERIFICATION_STATE } from '@documenso/lib/constants/email';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 

apps/remix/package.json

@@ -85,6 +85,7 @@
     "@types/formidable": "^2.0.6",
     "@types/luxon": "^3.3.1",
     "@types/node": "^20",
+    "@types/papaparse": "^5.3.15",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/ua-parser-js": "^0.7.39",

apps/remix/server/context.ts

@@ -53,7 +53,7 @@ export const appContext = async (c: Context, next: Next) => {
 
     const result = await Promise.all([
       getTeams({ userId: session.user.id }),
-      teamUrl ? getTeamByUrl({ userId: session.user.id, teamUrl }) : null,
+      teamUrl ? getTeamByUrl({ userId: session.user.id, teamUrl }).catch(() => null) : null,
     ]);
 
     teams = result[0];

apps/remix/server/router.ts

@@ -24,8 +24,10 @@ export interface HonoEnv {
 
 const app = new Hono<HonoEnv>();
 
+/**
+ * Attach session and context to requests.
+ */
 app.use(contextStorage());
-
 app.use(appContext);
 
 // App middleware.

apps/remix/vite.config.ts

@@ -37,12 +37,18 @@ export default defineConfig({
   ],
   ssr: {
     noExternal: ['react-dropzone', 'plausible-tracker', 'pdfjs-dist'],
-    external: ['@node-rs/bcrypt', '@prisma/client'],
+    external: ['@node-rs/bcrypt', '@node-rs/bcrypt-wasm32-wasi', '@prisma/client'],
   },
   optimizeDeps: {
     entries: ['./app/**/*', '../../packages/ui/**/*', '../../packages/lib/**/*'],
     include: ['prop-types', 'file-selector', 'attr-accept'],
-    exclude: ['node_modules', '@node-rs/bcrypt', '@documenso/pdf-sign', 'sharp'],
+    exclude: [
+      'node_modules',
+      '@node-rs/bcrypt',
+      '@node-rs/bcrypt-wasm32-wasi',
+      '@documenso/pdf-sign',
+      'sharp',
+    ],
   },
   resolve: {
     alias: {

package-lock.json

@@ -168,6 +168,7 @@
         "@types/formidable": "^2.0.6",
         "@types/luxon": "^3.3.1",
         "@types/node": "^20",
+        "@types/papaparse": "^5.3.15",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "@types/ua-parser-js": "^0.7.39",
@@ -13458,6 +13459,16 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "license": "MIT"
     },
+    "node_modules/@types/papaparse": {
+      "version": "5.3.15",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.15.tgz",
+      "integrity": "sha512-JHe6vF6x/8Z85nCX4yFdDslN11d+1pr12E526X8WAfhadOeaOTx5AuIkvDKIBopfvlzpzkdMx4YyvSKCM9oqtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",

packages/app-tests/e2e/document-auth/action-auth.spec.ts

@@ -13,6 +13,7 @@ import {
 import { seedTestEmail, seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin, apiSignout } from '../fixtures/authentication';
+import { signSignaturePad } from '../fixtures/signature';
 
 test.describe.configure({ mode: 'parallel', timeout: 60000 });
 
@@ -35,15 +36,7 @@ test('[DOCUMENT_AUTH]: should allow signing when no auth setup', async ({ page }
     await page.goto(signUrl);
     await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
 
-    // Add signature.
+    await signSignaturePad(page);
-    const canvas = page.locator('canvas').first();
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -92,15 +85,7 @@ test('[DOCUMENT_AUTH]: should allow signing with valid global auth', async ({ pa
 
   await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
 
-  // Add signature.
+  await signSignaturePad(page);
-  const canvas = page.locator('canvas').first();
-  const box = await canvas.boundingBox();
-  if (box) {
-    await page.mouse.move(box.x + 40, box.y + 40);
-    await page.mouse.down();
-    await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-    await page.mouse.up();
-  }
 
   for (const field of fields) {
     await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -261,15 +246,7 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient au
       });
     }
 
-    // Add signature.
+    await signSignaturePad(page);
-    const canvas = page.locator('canvas').first();
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -372,15 +349,7 @@ test('[DOCUMENT_AUTH]: should allow field signing when required for recipient an
       });
     }
 
-    // Add signature.
+    await signSignaturePad(page);
-    const canvas = page.locator('canvas').first();
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -18,6 +18,7 @@ import {
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
+import { signSignaturePad } from '../fixtures/signature';
 
 // Can't use the function in server-only/document due to it indirectly using
 // require imports.
@@ -368,15 +369,7 @@ test('[DOCUMENT_FLOW]: should be able to approve a document', async ({ page }) =
       }),
     ).toBeVisible();
 
-    // Add signature.
+    await signSignaturePad(page);
-    const canvas = page.locator('canvas');
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -607,19 +600,10 @@ test('[DOCUMENT_FLOW]: should be able to create and sign a document with 3 recip
 
     await page.goto(`/sign/${recipient?.token}`);
     await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+    await signSignaturePad(page);
 
     await page.locator(`#field-${recipientField.id}`).getByRole('button').click();
 
-    const canvas = page.locator('canvas#signature');
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
-
-    await page.getByRole('button', { name: 'Sign', exact: true }).click();
     await page.getByRole('button', { name: 'Complete' }).click();
     await page.getByRole('button', { name: 'Sign' }).click();
 

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -10,6 +10,7 @@ import { seedTeam } from '@documenso/prisma/seed/teams';
 import { seedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
+import { signSignaturePad } from '../fixtures/signature';
 
 test.describe('Signing Certificate Tests', () => {
   test('individual document should always include signing certificate', async ({ page }) => {
@@ -36,14 +37,7 @@ test.describe('Signing Certificate Tests', () => {
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
-    const canvas = page.locator('canvas');
+    await signSignaturePad(page);
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of recipient.fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -113,14 +107,7 @@ test.describe('Signing Certificate Tests', () => {
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
-    const canvas = page.locator('canvas');
+    await signSignaturePad(page);
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of recipient.fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();
@@ -190,14 +177,7 @@ test.describe('Signing Certificate Tests', () => {
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
-    const canvas = page.locator('canvas');
+    await signSignaturePad(page);
-    const box = await canvas.boundingBox();
-    if (box) {
-      await page.mouse.move(box.x + 40, box.y + 40);
-      await page.mouse.down();
-      await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-      await page.mouse.up();
-    }
 
     for (const field of recipient.fields) {
       await page.locator(`#field-${field.id}`).getByRole('button').click();

packages/app-tests/e2e/fixtures/authentication.ts

@@ -21,31 +21,23 @@ export const apiSignin = async ({
 }: LoginOptions) => {
   const { request } = page.context();
 
-  const csrfToken = await getCsrfToken(page);
+  // const csrfToken = await getCsrfToken(page);
 
-  await request.post(`${NEXT_PUBLIC_WEBAPP_URL()}/api/auth/callback/credentials`, {
+  await request.post(`${NEXT_PUBLIC_WEBAPP_URL()}/api/auth/email-password/authorize`, {
-    form: {
+    data: {
       email,
       password,
-      json: true,
-      csrfToken,
     },
   });
 
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}${redirectPath}`);
+  await page.waitForTimeout(500);
 };
 
 export const apiSignout = async ({ page }: { page: Page }) => {
   const { request } = page.context();
 
-  const csrfToken = await getCsrfToken(page);
+  await request.post(`${NEXT_PUBLIC_WEBAPP_URL()}/api/auth/signout`);
-
-  await request.post(`${NEXT_PUBLIC_WEBAPP_URL()}/api/auth/signout`, {
-    form: {
-      csrfToken,
-      json: true,
-    },
-  });
 
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/signin`);
 };

packages/app-tests/e2e/fixtures/signature.ts

@@ -0,0 +1,40 @@
+import type { Page } from '@playwright/test';
+
+export const signSignaturePad = async (page: Page) => {
+  await page.waitForTimeout(200);
+
+  const canvas = page.getByTestId('signature-pad');
+
+  const box = await canvas.boundingBox();
+
+  if (!box) {
+    throw new Error('Signature pad not found');
+  }
+
+  // Calculate center point
+  const centerX = box.x + box.width / 2;
+  const centerY = box.y + box.height / 2;
+
+  // Calculate square size (making it slightly smaller than the canvas)
+  const squareSize = Math.min(box.width, box.height) * 0.4; // 40% of the smallest dimension
+
+  // Move to center
+  await page.mouse.move(centerX, centerY);
+  await page.mouse.down();
+
+  // Draw square clockwise from center
+  // Move right
+  await page.mouse.move(centerX + squareSize, centerY, { steps: 10 });
+  // Move down
+  await page.mouse.move(centerX + squareSize, centerY + squareSize, { steps: 10 });
+  // Move left
+  await page.mouse.move(centerX - squareSize, centerY + squareSize, { steps: 10 });
+  // Move up
+  await page.mouse.move(centerX - squareSize, centerY - squareSize, { steps: 10 });
+  // Move right
+  await page.mouse.move(centerX + squareSize, centerY - squareSize, { steps: 10 });
+  // Move down to close the square
+  await page.mouse.move(centerX + squareSize, centerY, { steps: 10 });
+
+  await page.mouse.up();
+};

packages/app-tests/e2e/teams/search-documents.spec.ts

@@ -61,7 +61,7 @@ test('[TEAMS]: search respects team document visibility', async ({ page }) => {
     });
 
     await page.getByPlaceholder('Search documents...').fill('Searchable');
-    await page.waitForURL(/search=Searchable/);
+    await page.waitForURL(/query=Searchable/);
 
     await checkDocumentTabCount(page, 'All', visibleDocs);
 
@@ -103,7 +103,7 @@ test('[TEAMS]: search does not reveal documents from other teams', async ({ page
   });
 
   await page.getByPlaceholder('Search documents...').fill('Unique');
-  await page.waitForURL(/search=Unique/);
+  await page.waitForURL(/query=Unique/);
 
   await checkDocumentTabCount(page, 'All', 1);
   await expect(page.getByRole('link', { name: 'Unique Team A Document' })).toBeVisible();
@@ -144,7 +144,7 @@ test('[PERSONAL]: search does not reveal team documents in personal account', as
   });
 
   await page.getByPlaceholder('Search documents...').fill('Unique');
-  await page.waitForURL(/search=Unique/);
+  await page.waitForURL(/query=Unique/);
 
   await checkDocumentTabCount(page, 'All', 1);
   await expect(page.getByRole('link', { name: 'Personal Unique Document' })).toBeVisible();
@@ -179,7 +179,7 @@ test('[TEAMS]: search respects recipient visibility regardless of team visibilit
   });
 
   await page.getByPlaceholder('Search documents...').fill('Admin Document');
-  await page.waitForURL(/search=Admin(%20|\+|\s)Document/);
+  await page.waitForURL(/query=Admin(%20|\+|\s)Document/);
 
   await checkDocumentTabCount(page, 'All', 1);
   await expect(
@@ -221,7 +221,7 @@ test('[TEAMS]: search by recipient name respects visibility', async ({ page }) =
   });
 
   await page.getByPlaceholder('Search documents...').fill('Unique Recipient');
-  await page.waitForURL(/search=Unique(%20|\+|\s)Recipient/);
+  await page.waitForURL(/query=Unique(%20|\+|\s)Recipient/);
 
   await checkDocumentTabCount(page, 'All', 1);
   await expect(
@@ -238,7 +238,7 @@ test('[TEAMS]: search by recipient name respects visibility', async ({ page }) =
   });
 
   await page.getByPlaceholder('Search documents...').fill('Unique Recipient');
-  await page.waitForURL(/search=Unique(%20|\+|\s)Recipient/);
+  await page.waitForURL(/query=Unique(%20|\+|\s)Recipient/);
 
   await checkDocumentTabCount(page, 'All', 0);
   await expect(

packages/app-tests/e2e/teams/team-documents.spec.ts

@@ -113,7 +113,7 @@ test('[TEAMS]: check team documents count with internal team email', async ({ pa
     await apiSignin({
       page,
       email: user.email,
-      redirectPath: `/t/${team.url}/documents`,
+      redirectPath: `/t/${team.url}/documents?perPage=20`,
     });
 
     // Check document counts.

packages/app-tests/e2e/teams/team-members.spec.ts

@@ -33,7 +33,6 @@ test('[TEAMS]: update team member role', async ({ page }) => {
   await page.getByLabel('Manager').click();
   await page.getByRole('button', { name: 'Update' }).click();
 
-  // TODO: Remove me, but i don't care for now
   await page.reload();
 
   await expect(

packages/app-tests/e2e/templates/direct-templates.spec.ts

@@ -117,7 +117,7 @@ test('[DIRECT_TEMPLATES]: toggle direct template link', async ({ page }) => {
 
     // Check that the direct template link is no longer accessible.
     await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
-    await expect(page.getByText('Template not found')).toBeVisible();
+    await expect(page.getByText('404 not found')).toBeVisible();
   }
 });
 
@@ -162,7 +162,7 @@ test('[DIRECT_TEMPLATES]: delete direct template link', async ({ page }) => {
 
     // Check that the direct template link is no longer accessible.
     await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
-    await expect(page.getByText('Template not found')).toBeVisible();
+    await expect(page.getByText('404 not found')).toBeVisible();
   }
 });
 

packages/app-tests/e2e/templates/manage-templates.spec.ts

@@ -42,13 +42,12 @@ test('[TEMPLATES]: view templates', async ({ page }) => {
     redirectPath: '/templates',
   });
 
+  // Only should only see their personal template.
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 1 result');
+
   // Owner should see both team templates.
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/templates`);
-  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 2 results');
-
-  // Only should only see their personal template.
-  await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/templates`);
-  await expect(page.getByRole('main')).toContainText('Showing 1 result');
 });
 
 test('[TEMPLATES]: delete template', async ({ page }) => {
@@ -142,7 +141,7 @@ test('[TEMPLATES]: duplicate template', async ({ page }) => {
   await page.getByRole('menuitem', { name: 'Duplicate' }).click();
   await page.getByRole('button', { name: 'Duplicate' }).click();
   await expect(page.getByText('Template duplicated').first()).toBeVisible();
-  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 2 results');
 
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/templates`);
 
@@ -151,7 +150,7 @@ test('[TEMPLATES]: duplicate template', async ({ page }) => {
   await page.getByRole('menuitem', { name: 'Duplicate' }).click();
   await page.getByRole('button', { name: 'Duplicate' }).click();
   await expect(page.getByText('Template duplicated').first()).toBeVisible();
-  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 2 results');
 });
 
 test('[TEMPLATES]: use template', async ({ page }) => {
@@ -194,7 +193,7 @@ test('[TEMPLATES]: use template', async ({ page }) => {
   await page.waitForURL(/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL('/documents');
-  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 1 result');
 
   await page.goto(`${NEXT_PUBLIC_WEBAPP_URL()}/t/${team.url}/templates`);
   await page.waitForTimeout(1000);
@@ -212,5 +211,5 @@ test('[TEMPLATES]: use template', async ({ page }) => {
   await page.waitForURL(/\/t\/.+\/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL(`/t/${team.url}/documents`);
-  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+  await expect(page.getByTestId('data-table-count')).toContainText('Showing 1 result');
 });

packages/app-tests/e2e/user/auth-flow.spec.ts

@@ -6,6 +6,8 @@ import {
   seedUser,
 } from '@documenso/prisma/seed/users';
 
+import { signSignaturePad } from '../fixtures/signature';
+
 test.use({ storageState: { cookies: [], origins: [] } });
 
 test('[USER] can sign up with email and password', async ({ page }: { page: Page }) => {
@@ -18,14 +20,7 @@ test('[USER] can sign up with email and password', async ({ page }: { page: Page
   await page.getByLabel('Email').fill(email);
   await page.getByLabel('Password', { exact: true }).fill(password);
 
-  const canvas = page.locator('canvas').first();
+  await signSignaturePad(page);
-  const box = await canvas.boundingBox();
-  if (box) {
-    await page.mouse.move(box.x + 40, box.y + 40);
-    await page.mouse.down();
-    await page.mouse.move(box.x + box.width - 2, box.y + box.height - 2);
-    await page.mouse.up();
-  }
 
   await page.getByRole('button', { name: 'Next', exact: true }).click();
   await page.getByLabel('Public profile username').fill(Date.now().toString());
@@ -41,7 +36,7 @@ test('[USER] can sign up with email and password', async ({ page }: { page: Page
   await expect(page.getByRole('heading')).toContainText('Email Confirmed!');
 
   // We now automatically redirect to the home page
-  // await page.getByRole('link', { name: 'Go back home' }).click();
+  await page.getByRole('link', { name: 'Continue' }).click();
 
   await page.waitForURL('/documents');
 

packages/auth/server/index.ts

@@ -28,9 +28,7 @@ export const auth = new Hono<HonoAuthContext>()
  * Handle errors.
  */
 auth.onError((err, c) => {
-  console.error(`-----------`);
+  // Todo Remove
-  console.error(`-----------`);
-  console.error(`-----------`);
   console.error(`${err}`);
 
   if (err instanceof HTTPException) {

packages/auth/server/lib/session/session-cookies.ts

@@ -2,6 +2,7 @@ import type { Context } from 'hono';
 import { deleteCookie, getSignedCookie, setSignedCookie } from 'hono/cookie';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { useSecureCookies } from '@documenso/lib/constants/auth';
 import { appLog } from '@documenso/lib/utils/debugger';
 import { env } from '@documenso/lib/utils/env';
 
@@ -23,6 +24,18 @@ const getAuthDomain = () => {
   return url.hostname;
 };
 
+/**
+ * Generic auth session cookie options.
+ */
+export const sessionCookieOptions = {
+  httpOnly: true,
+  path: '/',
+  sameSite: useSecureCookies ? 'none' : 'lax',
+  secure: useSecureCookies,
+  domain: getAuthDomain(),
+  // Todo: Max age for specific auth cookies.
+} as const;
+
 export const extractSessionCookieFromHeaders = (headers: Headers): string | null => {
   const cookieHeader = headers.get('cookie') || '';
   const cookiePairs = cookieHeader.split(';');
@@ -54,12 +67,13 @@ export const getSessionCookie = async (c: Context): Promise<string | null> => {
  * @param sessionToken - The session token to set.
  */
 export const setSessionCookie = async (c: Context, sessionToken: string) => {
-  await setSignedCookie(c, sessionCookieName, sessionToken, getAuthSecret(), {
+  await setSignedCookie(
-    path: '/',
+    c,
-    // sameSite: '', // whats the default? we need to change this for embed right?
+    sessionCookieName,
-    // secure: true,
+    sessionToken,
-    domain: getAuthDomain(),
+    getAuthSecret(),
-  }).catch((err) => {
+    sessionCookieOptions,
+  ).catch((err) => {
     appLog('SetSessionCookie', `Error setting signed cookie: ${err}`);
 
     throw err;
@@ -73,9 +87,5 @@ export const setSessionCookie = async (c: Context, sessionToken: string) => {
  * @param sessionToken - The session token to set.
  */
 export const deleteSessionCookie = (c: Context) => {
-  deleteCookie(c, sessionCookieName, {
+  deleteCookie(c, sessionCookieName, sessionCookieOptions);
-    path: '/',
-    secure: true,
-    domain: getAuthDomain(),
-  });
 };

packages/auth/server/lib/session/session.ts

@@ -1,6 +1,6 @@
 import { sha256 } from '@oslojs/crypto/sha2';
 import { encodeBase32LowerCaseNoPadding, encodeHexLowerCase } from '@oslojs/encoding';
-import type { Session, User } from '@prisma/client';
+import { type Session, type User, UserSecurityAuditLogType } from '@prisma/client';
 
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { prisma } from '@documenso/prisma';
@@ -49,6 +49,15 @@ export const createSession = async (
     data: session,
   });
 
+  await prisma.userSecurityAuditLog.create({
+    data: {
+      userId,
+      ipAddress: metadata.ipAddress,
+      userAgent: metadata.userAgent,
+      type: UserSecurityAuditLogType.SIGN_IN,
+    },
+  });
+
   return session;
 };
 
@@ -103,6 +112,18 @@ export const validateSessionToken = async (token: string): Promise<SessionValida
   return { session, user, isAuthenticated: true };
 };
 
-export const invalidateSession = async (sessionId: string): Promise<void> => {
+export const invalidateSession = async (
-  await prisma.session.delete({ where: { id: sessionId } });
+  sessionId: string,
+  metadata: RequestMetadata,
+): Promise<void> => {
+  const session = await prisma.session.delete({ where: { id: sessionId } });
+
+  await prisma.userSecurityAuditLog.create({
+    data: {
+      userId: session.userId,
+      ipAddress: metadata.ipAddress,
+      userAgent: metadata.userAgent,
+      type: UserSecurityAuditLogType.SIGN_OUT,
+    },
+  });
 };

packages/auth/server/lib/utils/authorizer.ts

@@ -19,4 +19,12 @@ export const onAuthorize = async (user: AuthorizeUser, c: Context<HonoAuthContex
   await createSession(sessionToken, user.userId, metadata);
 
   await setSessionCookie(c, sessionToken);
+
+  // Todo.
+  // Create the Stripe customer and attach it to the user if it doesn't exist.
+  // if (user.customerId === null && IS_BILLING_ENABLED()) {
+  //   await getStripeCustomerByUser(user).catch((err) => {
+  //     console.error(err);
+  //   });
+  // }
 };

packages/auth/server/routes/email-password.ts

@@ -5,6 +5,7 @@ import { DateTime } from 'luxon';
 import { z } from 'zod';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { EMAIL_VERIFICATION_STATE } from '@documenso/lib/constants/email';
 import { AppError } from '@documenso/lib/errors/app-error';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { disableTwoFactorAuthentication } from '@documenso/lib/server-only/2fa/disable-2fa';
@@ -18,10 +19,7 @@ import { forgotPassword } from '@documenso/lib/server-only/user/forgot-password'
 import { getMostRecentVerificationTokenByUserId } from '@documenso/lib/server-only/user/get-most-recent-verification-token-by-user-id';
 import { resetPassword } from '@documenso/lib/server-only/user/reset-password';
 import { updatePassword } from '@documenso/lib/server-only/user/update-password';
-import {
+import { verifyEmail } from '@documenso/lib/server-only/user/verify-email';
-  EMAIL_VERIFICATION_STATE,
-  verifyEmail,
-} from '@documenso/lib/server-only/user/verify-email';
 import { env } from '@documenso/lib/utils/env';
 import { prisma } from '@documenso/prisma';
 import { UserSecurityAuditLogType } from '@documenso/prisma/client';

packages/auth/server/routes/google.ts

@@ -10,6 +10,7 @@ import { env } from '@documenso/lib/utils/env';
 import { prisma } from '@documenso/prisma';
 
 import { AuthenticationErrorCode } from '../lib/errors/error-codes';
+import { sessionCookieOptions } from '../lib/session/session-cookies';
 import { onAuthorize } from '../lib/utils/authorizer';
 import type { HonoAuthContext } from '../types/context';
 
@@ -43,28 +44,22 @@ export const googleRoute = new Hono<HonoAuthContext>()
     const { redirectPath } = c.req.valid('json');
 
     setCookie(c, 'google_oauth_state', state, {
-      path: '/',
+      ...sessionCookieOptions,
-      httpOnly: true,
+      sameSite: 'lax', // Todo
-      secure: env('NODE_ENV') === 'production', // Todo: Check.
+      maxAge: 60 * 10, // 10 minutes.
-      maxAge: 60 * 10, // 10 minutes
-      sameSite: 'lax', // Todo??
     });
 
     setCookie(c, 'google_code_verifier', codeVerifier, {
-      path: '/',
+      ...sessionCookieOptions,
-      httpOnly: true,
+      sameSite: 'lax', // Todo
-      secure: env('NODE_ENV') === 'production', // Todo: Check.
+      maxAge: 60 * 10, // 10 minutes.
-      maxAge: 60 * 10, // 10 minutes
-      sameSite: 'lax', // Todo??
     });
 
     if (redirectPath) {
       setCookie(c, 'google_redirect_path', `${state}:${redirectPath}`, {
-        path: '/',
+        ...sessionCookieOptions,
-        httpOnly: true,
+        sameSite: 'lax', // Todo
-        secure: env('NODE_ENV') === 'production', // Todo: Check.
+        maxAge: 60 * 10, // 10 minutes.
-        maxAge: 60 * 10, // 10 minutes
-        sameSite: 'lax', // Todo??
       });
     }
 
@@ -81,6 +76,7 @@ export const googleRoute = new Hono<HonoAuthContext>()
 
     const storedState = deleteCookie(c, 'google_oauth_state');
     const storedCodeVerifier = deleteCookie(c, 'google_code_verifier');
+    const storedredirectPath = deleteCookie(c, 'google_redirect_path') ?? '';
 
     if (!code || !storedState || state !== storedState || !storedCodeVerifier) {
       throw new AppError(AppErrorCode.INVALID_REQUEST, {
@@ -88,8 +84,6 @@ export const googleRoute = new Hono<HonoAuthContext>()
       });
     }
 
-    const storedredirectPath = deleteCookie(c, 'google_redirect_path') ?? '';
-
     // eslint-disable-next-line prefer-const
     let [redirectState, redirectPath] = storedredirectPath.split(':');
 

packages/auth/server/routes/sign-out.ts

@@ -2,8 +2,11 @@ import { Hono } from 'hono';
 
 import { invalidateSession, validateSessionToken } from '../lib/session/session';
 import { deleteSessionCookie, getSessionCookie } from '../lib/session/session-cookies';
+import type { HonoAuthContext } from '../types/context';
+
+export const signOutRoute = new Hono<HonoAuthContext>().post('/signout', async (c) => {
+  const metadata = c.get('requestMetadata');
 
-export const signOutRoute = new Hono().post('/signout', async (c) => {
   const sessionId = await getSessionCookie(c);
 
   if (!sessionId) {
@@ -16,7 +19,7 @@ export const signOutRoute = new Hono().post('/signout', async (c) => {
     return new Response('No session found', { status: 401 });
   }
 
-  await invalidateSession(session.id);
+  await invalidateSession(session.id, metadata);
 
   deleteSessionCookie(c);
 

packages/lib/constants/auth.ts

@@ -47,9 +47,11 @@ export const PASSKEY_TIMEOUT = 60000;
  */
 export const MAXIMUM_PASSKEYS = 50;
 
+// Todo: nextuauth_url ??
 export const useSecureCookies =
   env('NODE_ENV') === 'production' && String(env('NEXTAUTH_URL')).startsWith('https://');
 
+// Todo: Test secure cookies prefix in remix.
 const secureCookiePrefix = useSecureCookies ? '__Secure-' : '';
 
 export const formatSecureCookieName = (name: string) => `${secureCookiePrefix}${name}`;

packages/lib/constants/email.ts

@@ -4,3 +4,10 @@ export const FROM_ADDRESS = env('NEXT_PRIVATE_SMTP_FROM_ADDRESS') || 'noreply@do
 export const FROM_NAME = env('NEXT_PRIVATE_SMTP_FROM_NAME') || 'Documenso';
 
 export const SERVICE_USER_EMAIL = 'serviceaccount@documenso.com';
+
+export const EMAIL_VERIFICATION_STATE = {
+  NOT_FOUND: 'NOT_FOUND',
+  VERIFIED: 'VERIFIED',
+  EXPIRED: 'EXPIRED',
+  ALREADY_VERIFIED: 'ALREADY_VERIFIED',
+} as const;

packages/lib/jobs/client/local.ts

@@ -68,13 +68,12 @@ export class LocalJobProvider extends BaseJobProvider {
     );
   }
 
-  public getApiHandler(): (context: HonoContext) => Promise<Response | void> {
+  public getApiHandler(): (c: HonoContext) => Promise<Response | void> {
-    return async (context: HonoContext) => {
+    return async (c: HonoContext) => {
-      const req = context.req;
+      const req = c.req;
 
       if (req.method !== 'POST') {
-        context.text('Method not allowed', 405);
+        return c.text('Method not allowed', 405);
-        return;
       }
 
       const jobId = req.header('x-job-id');
@@ -89,8 +88,7 @@ export class LocalJobProvider extends BaseJobProvider {
         .catch(() => null);
 
       if (!options) {
-        context.text('Bad request', 400);
+        return c.text('Bad request', 400);
-        return;
       }
 
       const definition = this._jobDefinitions[options.name];
@@ -100,33 +98,28 @@ export class LocalJobProvider extends BaseJobProvider {
         typeof signature !== 'string' ||
         typeof options !== 'object'
       ) {
-        context.text('Bad request', 400);
+        return c.text('Bad request', 400);
-        return;
       }
 
       if (!definition) {
-        context.text('Job not found', 404);
+        return c.text('Job not found', 404);
-        return;
       }
 
       if (definition && !definition.enabled) {
         console.log('Attempted to trigger a disabled job', options.name);
 
-        context.text('Job not found', 404);
+        return c.text('Job not found', 404);
-        return;
       }
 
       if (!signature || !verify(options, signature)) {
-        context.text('Unauthorized', 401);
+        return c.text('Unauthorized', 401);
-        return;
       }
 
       if (definition.trigger.schema) {
         const result = definition.trigger.schema.safeParse(options.payload);
 
         if (!result.success) {
-          context.text('Bad request', 400);
+          return c.text('Bad request', 400);
-          return;
         }
       }
 
@@ -149,8 +142,7 @@ export class LocalJobProvider extends BaseJobProvider {
         .catch(() => null);
 
       if (!backgroundJob) {
-        context.text('Job not found', 404);
+        return c.text('Job not found', 404);
-        return;
       }
 
       try {
@@ -189,8 +181,7 @@ export class LocalJobProvider extends BaseJobProvider {
             },
           });
 
-          context.text('Task exceeded retries', 500);
+          return c.text('Task exceeded retries', 500);
-          return;
         }
 
         backgroundJob = await prisma.backgroundJob.update({
@@ -210,7 +201,7 @@ export class LocalJobProvider extends BaseJobProvider {
         });
       }
 
-      context.text('OK', 200);
+      return c.text('OK', 200);
     };
   }
 

packages/lib/server-only/document/resend-document.tsx

@@ -134,7 +134,7 @@ export const resendDocument = async ({
         emailMessage =
           customEmail?.message ||
           i18n._(
-            msg`${user.name} on behalf of "${document.team.name}" has invited you to ${recipientActionVerb} the document "${document.title}".`,
+            msg`${user.name || user.email} on behalf of "${document.team.name}" has invited you to ${recipientActionVerb} the document "${document.title}".`,
           );
       }
 
@@ -164,20 +164,20 @@ export const resendDocument = async ({
         ? teamGlobalSettingsToBranding(document.team.teamGlobalSettings)
         : undefined;
 
+      const [html, text] = await Promise.all([
+        renderEmailWithI18N(template, {
+          lang: document.documentMeta?.language,
+          branding,
+        }),
+        renderEmailWithI18N(template, {
+          lang: document.documentMeta?.language,
+          branding,
+          plainText: true,
+        }),
+      ]);
+
       await prisma.$transaction(
         async (tx) => {
-          const [html, text] = await Promise.all([
-            renderEmailWithI18N(template, {
-              lang: document.documentMeta?.language,
-              branding,
-            }),
-            renderEmailWithI18N(template, {
-              lang: document.documentMeta?.language,
-              branding,
-              plainText: true,
-            }),
-          ]);
-
           await mailer.sendMail({
             to: {
               address: email,

packages/lib/server-only/user/verify-email.ts

@@ -2,15 +2,9 @@ import { DateTime } from 'luxon';
 
 import { prisma } from '@documenso/prisma';
 
+import { EMAIL_VERIFICATION_STATE } from '../../constants/email';
 import { jobsClient } from '../../jobs/client';
 
-export const EMAIL_VERIFICATION_STATE = {
-  NOT_FOUND: 'NOT_FOUND',
-  VERIFIED: 'VERIFIED',
-  EXPIRED: 'EXPIRED',
-  ALREADY_VERIFIED: 'ALREADY_VERIFIED',
-} as const;
-
 export type VerifyEmailProps = {
   token: string;
 };

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -477,6 +477,7 @@ export const SignaturePad = ({
       })}
     >
       <canvas
+        data-testid="signature-pad"
         ref={$el}
         className={cn(
           'relative block',