feat: free plan (#17)

melbourne-tech · Nov 17, 2024 · c9f9961 · c9f9961
1 parent 61202c9
commit c9f9961
Show file tree

Hide file tree

Showing 35 changed files with 705 additions and 6,492 deletions.
diff --git a/app/api/domains/route.ts b/app/api/domains/route.ts
diff --git a/components/add-domain.tsx b/components/add-domain.tsx
@@ -7,7 +7,6 @@ import { Button } from '~/components/ui/button'
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -16,7 +15,6 @@ import {
 import { Input } from '~/components/ui/input'
 import { useToast } from '~/components/ui/use-toast'
 import { useDomainAddMutation } from '~/lib/data/domain-name-add-mutation'
-import { ValidationError } from '~/lib/errors'
 
 const formSchema = z.object({
   domainName: z.string().min(1, 'Domain must not be empty'),
@@ -42,13 +40,6 @@ const AddDomain = () => {
         description: 'Your domain has been added.',
       })
     } catch (error) {
-      if (error instanceof ValidationError) {
-        Object.entries(error.errors.fieldErrors).forEach(([key, value]) => {
-          form.setError(key as any, { message: value?.[0] as any })
-        })
-        return
-      }
-
       toast({
         title: 'Something went wrong',
         description: error.message,
@@ -69,7 +60,7 @@ const AddDomain = () => {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-4 shadow-lg p-4 rounded-lg"
+        className="flex gap-4 shadow-lg p-4 rounded-lg border border-gray-200"
       >
         <FormField
           control={form.control}
@@ -81,7 +72,6 @@ const AddDomain = () => {
                 <Input placeholder="yourdomain.com" {...field} />
               </FormControl>
               <FormMessage />
-              <FormDescription>Do not include www.</FormDescription>
             </FormItem>
           )}
         />

diff --git a/components/checkout-form.tsx b/components/checkout-form.tsx
@@ -26,7 +26,9 @@ const CheckoutForm = ({ planType }: CheckoutFormProps) => {
       <EmbeddedCheckoutProvider
         stripe={stripePromise}
         options={useMemo(
-          () => ({ fetchClientSecret, onComplete: console.log }),
+          () => ({
+            fetchClientSecret,
+          }),
           [fetchClientSecret]
         )}
       >

diff --git a/components/domain-card.tsx b/components/domain-card.tsx
@@ -56,9 +56,9 @@ const getStatusDetails = (status: Domain['status']) => {
 }
 
 const DomainCard = ({ domain }: DomainCardProps) => {
-  const { mutate: updateDomain, isLoading: isUpdatingDomain } =
+  const { mutate: updateDomain, isPending: isUpdatingDomain } =
     useDomainUpdateMutation()
-  const { mutate: updateWhois, isLoading: isUpdatingWhois } =
+  const { mutate: updateWhois, isPending: isUpdatingWhois } =
     useUpdateWhoisMutation()
 
   const expiryDate = domain.expires_at !== null && new Date(domain.expires_at)

diff --git a/components/domain-settings.tsx b/components/domain-settings.tsx
@@ -12,9 +12,9 @@ interface DomainSettingsProps {
 }
 
 const DomainSettings = ({ domain }: DomainSettingsProps) => {
-  const { mutate: updateDomain, isLoading: isUpdatingDomain } =
+  const { mutate: updateDomain, isPending: isUpdatingDomain } =
     useDomainUpdateMutation()
-  const { mutate: deleteDomain, isLoading: isDeletingDomain } =
+  const { mutate: deleteDomain, isPending: isDeletingDomain } =
     useDomainDeleteMutation()
 
   return (

diff --git a/components/home/hero.tsx b/components/home/hero.tsx
@@ -1,7 +1,12 @@
-import { ArrowRight } from 'lucide-react'
+import {
+  ArrowRight,
+  BellIcon,
+  DollarSignIcon,
+  EyeIcon,
+  PackageIcon,
+} from 'lucide-react'
 import Link from 'next/link'
 import { Button } from '~/components/ui/button'
-import { Checkmark } from '~/components/ui/checkmark'
 
 const Hero = () => {
   return (
@@ -33,7 +38,7 @@ const Hero = () => {
       <div className="mx-auto max-w-7xl px-6 pb-24 pt-10">
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
           <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-            Your toolkit for side project domains
+            Get the domain <i>you want</i> for your next side project.
           </h1>
           <p className="mt-6 text-lg leading-8 text-gray-600">
             Get notified when your dream domain expires, create simple sales
@@ -42,24 +47,32 @@ const Hero = () => {
 
           <div className="flex flex-col gap-2 mt-4">
             <div className="flex gap-2 items-center">
-              <Checkmark />
+              <span className="bg-blue-400/75 rounded-full text-blue-800 p-1">
+                <BellIcon size={18} />
+              </span>
               <span className="font-medium">Email Domain expiry alerts</span>
             </div>
 
             <div className="flex gap-2 items-center">
-              <Checkmark />
+              <span className="bg-blue-400/75 rounded-full text-blue-800 p-1">
+                <DollarSignIcon size={18} />
+              </span>
               <span className="font-medium">
                 For sale pages for your unused domains
               </span>
             </div>
 
             <div className="flex gap-2 items-center">
-              <Checkmark />
+              <span className="bg-blue-400/75 rounded-full text-blue-800 p-1">
+                <EyeIcon size={18} />
+              </span>
               <span className="font-medium">Easy Whois lookup & tracking</span>
             </div>
 
             <div className="flex gap-2 items-center">
-              <Checkmark />
+              <span className="bg-blue-400/75 rounded-full text-blue-800 p-1">
+                <PackageIcon size={18} />
+              </span>
               <span className="font-medium">Open source</span>
             </div>
           </div>

diff --git a/components/home/support.tsx b/components/home/support.tsx
@@ -2,7 +2,7 @@ import { MailIcon } from 'lucide-react'
 
 const Support = () => {
   return (
-    <div className="mt-16 sm:mt-20 flex flex-col gap-4 mx-auto max-w-2xl text-center lg:max-w-4xl">
+    <div className="mt-16 sm:mt-20 px-4 flex flex-col gap-4 mx-auto max-w-2xl text-center lg:max-w-4xl">
       <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
         Any questions?
       </h2>
@@ -17,7 +17,7 @@ const Support = () => {
         className="flex gap-2 items-center justify-center text-blue-600 group-hover:underline group-hover:text-blue-700 transition-colors"
       >
         <MailIcon size={18} />
-        <span>support@side.domains</span>
+        <span>support@melbournetech.com</span>
       </a>
     </div>
   )

diff --git a/components/layouts/AppLayout.tsx b/components/layouts/AppLayout.tsx
@@ -1,58 +1,70 @@
 import { CircleFadingArrowUp } from 'lucide-react'
+import Head from 'next/head'
 import Link from 'next/link'
 import { PropsWithChildren } from 'react'
 import { useSignOutMutation } from '~/lib/data/sign-out-mutation'
 import { useUserDataQuery } from '~/lib/data/user-data-query'
+import Footer from '../footer'
 import Logo from '../logo'
 import { Button } from '../ui/button'
-import Footer from '../footer'
 
 export type AppLayoutProps = {
+  title: string
   showSignOut?: boolean
 }
 
 const AppLayout = ({
+  title,
   children,
   showSignOut = true,
 }: PropsWithChildren<AppLayoutProps>) => {
   const { isSuccess, data } = useUserDataQuery()
-  const { mutate: signOut, isLoading } = useSignOutMutation()
+  const { mutate: signOut, isPending } = useSignOutMutation()
 
   return (
-    <div className="h-full flex flex-col">
-      <div className="border-b">
-        <div className="flex h-16 justify-between items-center px-4">
-          <Logo />
-
-          <div className="flex items-center gap-2">
-            {isSuccess && data.isSubscribed && !data.isLifetime && (
-              <Button asChild variant="secondary" size="sm">
-                <Link href="/upgrade">
-                  <CircleFadingArrowUp size={16} />
-                  Upgrade to Lifetime
-                </Link>
-              </Button>
-            )}
-
-            {showSignOut && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => signOut()}
-                isLoading={isLoading}
-                disabled={isLoading}
-              >
-                Sign Out
-              </Button>
-            )}
+    <>
+      <Head>
+        <title>{title} | Side Domains</title>
+      </Head>
+      <div className="h-full flex flex-col">
+        <header className="bg-white border-b sticky top-0 z-30">
+          <div className="flex h-16 justify-between items-center px-4">
+            <Logo />
+
+            <div className="flex items-center gap-2">
+              {isSuccess && !data.isLifetime && (
+                <Button
+                  asChild
+                  variant={data.isSubscribed ? 'secondary' : 'default'}
+                  size="sm"
+                >
+                  <Link href="/upgrade">
+                    <CircleFadingArrowUp size={16} />
+                    {data.isSubscribed ? 'Upgrade to Lifetime' : 'Upgrade'}
+                  </Link>
+                </Button>
+              )}
+
+              {showSignOut && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => signOut()}
+                  isLoading={isPending}
+                  disabled={isPending}
+                >
+                  Sign Out
+                </Button>
+              )}
+            </div>
           </div>
-        </div>
-      </div>
+        </header>
 
-      <main className="flex-1 mx-auto max-w-5xl w-full px-4">{children}</main>
+        <main className="flex-1 mx-auto max-w-5xl w-full px-4">{children}</main>
 
-      <Footer />
-    </div>
+        <Footer />
+      </div>
+    </>
   )
 }