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

packages/database/migrations/20230915143725_remove_survey_status_archived/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - The values [archived] on the enum `SurveyStatus` will be removed. If these variants are still used in the database, this will fail.
+
+*/
+-- AlterEnum
+BEGIN;
+CREATE TYPE "SurveyStatus_new" AS ENUM ('draft', 'inProgress', 'paused', 'completed');
+ALTER TABLE "Survey" ALTER COLUMN "status" DROP DEFAULT;
+ALTER TABLE "Survey" ALTER COLUMN "status" TYPE "SurveyStatus_new" USING ("status"::text::"SurveyStatus_new");
+ALTER TYPE "SurveyStatus" RENAME TO "SurveyStatus_old";
+ALTER TYPE "SurveyStatus_new" RENAME TO "SurveyStatus";
+DROP TYPE "SurveyStatus_old";
+ALTER TABLE "Survey" ALTER COLUMN "status" SET DEFAULT 'draft';
+COMMIT;

packages/database/schema.prisma

@@ -152,7 +152,6 @@ enum SurveyStatus {
   inProgress
   paused
   completed
-  archived
 }
 
 enum DisplayStatus {

packages/types/surveys.ts

@@ -24,7 +24,7 @@ export interface Survey {
   redirectUrl: string | null;
   type: "web" | "email" | "link" | "mobile";
   environmentId: string;
-  status: "draft" | "inProgress" | "archived" | "paused" | "completed";
+  status: "draft" | "inProgress" | "paused" | "completed";
   recontactDays: number | null;
   questions: Question[];
   thankYouCard: ThankYouCard;
@@ -56,6 +56,6 @@ export interface SurveyNotificationData {
   responseCompletedLength: number;
   latestResponse: any;
   questions: Question[];
-  status: "draft" | "inProgress" | "archived" | "paused" | "completed";
+  status: "draft" | "inProgress" | "paused" | "completed";
   name: String;
 }

packages/types/v1/surveys.ts

@@ -240,7 +240,7 @@ export const ZSurvey = z.object({
   name: z.string(),
   type: z.enum(["web", "email", "link", "mobile"]),
   environmentId: z.string(),
-  status: z.enum(["draft", "inProgress", "archived", "paused", "completed"]),
+  status: z.enum(["draft", "inProgress", "paused", "completed"]),
   attributeFilters: z.array(ZSurveyAttributeFilter),
   displayOption: z.enum(["displayOnce", "displayMultiple", "respondMultiple"]),
   autoClose: z.union([z.number(), z.null()]),