refactor: improve layout of completed signing page (#2209)

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

@@ -84,6 +84,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
 
   const canSignUp = !isExistingUser && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true';
 
+  const canRedirectToFolder =
+    user && document.userId === user.id && document.folderId && document.team?.url;
+
+  const returnToHomePath = canRedirectToFolder
+    ? `/t/${document.team.url}/documents/f/${document.folderId}`
+    : '/';
+
   return {
     isDocumentAccessValid: true,
     canSignUp,
@@ -92,6 +99,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
     signatures,
     document,
     recipient,
+    returnToHomePath,
   };
 }
 
@@ -109,6 +117,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
     document,
     recipient,
     recipientEmail,
+    returnToHomePath,
   } = loaderData;
 
   if (!isDocumentAccessValid) {
@@ -118,7 +127,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
   return (
     <div
       className={cn(
-        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-20 xl:pt-28',
         { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
       )}
     >
@@ -202,8 +211,12 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               </p>
             ))}
 
-          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+          <div className="mt-8 flex w-full max-w-xs flex-col items-stretch gap-4 md:w-auto md:max-w-none md:flex-row md:items-center">
-            <DocumentShareButton documentId={document.id} token={recipient.token} />
+            <DocumentShareButton
+              documentId={document.id}
+              token={recipient.token}
+              className="w-full max-w-none md:flex-1"
+            />
 
             {isDocumentCompleted(document.status) && (
               <EnvelopeDownloadDialog
@@ -212,13 +225,21 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 envelopeItems={document.envelopeItems}
                 token={recipient?.token}
                 trigger={
-                  <Button type="button" variant="outline" className="flex-1">
+                  <Button type="button" variant="outline" className="flex-1 md:flex-initial">
                     <DownloadIcon className="mr-2 h-5 w-5" />
                     <Trans>Download</Trans>
                   </Button>
                 }
               />
             )}
+
+            {user && (
+              <Button asChild>
+                <Link to={returnToHomePath}>
+                  <Trans>Go Back Home</Trans>
+                </Link>
+              </Button>
+            )}
           </div>
         </div>
 
@@ -238,12 +259,6 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
             </div>
           )}
-
-          {user && (
-            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-2">
-              <Trans>Go Back Home</Trans>
-            </Link>
-          )}
         </div>
       </div>
 

packages/lib/server-only/document/get-document-by-token.ts

@@ -103,6 +103,7 @@ export const getDocumentAndSenderByToken = async ({
         select: {
           name: true,
           teamEmail: true,
+          url: true,
           teamGlobalSettings: {
             select: {
               brandingEnabled: true,

packages/ui/components/document/document-share-button.tsx

@@ -127,11 +127,11 @@ export const DocumentShareButton = ({
           <Button
             variant="outline"
             disabled={!token || !documentId}
-            className={cn('flex-1 text-[11px]', className)}
+            className={cn('h-11 w-full max-w-lg flex-1', className)}
             loading={isLoading}
           >
             {!isLoading && <Sparkles className="mr-2 h-5 w-5" />}
-            <Trans>Share Signature Card</Trans>
+            <Trans>Share</Trans>
           </Button>
         )}
       </DialogTrigger>