feat: update ui

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

apps/web/src/components/(dashboard)/claim-username-card/claim-username-card.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+
+import Image from 'next/image';
+
+import { BadgeCheck, File } from 'lucide-react';
+
+import Timur from '@documenso/assets/images/Timur.png';
+import backgroundPattern from '@documenso/assets/images/background-blog-og.png';
+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, CardFooter, CardHeader } from '@documenso/ui/primitives/card';
+
+export default function ClaimUsernameCard() {
+  const onSignUpClick = () => {};
+  return (
+    <div className="relative">
+      <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="dark:brightness-95 dark:contrast-[100%] dark:invert"
+        />
+      </div>
+      <Card className={cn('relative px-16 py-16')}>
+        <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>
+          <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>
+        <CardFooter className="mt-20 justify-center">
+          <Button
+            type="button"
+            variant="outline"
+            className="rounded-full bg-transparent backdrop-blur-sm"
+            onClick={onSignUpClick}
+          >
+            Claim Community Plan
+            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+              -80%
+            </span>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -92,7 +92,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Link>
       )}
 
-      <Link href="/settings/public-profile">
+      <Link href="#">
         <Button
           variant="ghost"
           className={cn(
@@ -102,6 +102,12 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         >
           <Globe2 className="mr-2 h-5 w-5" />
           Public profile
+          <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>
         </Button>
       </Link>
     </div>

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -95,7 +95,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Link>
       )}
 
-      <Link href="/settings/public-profile">
+      <Link href="#">
         <Button
           variant="ghost"
           className={cn(
@@ -105,6 +105,12 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         >
           <Globe2 className="mr-2 h-5 w-5" />
           Public profile
+          <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>
         </Button>
       </Link>
     </div>

apps/web/src/components/forms/public-profile.tsx

@@ -1,165 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-
-import { useRouter } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Copy } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-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 { Button } from '@documenso/ui/primitives/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { Textarea } from '@documenso/ui/primitives/textarea';
-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.' }),
-  profileBio: z
-    .string()
-    .max(256, { message: 'Profile bio must not exceed 256 characters' })
-    .optional(),
-});
-
-export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
-
-export type PublicProfileFormProps = {
-  className?: string;
-  user: User;
-};
-
-export const PublicProfileForm = ({ user, className }: PublicProfileFormProps) => {
-  const textRef = useRef<HTMLSpanElement>(null);
-
-  const { toast } = useToast();
-  const router = useRouter();
-
-  const form = useForm<TPublicProfileFormSchema>({
-    values: {
-      profileURL: user.profileURL || '',
-    },
-    resolver: zodResolver(ZPublicProfileFormSchema),
-  });
-
-  const isSaving = form.formState.isSubmitting;
-
-  const { mutateAsync: updatePublicProfile, data: profileURL } =
-    trpc.profile.updatePublicProfile.useMutation();
-
-  const copyTextToClipboard = async () => {
-    if (textRef.current) {
-      try {
-        await navigator.clipboard.writeText(textRef.current.textContent || '');
-      } catch (err) {
-        console.log('Failed to copy: ', err);
-      }
-    }
-  };
-
-  const onFormSubmit = async ({ profileURL, profileBio }: TPublicProfileFormSchema) => {
-    try {
-      await updatePublicProfile({
-        profileURL,
-        profileBio: profileBio || '',
-      });
-
-      toast({
-        title: 'Public profile updated',
-        description: 'Your public profile has been updated successfully.',
-        duration: 5000,
-      });
-
-      router.refresh();
-    } 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 (
-    <Form {...form}>
-      <form
-        className={(cn('flex w-full flex-col gap-y-4'), className)}
-        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} />
-                    {profileURL && (
-                      <code className="bg-muted rounded-md px-1 py-1 text-sm">
-                        <span ref={textRef} id="textToCopy">
-                          {profileURL}
-                        </span>
-                        <Button
-                          className="pointer-events-none w-12 px-0"
-                          onClick={copyTextToClipboard}
-                          variant="ghost"
-                          asChild
-                        >
-                          <Copy className="h-8 w-8" />
-                        </Button>
-                      </code>
-                    )}
-                  </>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="profileBio"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Bio</FormLabel>
-                <FormControl>
-                  <Textarea className="mt-2" placeholder="Write about yourself..." {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </fieldset>
-
-        <div className="ml-auto mt-4">
-          <Button type="submit" loading={isSaving}>
-            {isSaving ? 'Saving changes...' : 'Save changes'}
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};

apps/web/src/components/forms/signup.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
+import { useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
@@ -58,6 +59,9 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
   const { toast } = useToast();
   const analytics = useAnalytics();
   const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const src = searchParams?.get('src') ?? null;
 
   const form = useForm<TSignUpFormSchema>({
     values: {
@@ -89,6 +93,7 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
       analytics.capture('App: User Sign Up', {
         email,
         timestamp: new Date().toISOString(),
+        custom_campaign_params: { src },
       });
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
@@ -133,7 +138,7 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             name="name"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Name</FormLabel>
+                <FormLabel>Full Name</FormLabel>
                 <FormControl>
                   <Input type="text" {...field} />
                 </FormControl>
@@ -147,7 +152,7 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Email</FormLabel>
+                <FormLabel>Email Address</FormLabel>
                 <FormControl>
                   <Input type="email" {...field} />
                 </FormControl>