chore: rewrite survey not found page to new nextjs standards (#807)

* feat: nextjs custom 404 page notFound

* type survey type properly and return unused inactive screen states

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/SummaryHeader.tsx

@@ -99,7 +99,6 @@ const SummaryHeader = ({ surveyId, environmentId, survey, surveyBaseUrl }: Summa
                         {survey.status === "inProgress" && "In-progress"}
                         {survey.status === "paused" && "Paused"}
                         {survey.status === "completed" && "Completed"}
-                        {survey.status === "archived" && "Archived"}
                       </span>
                     </div>
                   </DropdownMenuSubTrigger>

apps/web/app/s/[surveyId]/SurveyInactive.tsx

@@ -1,26 +1,23 @@
-import React from "react";
-import { CheckCircleIcon, PauseCircleIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
-import footerLogo from "./footerlogo.svg";
+import { TSurveyClosedMessage } from "@formbricks/types/v1/surveys";
+import { Button } from "@formbricks/ui";
+import { CheckCircleIcon, PauseCircleIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
-import { Button } from "@formbricks/ui";
-import { TSurveyClosedMessage } from "@formbricks/types/v1/surveys";
+import footerLogo from "./footerlogo.svg";
 
 const SurveyInactive = ({
   status,
   surveyClosedMessage,
 }: {
-  status: string;
+  status: "paused" | "completed";
   surveyClosedMessage?: TSurveyClosedMessage | null;
 }) => {
   const icons = {
-    "not found": <QuestionMarkCircleIcon className="h-20 w-20" />,
     paused: <PauseCircleIcon className="h-20 w-20" />,
     completed: <CheckCircleIcon className="h-20 w-20" />,
   };
 
   const descriptions = {
-    "not found": "There is not survey with this ID.",
     paused: "This free & open-source survey is temporarily paused.",
     completed: "This free & open-source survey has been closed.",
   };

apps/web/app/s/[surveyId]/not-found.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import footerLogo from "./footerlogo.svg";
+import Image from "next/image";
+import { Button } from "@formbricks/ui";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="flex h-full flex-col items-center justify-between bg-gradient-to-br from-slate-200 to-slate-50 py-8 text-center">
+      <div></div>
+      <div className="flex flex-col items-center space-y-3 text-slate-300">
+        <QuestionMarkCircleIcon className="h-20 w-20" />,
+        <h1 className="text-4xl font-bold text-slate-800">Survey not found.</h1>
+        <p className="text-lg leading-10 text-gray-500">There is not survey with this ID.</p>
+        <Button variant="darkCTA" className="mt-2" href="https://formbricks.com">
+          Create your own
+        </Button>
+      </div>
+      <div>
+        <Link href="https://formbricks.com">
+          <Image src={footerLogo} alt="Brand logo" className="mx-auto w-40" />
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/web/app/s/[surveyId]/page.tsx

@@ -8,12 +8,13 @@ import { getProductByEnvironmentId } from "@formbricks/lib/services/product";
 import { getSurvey } from "@formbricks/lib/services/survey";
 import { getEmailVerificationStatus } from "./helpers";
 import { checkValidity } from "@/app/s/[surveyId]/prefilling";
+import { notFound } from "next/navigation";
 
 export default async function LinkSurveyPage({ params, searchParams }) {
   const survey = await getSurvey(params.surveyId);
 
-  if (!survey || survey.type !== "link") {
-    return <SurveyInactive status="not found" />;
+  if (!survey || survey.type !== "link" || survey.status === "draft") {
+    notFound();
   }
 
   // question pre filling: Check if the first question is prefilled and if it is valid