feat: update ui

Signed-off-by: Adithya Krishna <adithya@documenso.com>

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -1,7 +1,10 @@
 import type { Metadata } from 'next';
 
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+
 import type { DocumentsPageViewProps } from './documents-page-view';
 import { DocumentsPageView } from './documents-page-view';
+import { PublicProfileIntro } from './username-claim/public-profile-intro';
 
 export type DocumentsPageProps = {
   searchParams?: DocumentsPageViewProps['searchParams'];
@@ -11,6 +14,12 @@ export const metadata: Metadata = {
   title: 'Documents',
 };
 
-export default function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  return <DocumentsPageView searchParams={searchParams} />;
+export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  const { user } = await getRequiredServerComponentSession();
+  return (
+    <>
+      <PublicProfileIntro user={user} />
+      <DocumentsPageView searchParams={searchParams} />
+    </>
+  );
 }

apps/web/src/app/(dashboard)/documents/username-claim/public-profile-intro.tsx

@@ -0,0 +1,225 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { BadgeCheck, File } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import Lucas from '@documenso/assets/images/Lucas.png';
+import Timur from '@documenso/assets/images/Timur.png';
+import type { User } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardHeader } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPublicProfileFormSchema = z.object({
+  profileURL: z.string().trim().min(1, { message: 'Please enter a valid URL slug.' }),
+});
+
+export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
+
+export type PublicProfileIntroProps = {
+  user: User;
+};
+
+export const PublicProfileIntro = ({ user }: PublicProfileIntroProps) => {
+  const form = useForm<TPublicProfileFormSchema>({
+    values: {
+      profileURL: user.profileURL || '',
+    },
+    resolver: zodResolver(ZPublicProfileFormSchema),
+  });
+  const textRef = useRef<HTMLSpanElement>(null);
+
+  const { toast } = useToast();
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
+  const isSaving = form.formState.isSubmitting;
+
+  const isProfileURLClaimed = user.profileURL ? false : true;
+  const [showClaimingDialog, setShowClaimingDialog] = useState(isProfileURLClaimed);
+  const [showClaimedDialog, setShowClaimedDialog] = useState(false);
+
+  const onFormSubmit = async ({ profileURL }: TPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        profileURL,
+      });
+      setShowClaimingDialog(false);
+      setShowClaimedDialog(true);
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to save your details. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={showClaimingDialog} onOpenChange={setShowClaimingDialog}>
+        <DialogContent position="center" className="pb-4">
+          <DialogHeader>
+            <DialogTitle className="font-semi-bold text-center text-xl">
+              Introducing public profile!
+            </DialogTitle>
+            <DialogDescription className="text-center">
+              Reserve your Documenso public profile username
+            </DialogDescription>
+          </DialogHeader>
+
+          <Card className="relative px-6 py-6">
+            <Card className="flex flex-col items-center px-6 py-6">
+              <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                <span>documenso.com/u/timur</span>
+              </code>
+              <Avatar className="dark:border-border mt-2 h-12 w-12 border-2 border-solid border-white">
+                <AvatarImage className="AvatarImage" src={Timur.src} alt="Timur" />
+                <AvatarFallback className="text-xs text-gray-400">Timur</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-row gap-x-2">
+                Timur Ercan <BadgeCheck fill="#A2E771" />
+              </div>
+              <span className="text-center">
+                Hey I’m Timur <br /> Pick any of the following agreements below and start signing to
+                get started
+              </span>
+            </Card>
+            <Card className="mt-2 items-center">
+              <CardHeader className="p-2">Documents</CardHeader>
+              <hr className="mb-2" />
+              <div className="mb-2 flex flex-row items-center justify-between">
+                <div className="flex flex-row items-center gap-x-2">
+                  <File className="ml-3" />
+                  <div className="flex flex-col">
+                    <span className="text-md">NDA.pdf</span>
+                    <span className="text-muted-foregroun mt-0.5 text-xs">
+                      Like to discuss about my work?
+                    </span>
+                  </div>
+                </div>
+                <Button className="mr-3" variant="default">
+                  Sign
+                </Button>
+              </div>
+            </Card>
+          </Card>
+
+          <Form {...form}>
+            <form className={cn('flex w-full flex-col')} onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset className="flex w-full flex-col gap-y-4" disabled={isSaving}>
+                <FormField
+                  control={form.control}
+                  name="profileURL"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Public profile URL</FormLabel>
+                      <FormControl>
+                        <>
+                          <Input type="text" className="mb-2 mt-2" {...field} />
+                          <div className="mt-2">
+                            <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                              <span ref={textRef} id="textToCopy">
+                                documenso.com/u/
+                              </span>
+                            </code>
+                          </div>
+                        </>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+
+              <div className="mt-4 text-center">
+                <Button type="submit" loading={isSaving}>
+                  Claim your username
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={showClaimedDialog} onOpenChange={setShowClaimedDialog}>
+        <DialogContent position="center" className="pb-4">
+          <DialogHeader>
+            <DialogTitle className="font-semi-bold text-center text-xl">All set!</DialogTitle>
+            <DialogDescription className="text-center">
+              We will let you know as soon as this feature is launched
+            </DialogDescription>
+          </DialogHeader>
+
+          <Card className="relative px-6 py-6">
+            <Card className="flex flex-col items-center px-6 py-6">
+              <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                <span>documenso.com/u/lucas</span>
+              </code>
+              <Avatar className="dark:border-border mt-2 h-12 w-12 border-2 border-solid border-white">
+                <AvatarImage className="AvatarImage" src={Lucas.src} alt="Lucas" />
+                <AvatarFallback className="text-xs text-gray-400">Timur</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-row gap-x-2">
+                Lucas Smith <BadgeCheck fill="#A2E771" />
+              </div>
+              <div className="flex inline-flex h-full w-full flex-col items-center justify-center gap-3 py-2">
+                <Skeleton className="w-75 h-4 animate-none rounded-full" />
+                <Skeleton className="w-50 h-4 animate-none rounded-full" />
+              </div>
+            </Card>
+            <Card className="mt-2 items-center">
+              <CardHeader className="p-2">Documents</CardHeader>
+              <hr className="mb-2" />
+              <div className="mb-2 flex flex-row items-center justify-between">
+                <div className="flex flex-row items-center gap-x-2">
+                  <File className="ml-3" />
+                  <div className="flex flex-col">
+                    <span className="text-md">NDA.pdf</span>
+                    <span className="text-muted-foregroun mt-0.5 text-xs">
+                      Like to discuss about my work?
+                    </span>
+                  </div>
+                </div>
+                <Button className="mr-3" variant="default">
+                  Sign
+                </Button>
+              </div>
+            </Card>
+          </Card>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -1,30 +1,30 @@
 import * as React from 'react';
 
 import type { Metadata } from 'next';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { Switch } from '@documenso/ui/primitives/switch';
