From 5a9401bd2886903ce1921622ab5a7e8087f91e03 Mon Sep 17 00:00:00 2001
From: Peer_Rich <peeroke@gmail.com>
Date: Fri, 10 Sep 2021 23:46:26 +0200
Subject: [PATCH] added 404 for event types (#604)

* added 404 for event types

* removed link for 404 event types

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 pages/404.tsx | 71 +++++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/pages/404.tsx b/pages/404.tsx
index 51c586ef..a2f79a0c 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -16,7 +16,7 @@ const links = [
     title: "API Reference",
     description: "A complete API reference for our libraries",
     icon: CodeIcon,
-    href: "https://developer.calendso.com/api",
+    href: "https://api.docs.calendso.com",
   },
   {
     title: "Blog",
@@ -30,6 +30,8 @@ export default function Custom404() {
   const router = useRouter();
   const username = router.asPath.replace("%20", "-");
 
+  const isEventType404 = router.asPath.includes("/event-types");
+
   return (
     <>
       <HeadSeo
@@ -47,39 +49,48 @@ export default function Custom404() {
             <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
               This page does not exist.
             </h1>
-            <a href="https://checkout.calendso.com" className="inline-block mt-2 text-lg ">
-              The username <strong className="text-blue-500">calendso.com{username}</strong> is still
-              available. <span className="text-blue-500">Register now</span>.
-            </a>
+            {isEventType404 ? (
+              <span className="inline-block mt-2 text-lg ">
+                Check for spelling mistakes or go back to the previous page.
+              </span>
+            ) : (
+              <a href="https://checkout.calendso.com" className="inline-block mt-2 text-lg ">
+                The username <strong className="text-blue-500">calendso.com{username}</strong> is still
+                available. <span className="text-blue-500">Register now</span>.
+              </a>
+            )}
           </div>
           <div className="mt-12">
             <h2 className="text-sm font-semibold text-gray-500 tracking-wide uppercase">Popular pages</h2>
-
-            <ul role="list" className="mt-4">
-              <li className="border-2 border-green-500 px-4 py-2">
-                <a href="https://checkout.calendso.com" className="relative py-6 flex items-start space-x-4">
-                  <div className="flex-shrink-0">
-                    <span className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-50">
-                      <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
-                    </span>
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <h3 className="text-base font-medium text-gray-900">
-                      <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
-                        <span className="focus:outline-none">
-                          <span className="absolute inset-0" aria-hidden="true" />
-                          Register <strong className="text-green-500">{username}</strong>
-                        </span>
+            {!isEventType404 && (
+              <ul role="list" className="mt-4">
+                <li className="border-2 border-green-500 px-4 py-2">
+                  <a
+                    href="https://checkout.calendso.com"
+                    className="relative py-6 flex items-start space-x-4">
+                    <div className="flex-shrink-0">
+                      <span className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-50">
+                        <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
                       </span>
-                    </h3>
-                    <p className="text-base text-gray-500">Claim your username and schedule events</p>
-                  </div>
-                  <div className="flex-shrink-0 self-center">
-                    <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                  </div>
-                </a>
-              </li>
-            </ul>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="text-base font-medium text-gray-900">
+                        <span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
+                          <span className="focus:outline-none">
+                            <span className="absolute inset-0" aria-hidden="true" />
+                            Register <strong className="text-green-500">{username}</strong>
+                          </span>
+                        </span>
+                      </h3>
+                      <p className="text-base text-gray-500">Claim your username and schedule events</p>
+                    </div>
+                    <div className="flex-shrink-0 self-center">
+                      <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            )}
 
             <ul role="list" className="mt-4 border-gray-200 divide-y divide-gray-200">
               {links.map((link, linkIdx) => (