From a3fd6645b687888ec1df324711b1dc1e6681be54 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Thu, 23 Nov 2023 15:52:39 +0100
Subject: [PATCH] fix: added images as reusable component, tweaked rating
 (#1672)

---
 .../src/components/general/QuestionImage.tsx       | 13 +++++++++++++
 .../src/components/questions/CTAQuestion.tsx       |  8 ++------
 .../src/components/questions/ConsentQuestion.tsx   | 12 ++++--------
 .../questions/MultipleChoiceMultiQuestion.tsx      |  8 ++------
 .../questions/MultipleChoiceSingleQuestion.tsx     |  8 ++------
 .../src/components/questions/NPSQuestion.tsx       |  8 ++------
 .../src/components/questions/OpenTextQuestion.tsx  |  8 ++------
 .../questions/PictureSelectionQuestion.tsx         |  8 ++------
 .../src/components/questions/RatingQuestion.tsx    | 14 +++++---------
 9 files changed, 34 insertions(+), 53 deletions(-)
 create mode 100644 packages/surveys/src/components/general/QuestionImage.tsx

diff --git a/packages/surveys/src/components/general/QuestionImage.tsx b/packages/surveys/src/components/general/QuestionImage.tsx
new file mode 100644
index 000000000000..ff68adb0fe3b
--- /dev/null
+++ b/packages/surveys/src/components/general/QuestionImage.tsx
@@ -0,0 +1,13 @@
+interface QuestionImageProps {
+  imgUrl: string;
+  altText?: string;
+}
+
+export default function QuestionImage({ imgUrl, altText = "Image" }: QuestionImageProps) {
+  return (
+    <div className="mb-4 rounded-md">
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={imgUrl} alt={altText} className="mb-4 rounded-md" />
+    </div>
+  );
+}
diff --git a/packages/surveys/src/components/questions/CTAQuestion.tsx b/packages/surveys/src/components/questions/CTAQuestion.tsx
index 1ea42c36738b..f688cf4a3d29 100644
--- a/packages/surveys/src/components/questions/CTAQuestion.tsx
+++ b/packages/surveys/src/components/questions/CTAQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import HtmlBody from "@/components/general/HtmlBody";
 import { TResponseData } from "@formbricks/types/responses";
@@ -24,12 +25,7 @@ export default function CTAQuestion({
 }: CTAQuestionProps) {
   return (
     <div>
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <HtmlBody htmlString={question.html} questionId={question.id} />
 
diff --git a/packages/surveys/src/components/questions/ConsentQuestion.tsx b/packages/surveys/src/components/questions/ConsentQuestion.tsx
index 8748ab0955cd..bda1f3f821af 100644
--- a/packages/surveys/src/components/questions/ConsentQuestion.tsx
+++ b/packages/surveys/src/components/questions/ConsentQuestion.tsx
@@ -1,9 +1,10 @@
-import { TResponseData } from "@formbricks/types/responses";
-import type { TSurveyConsentQuestion } from "@formbricks/types/surveys";
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import HtmlBody from "@/components/general/HtmlBody";
+import { TResponseData } from "@formbricks/types/responses";
+import type { TSurveyConsentQuestion } from "@formbricks/types/surveys";
 
 interface ConsentQuestionProps {
   question: TSurveyConsentQuestion;
@@ -26,12 +27,7 @@ export default function ConsentQuestion({
 }: ConsentQuestionProps) {
   return (
     <div>
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <HtmlBody htmlString={question.html || ""} questionId={question.id} />
 
diff --git a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
index 486cb0e93207..7797fcc737e9 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import Subheader from "@/components/general/Subheader";
 import { cn, shuffleQuestions } from "@/lib/utils";
@@ -91,12 +92,7 @@ export default function MultipleChoiceMultiQuestion({
         onSubmit({ [question.id]: newValue });
       }}
       className="w-full">
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="mt-4">
diff --git a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
index d6d3179ffcf9..3c2559bc434a 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import Subheader from "@/components/general/Subheader";
 import { cn, shuffleQuestions } from "@/lib/utils";
@@ -60,12 +61,7 @@ export default function MultipleChoiceSingleQuestion({
         onSubmit({ [question.id]: value });
       }}
       className="w-full">
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="mt-4">
diff --git a/packages/surveys/src/components/questions/NPSQuestion.tsx b/packages/surveys/src/components/questions/NPSQuestion.tsx
index 81f6a76502a5..b20fc47df0d7 100644
--- a/packages/surveys/src/components/questions/NPSQuestion.tsx
+++ b/packages/surveys/src/components/questions/NPSQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import Subheader from "@/components/general/Subheader";
 import { cn } from "@/lib/utils";
@@ -31,12 +32,7 @@ export default function NPSQuestion({
         e.preventDefault();
         onSubmit({ [question.id]: value });
       }}>
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="my-4">
diff --git a/packages/surveys/src/components/questions/OpenTextQuestion.tsx b/packages/surveys/src/components/questions/OpenTextQuestion.tsx
index d9e51dc2a413..5eefc5772c1f 100644
--- a/packages/surveys/src/components/questions/OpenTextQuestion.tsx
+++ b/packages/surveys/src/components/questions/OpenTextQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import Subheader from "@/components/general/Subheader";
 import { TResponseData } from "@formbricks/types/responses";
@@ -53,12 +54,7 @@ export default function OpenTextQuestion({
         // }
       }}
       className="w-full">
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="mt-4">
diff --git a/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx b/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
index 2eadad9c6d3c..36a609e2fcad 100644
--- a/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
+++ b/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import Subheader from "@/components/general/Subheader";
 import { cn } from "@/lib/utils";
@@ -82,12 +83,7 @@ export default function PictureSelectionQuestion({
         onSubmit({ [question.id]: value });
       }}
       className="w-full">
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="mt-4">
diff --git a/packages/surveys/src/components/questions/RatingQuestion.tsx b/packages/surveys/src/components/questions/RatingQuestion.tsx
index 94ce0fa1d832..77d31f1b70d1 100644
--- a/packages/surveys/src/components/questions/RatingQuestion.tsx
+++ b/packages/surveys/src/components/questions/RatingQuestion.tsx
@@ -1,5 +1,6 @@
 import { BackButton } from "@/components/buttons/BackButton";
 import SubmitButton from "@/components/buttons/SubmitButton";
+import QuestionImage from "@/components/general/QuestionImage";
 import Headline from "@/components/general/Headline";
 import { cn } from "@/lib/utils";
 import { TResponseData } from "@formbricks/types/responses";
@@ -68,15 +69,10 @@ export default function RatingQuestion({
         onSubmit({ [question.id]: value });
       }}
       className="w-full">
-      {question.imageUrl && (
-        <div className="my-4 rounded-md">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={question.imageUrl} alt="question-image" className={"my-4 rounded-md"} />
-        </div>
-      )}
+      {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
-      <div className="my-4">
+      <div className="mb-4 mt-8">
         <fieldset>
           <legend className="sr-only">Choices</legend>
           <div className="flex">
@@ -124,7 +120,7 @@ export default function RatingQuestion({
                           xmlns="http://www.w3.org/2000/svg"
                           viewBox="0 0 24 24"
                           fill="currentColor"
-                          className="h-6 max-h-full w-6 ">
+                          className="h-8 max-h-full w-8 ">
                           <path
                             fillRule="evenodd"
                             d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
@@ -139,7 +135,7 @@ export default function RatingQuestion({
                         viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor"
-                        className="h-6 max-h-full w-6">
+                        className="h-8 max-h-full w-8">
                         <path
                           stroke-linecap="round"
                           stroke-linejoin="round"