+import Link from 'next/link';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
-import { PublicProfileForm } from '~/components/forms/public-profile';
 
 export const metadata: Metadata = {
   title: 'Public Profile',
 };
 
-export default async function PublicProfilePage() {
-  const { user } = await getRequiredServerComponentSession();
-
+export default function PublicProfilePage() {
   return (
     <>
       <SettingsHeader
         title="Public profile"
-        subtitle="You can choose to enable/disable your profile for public view"
-        titleChildren={<Switch></Switch>}
+        subtitle=""
         className="max-w-xl"
+        titleChildren={
+          <Link
+            href="#"
+            className="bg-primary dark:text-background ml-2 rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Coming soon!
+          </Link>
+        }
       />
-
-      <PublicProfileForm user={user} className="max-w-xl" />
     </>
   );
 }

apps/web/src/app/(unauthenticated)/signin/layout.tsx

@@ -20,7 +20,7 @@ export default function SignInLayout({ children }: SignInLayoutProps) {
           <Image
             src={backgroundPattern}
             alt="background pattern"
-            className="flex flex-col overflow-hidden dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            className="flex min-h-screen flex-col overflow-hidden dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
           />
         </div>
         <div className="relative flex w-full max-w-md items-center gap-x-24">

apps/web/src/app/(unauthenticated)/signup/layout.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Card } from '@documenso/ui/primitives/card';
+
+import ClaimUsernameCard from '../../../components/(dashboard)/claim-username-card/claim-username-card';
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type SignUpLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SignUpLayout({ children }: SignUpLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 flex flex-col items-center justify-center overflow-hidden px-6 py-16 md:p-10 lg:p-[7.0rem]">
+        <div className="flex w-full items-center gap-x-8">
+          <ClaimUsernameCard />
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -9,8 +9,6 @@ import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt'
 
 import { SignUpForm } from '~/components/forms/signup';
 
-import SignUpLayout from '../signup-layout';
-
 export const metadata: Metadata = {
   title: 'Sign Up',
 };
@@ -36,28 +34,26 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
   }
 
   return (
-    <SignUpLayout>
-      <>
-        <h1 className="text-3xl font-semibold">Create a new account</h1>
+    <>
+      <h1 className="text-3xl font-semibold">Create a new account</h1>
 
-        <p className="text-muted-foreground/60 mt-2 text-sm">
-          Create your account and start using state-of-the-art document signing. Open and beautiful
-          signing is within your grasp.
-        </p>
+      <p className="text-muted-foreground/60 mt-2 text-sm">
+        Create your account and start using state-of-the-art document signing. Open and beautiful
+        signing is within your grasp.
+      </p>
 
-        <SignUpForm
-          className="mt-1"
-          initialEmail={email || undefined}
-          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
-        />
+      <SignUpForm
+        className="mt-1"
+        initialEmail={email || undefined}
+        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      />
 
-        <p className="text-muted-foreground mt-6 text-center text-sm">
-          Already have an account?{' '}
-          <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-            Sign in instead
-          </Link>
-        </p>
-      </>
-    </SignUpLayout>
+      <p className="text-muted-foreground mt-6 text-center text-sm">
+        Already have an account?{' '}
+        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+          Sign in instead
+        </Link>
+      </p>
+    </>
   );
 }