diff --git a/packages/dito/app/components/FeedbackForm.tsx b/packages/dito/app/components/FeedbackForm.tsx index a5c5721f..aced0b75 100644 --- a/packages/dito/app/components/FeedbackForm.tsx +++ b/packages/dito/app/components/FeedbackForm.tsx @@ -1,12 +1,33 @@ import Background from "@digitalcheck/shared/components/Background"; +import Button from "@digitalcheck/shared/components/Button"; import Container from "@digitalcheck/shared/components/Container"; import RichText from "@digitalcheck/shared/components/RichText"; -import ThumbDownOutlined from "@digitalservicebund/icons/ThumbDownOutlined"; -import ThumbUpOutlined from "@digitalservicebund/icons/ThumbUpOutlined"; import React, { useEffect, useRef, useState } from "react"; -import { feedbackForm } from "resources/content"; import { twJoin } from "tailwind-merge"; +type FeedbackQuestionOptionProps = { + label: string; + value: number; +}; + +type FeedbackQuestionProps = { + id: string; + text: string; + options: FeedbackQuestionOptionProps[]; +}; + +type FeedbackFormProps = { + heading: string; + trackingEvent: string; + questions: FeedbackQuestionProps[]; + contact: string; + button: string; + success: { + heading: string; + text: string; + }; +}; + function FeedbackInput({ children, value, @@ -25,7 +46,7 @@ function FeedbackInput({ ariaLabel: string; }>) { const classes = twJoin( - "px-16 h-48 sm:px-24 sm:h-64 flex items-center", + "px-16 h-48 sm:px-24 sm:h-64 flex items-center cursor-pointer", selected ? "bg-blue-800 text-white" : "bg-blue-200 text-blue-800", ); @@ -47,15 +68,9 @@ function FeedbackInput({ } function FeedbackQuestion({ - legend, - isBinary = false, - name, - isLast = false, + question, }: Readonly<{ - legend: string; - isBinary?: boolean; - name: string; - isLast?: boolean; + question: FeedbackQuestionProps; }>) { const [selected, setSelected] = useState(null); @@ -66,110 +81,64 @@ function FeedbackQuestion({ return (
-

{legend}

+

{question.text}

- {isBinary ? ( -
- - - Ja - - - - Nein - +
+
+ {question.options.map(({ value }) => { + return ( + + {value} + + ); + })}
- ) : ( -
-
- {[1, 2, 3, 4, 5].map((number) => { - let ariaLabel: string; - switch (number) { - case 1: - ariaLabel = "sehr schwierig"; - break; - case 2: - ariaLabel = "schwierig"; - break; - case 3: - ariaLabel = "mittel"; - break; - case 4: - ariaLabel = "einfach"; - break; - case 5: - ariaLabel = "sehr einfach"; - break; - default: - ariaLabel = ""; - } - - return ( - - {number} - - ); - })} -
-
- {feedbackForm.labels[0]} - {feedbackForm.labels[4]} -
+
+ {question.options[0].label} + + {question.options[question.options.length - 1].label} +
- )} +
); } -export default function FeedbackForm() { +export default function FeedbackForm(props: FeedbackFormProps) { const [submitted, setSubmitted] = useState(false); const thankYouMessageRef = useRef(null); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); - const formData = new FormData(event.currentTarget); - const simpleFeedback = formData.get("simple-feedback"); - const usefulFeedback = formData.get("useful-feedback"); - // Plausible event trigger with feedback values if (window.plausible) { - window.plausible("Feedback Methoden", { - props: { - questionSimple: simpleFeedback ?? "No Feedback", - questionUseful: usefulFeedback ?? "No Feedback", - }, + const formData = new FormData(event.currentTarget); + + const trackingEventProps: { [key: string]: string } = {}; + props.questions.forEach((question) => { + trackingEventProps[question.id] = + (formData.get(question.id) as string) ?? "No Feedback"; + }); + + window.plausible(props.trackingEvent, { + props: trackingEventProps, }); } @@ -188,9 +157,9 @@ export default function FeedbackForm() {
-

{feedbackForm.success.heading}

+

{props.success.heading}


-

{feedbackForm.success.text}

+

{props.success.text}

@@ -200,25 +169,17 @@ export default function FeedbackForm() { return ( -

{feedbackForm.heading}

+

{props.heading}

- - - + + {props.questions?.length !== 0 && + props.questions.map((question) => ( + + ))} + +