From d95e26d55cb528e0fbf07595dad742bb8cc8fdf8 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 20 Dec 2021 09:11:39 +0000
Subject: [PATCH] fixes 404 for subpaths, adds prefilled url to sign up form
 (#1355)

* fixes 404 for subpaths, adds prefilled url to sign up form

* Added tweak to support BASE_URL for self hosted (#1356)

* Added tweak to support BASE_URL for self hosted (without linking to our signup)
* also hides the signup popular page

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 pages/404.tsx | 73 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/pages/404.tsx b/pages/404.tsx
index 0c3f2430b3dc2a..e14f5b46500dc0 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -26,7 +26,7 @@ export default function Custom404() {
       title: t("api_reference"),
       description: t("api_reference_description"),
       icon: CodeIcon,
-      href: "https://api.docs.cal.com",
+      href: "https://developer.cal.com",
     },
     {
       title: t("blog"),
@@ -36,7 +36,7 @@ export default function Custom404() {
     },
   ];
 
-  const isEventType404 = router.asPath.includes("/event-types");
+  const isSubpage = router.asPath.includes("/", 2);
 
   return (
     <>
@@ -48,36 +48,49 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="bg-white min-h-screen px-4">
-        <main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
+      <div className="min-h-screen px-4 bg-white">
+        <main className="max-w-xl pt-16 pb-6 mx-auto sm:pt-24">
           <div className="text-center">
-            <p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
-            <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+            <p className="text-sm font-semibold tracking-wide text-black uppercase">404 error</p>
+            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 font-cal sm:text-5xl">
               {t("page_doesnt_exist")}
             </h1>
-            {isEventType404 ? (
+            {isSubpage ? (
               <span className="inline-block mt-2 text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
-            ) : (
-              <a href="https://cal.com/signup" className="inline-block mt-2 text-lg ">
+            ) : process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" ? (
+              <a
+                href={"https://cal.com/signup?username=" + username.replace("/", "")}
+                className="inline-block mt-2 text-lg ">
                 {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
                 {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
               </a>
+            ) : (
+              <>
+                {t("the_username")}{" "}
+                <strong className="text-green-500">
+                  {new URL(process.env.NEXT_PUBLIC_BASE_URL || "").hostname}
+                  {username}
+                </strong>{" "}
+                {t("is_still_available")}
+              </>
             )}
           </div>
           <div className="mt-12">
-            <h2 className="text-sm font-semibold text-gray-500 tracking-wide uppercase">
+            <h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
               {t("popular_pages")}
             </h2>
-            {!isEventType404 && (
+            {!isSubpage && process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" && (
               <ul role="list" className="mt-4">
-                <li className="border-2 border-green-500 px-4 py-2">
-                  <a href="https://cal.com/signup" className="relative py-6 flex items-start space-x-4">
+                <li className="px-4 py-2 border-2 border-green-500">
+                  <a
+                    href={"https://cal.com/signup?username=" + username.replace("/", "")}
+                    className="relative flex items-start py-6 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 className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
+                        <CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
                       </span>
                     </div>
-                    <div className="min-w-0 flex-1">
+                    <div className="flex-1 min-w-0">
                       <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">
@@ -88,8 +101,8 @@ export default function Custom404() {
                       </h3>
                       <p className="text-base text-gray-500">{t("claim_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 className="self-center flex-shrink-0">
+                      <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
                     </div>
                   </a>
                 </li>
@@ -100,13 +113,13 @@ export default function Custom404() {
               {links.map((link, linkIdx) => (
                 <li key={linkIdx} className="px-4 py-2">
                   <Link href={link.href}>
-                    <a className="relative py-6 flex items-start space-x-4">
+                    <a className="relative flex items-start py-6 space-x-4">
                       <div className="flex-shrink-0">
-                        <span className="flex items-center justify-center h-12 w-12 rounded-lg bg-gray-50">
-                          <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                        <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
+                          <link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
                         </span>
                       </div>
-                      <div className="min-w-0 flex-1">
+                      <div className="flex-1 min-w-0">
                         <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="absolute inset-0" aria-hidden="true" />
@@ -115,18 +128,18 @@ export default function Custom404() {
                         </h3>
                         <p className="text-base text-gray-500">{link.description}</p>
                       </div>
-                      <div className="flex-shrink-0 self-center">
-                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                      <div className="self-center flex-shrink-0">
+                        <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </Link>
                 </li>
               ))}
               <li className="px-4 py-2">
-                <a href="https://cal.com/slack" className="relative py-6 flex items-start space-x-4">
+                <a href="https://cal.com/slack" className="relative flex items-start py-6 space-x-4">
                   <div className="flex-shrink-0">
-                    <span className="flex items-center justify-center h-12 w-12 rounded-lg bg-gray-50">
-                      <svg viewBox="0 0 2447.6 2452.5" className="h-6 w-6" xmlns="http://www.w3.org/2000/svg">
+                    <span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
+                      <svg viewBox="0 0 2447.6 2452.5" className="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
                         <g clipRule="evenodd" fillRule="evenodd">
                           <path
                             d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
@@ -144,7 +157,7 @@ export default function Custom404() {
                       </svg>
                     </span>
                   </div>
-                  <div className="min-w-0 flex-1">
+                  <div className="flex-1 min-w-0">
                     <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="absolute inset-0" aria-hidden="true" />
@@ -153,8 +166,8 @@ export default function Custom404() {
                     </h3>
                     <p className="text-base text-gray-500">{t("join_our_community")}</p>
                   </div>
-                  <div className="flex-shrink-0 self-center">
-                    <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                  <div className="self-center flex-shrink-0">
+                    <ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
                   </div>
                 </a>
               </li>