From 96344d61239cb18e75d1e0c040a684b31c989bd6 Mon Sep 17 00:00:00 2001 From: Moritz Rengert <42251569+moritzrengert@users.noreply.github.com> Date: Tue, 23 May 2023 13:35:13 +0200 Subject: [PATCH] Add new Pause/Not Found screens for surveys (#285) * Add new screens for surveys with different status (not found, paused, completed) --------- Co-authored-by: Johannes --- .../surveys/[surveyId]/edit/WhoToSendCard.tsx | 16 +++- apps/web/app/s/[surveyId]/SurveyInactive.tsx | 41 ++++++++++ apps/web/app/s/[surveyId]/SurveyPage.tsx | 13 ++-- apps/web/app/s/[surveyId]/footerlogo.svg | 76 +++++++++++++++++++ .../shared/SurveyStatusDropdown.tsx | 2 +- .../shared/SurveyStatusIndicator.tsx | 2 +- .../api/v1/client/surveys/[surveyId]/index.ts | 9 ++- 7 files changed, 149 insertions(+), 10 deletions(-) create mode 100644 apps/web/app/s/[surveyId]/SurveyInactive.tsx create mode 100644 apps/web/app/s/[surveyId]/footerlogo.svg diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx index 4347f12a4d..04c752e204 100644 --- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx +++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/WhoToSendCard.tsx @@ -4,7 +4,16 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner"; import { useAttributeClasses } from "@/lib/attributeClasses/attributeClasses"; import { cn } from "@formbricks/lib/cn"; import type { Survey } from "@formbricks/types/surveys"; -import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui"; +import { + Badge, + Button, + Input, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@formbricks/ui"; import { CheckCircleIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/solid"; import * as Collapsible from "@radix-ui/react-collapsible"; import { useEffect, useState } from "react"; /* */ @@ -98,6 +107,11 @@ export default function WhoToSendCard({ environmentId, localSurvey, setLocalSurv Pre-segment your users with attributes filters.

+ {localSurvey.type === "link" && ( +
+ +
+ )} diff --git a/apps/web/app/s/[surveyId]/SurveyInactive.tsx b/apps/web/app/s/[surveyId]/SurveyInactive.tsx new file mode 100644 index 0000000000..1f807740eb --- /dev/null +++ b/apps/web/app/s/[surveyId]/SurveyInactive.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { CheckCircleIcon, PauseCircleIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/solid"; +import footerLogo from "./footerlogo.svg"; +import Image from "next/image"; +import Link from "next/link"; +import { Button } from "@formbricks/ui"; + +const SurveyInactive = ({ status }) => { + const icons = { + "not found": , + paused: , + completed: , + }; + + 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.", + }; + + return ( +
+
+
+ {icons[status]} +

Survey {status}.

+

{descriptions[status]}

+ +
+
+ + Brand logo + +
+
+ ); +}; + +export default SurveyInactive; diff --git a/apps/web/app/s/[surveyId]/SurveyPage.tsx b/apps/web/app/s/[surveyId]/SurveyPage.tsx index 546441d63c..a4db190d57 100644 --- a/apps/web/app/s/[surveyId]/SurveyPage.tsx +++ b/apps/web/app/s/[surveyId]/SurveyPage.tsx @@ -1,6 +1,7 @@ "use client"; import LinkSurvey from "@/app/s/[surveyId]/LinkSurvey"; +import SurveyInactive from "@/app/s/[surveyId]/SurveyInactive"; import LegalFooter from "@/components/shared/LegalFooter"; import LoadingSpinner from "@/components/shared/LoadingSpinner"; import { useLinkSurvey } from "@/lib/linkSurvey/linkSurvey"; @@ -20,12 +21,12 @@ export default function SurveyPage({ surveyId }: SurveyPageProps) { ); } - if (isErrorSurvey || !survey) { - return ( -
-

Survey cannot be found

-
- ); + if (isErrorSurvey && isErrorSurvey.status === 404) { + return ; + } + + if (isErrorSurvey && isErrorSurvey.status === 403) { + return ; } return ( diff --git a/apps/web/app/s/[surveyId]/footerlogo.svg b/apps/web/app/s/[surveyId]/footerlogo.svg new file mode 100644 index 0000000000..659385db41 --- /dev/null +++ b/apps/web/app/s/[surveyId]/footerlogo.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/components/shared/SurveyStatusDropdown.tsx b/apps/web/components/shared/SurveyStatusDropdown.tsx index c6e3cbebd8..7cebf5f55a 100644 --- a/apps/web/components/shared/SurveyStatusDropdown.tsx +++ b/apps/web/components/shared/SurveyStatusDropdown.tsx @@ -65,7 +65,7 @@ export default function SurveyStatusDropdown({ if (updateLocalSurveyStatus) updateLocalSurveyStatus(value as "draft" | "inProgress" | "paused" | "completed" | "archived"); }}> - +
diff --git a/apps/web/components/shared/SurveyStatusIndicator.tsx b/apps/web/components/shared/SurveyStatusIndicator.tsx index 819593351f..d29c82261e 100644 --- a/apps/web/components/shared/SurveyStatusIndicator.tsx +++ b/apps/web/components/shared/SurveyStatusIndicator.tsx @@ -58,7 +58,7 @@ export default function SurveyStatusIndicator({ ) : status === "paused" ? ( <> - Survey paused. + Survey paused.
diff --git a/apps/web/pages/api/v1/client/surveys/[surveyId]/index.ts b/apps/web/pages/api/v1/client/surveys/[surveyId]/index.ts index 96dd7d73c3..30b631379b 100644 --- a/apps/web/pages/api/v1/client/surveys/[surveyId]/index.ts +++ b/apps/web/pages/api/v1/client/surveys/[surveyId]/index.ts @@ -19,13 +19,14 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse) where: { id: surveyId, type: "link", - status: "inProgress", + // status: "inProgress", }, select: { id: true, questions: true, thankYouCard: true, environmentId: true, + status: true, }, }); @@ -48,6 +49,12 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse) }, }); + if (survey.status !== "inProgress") { + return res + .status(403) + .json({ message: "Survey not running", reason: survey.status, brandColor: product?.brandColor }); + } + // if survey exists, return survey return res.status(200).json({ ...survey, brandColor: product?.brandColor }); }