fix feedback button

Author: wbglaeser

src/ui/language/translations.js

@@ -64,7 +64,8 @@ const translations = {
                 placeholder: "Enter your text",
                 submitting: "Submitting...",
                 submitBtn: "Submit",
-                messagePrompt: "Or send us an email. We will get back to you as quickly as we can!"
+                messagePrompt: "Or send us an email. We will get back to you as quickly as we can!",
+                successMessage: "Thank you for your feedback!",
             },
             principles: {
                 header: "And this is how it works",
@@ -349,7 +350,8 @@ const translations = {
                 placeholder: "Gib deinen Text ein",
                 submitting: "Wird gesendet...",
                 submitBtn: "Absenden",
-                messagePrompt: "Oder schick uns eine Nachricht. Wir melden uns so schnell wie möglich zurück!"
+                messagePrompt: "Oder schick uns eine Nachricht. Wir melden uns so schnell wie möglich zurück!",
+                successMessage: "Vielen Dank für dein Feedback!",
             },
             principles: {
                 header: "Und so funktioniert's",

src/ui/screens/landing-page/sections/feedback/components/FeedbackBox.js

@@ -13,14 +13,15 @@ const FeedbackBox = ({ isDesktop }) => {
     const {
         feedbackText,
         setFeedbackText,
+        success,
         error,
         submitFeedback,
     } = useFeedbackHandler();
 
     return (
         <VBox
             sx={{
-                gap: theme.spacing(8),
+                gap: 4,
                 width: '100%',
                 border: isDesktop ? `1px solid ${theme.palette.black.light}` : null,
                 borderRadius: theme.shape.borderRadius,
@@ -29,7 +30,7 @@ const FeedbackBox = ({ isDesktop }) => {
             }}>
             <VBox sx={{
                 alignItems: isDesktop ? 'flex-start' : 'flex-end',
-                gap: theme.spacing(4),
+                gap: 4,
             }}>
                 <Typography variant="h4" sx={{ fontWeight: 400 }}>
                     {t('home.feedback.writePrompt')}
@@ -56,9 +57,14 @@ const FeedbackBox = ({ isDesktop }) => {
                     onClick={submitFeedback}  
                 />
             </VBox>
+            {(success) && (
+                <Typography color="success.main">
+                    {t('home.feedback.successMessage')}
+                </Typography>
+            )}
             {error && (
                 <Typography color="error">
-                    {error}  {/* Error message displayed here */}
+                    {error}
                 </Typography>
             )}
             <HBox sx={{
@@ -75,7 +81,7 @@ const FeedbackBox = ({ isDesktop }) => {
                 <HBox sx={{ flex: 2, alignItems: "center", justifyContent: "flex-end" }}>
                     <EmailIcon />
                     <Link href={`mailto:info@foerderfunke.org`}
-                        sx={{ textDecoration: 'underline', color: theme.palette.black.main }}>
+                        sx={{ textDecoration: 'underline', color: 'black.main' }}>
                         info@foerderfunke.org
                     </Link>
                 </HBox>

src/ui/screens/landing-page/sections/feedback/hooks/useFeedbackHandler.js

@@ -2,15 +2,12 @@ import { useState } from "react";
 
 const useFeedbackHandler = () => {
     const [feedbackText, setFeedbackText] = useState("");
-    const [feedbackValue, setFeedbackValue] = useState(null);
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [success, setSuccess] = useState(false);
     const [error, setError] = useState(null);
 
     const submitFeedback = async () => {
-        const body = {
-            feedback_value: feedbackValue,
-            feedback_text: feedbackText,
-        };
+        const body = { feedback_text: feedbackText };
 
         try {
             setIsSubmitting(true);
@@ -25,13 +22,11 @@ const useFeedbackHandler = () => {
                 body: JSON.stringify(body),
             });
 
-            // Check if response status is not 200
             if (response.status !== 200) {
                 throw new Error(`Request failed with status ${response.status}`);
             }
 
-            const result = await response.json();
-            console.log("Response:", result);
+            setSuccess(true);
         } catch (err) {
             console.error("Error sending feedback:", err);
             setError("Failed to submit feedback: " + err.message);
@@ -43,8 +38,8 @@ const useFeedbackHandler = () => {
     return {
         feedbackText,
         setFeedbackText,
-        setFeedbackValue,
         isSubmitting,
+        success,
         error,
         submitFeedback,
     };