103 lines
3.4 KiB
JavaScript
103 lines
3.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import './MealPlanFeedback.css';
|
|
|
|
const MealPlanFeedback = ({ onSubmitFeedback }) => {
|
|
const [feedback, setFeedback] = useState('');
|
|
const [feedbackType, setFeedbackType] = useState('general');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!feedback.trim()) return;
|
|
|
|
setIsSubmitting(true);
|
|
|
|
// In a real app, this would send the feedback to an API
|
|
// For now, we'll just simulate a delay
|
|
setTimeout(() => {
|
|
if (onSubmitFeedback) {
|
|
onSubmitFeedback({
|
|
type: feedbackType,
|
|
text: feedback,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
}
|
|
|
|
setIsSubmitting(false);
|
|
setSubmitted(true);
|
|
|
|
// Reset form after 3 seconds
|
|
setTimeout(() => {
|
|
setFeedback('');
|
|
setFeedbackType('general');
|
|
setSubmitted(false);
|
|
}, 3000);
|
|
}, 1000);
|
|
};
|
|
|
|
return (
|
|
<div className="meal-plan-feedback">
|
|
<h3>Customize Your Meal Plan</h3>
|
|
|
|
{submitted ? (
|
|
<div className="feedback-success">
|
|
<p>Thank you for your feedback! Your meal plan will be updated shortly.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<p className="feedback-intro">
|
|
Not satisfied with your meal plan? Tell us what you'd like to change and we'll regenerate it.
|
|
</p>
|
|
|
|
<div className="feedback-form">
|
|
<div className="feedback-type">
|
|
<label>What would you like to change?</label>
|
|
<select
|
|
value={feedbackType}
|
|
onChange={(e) => setFeedbackType(e.target.value)}
|
|
>
|
|
<option value="general">General Feedback</option>
|
|
<option value="taste">Flavor Preferences</option>
|
|
<option value="complexity">Recipe Complexity</option>
|
|
<option value="ingredients">Specific Ingredients</option>
|
|
<option value="meals">Specific Meals</option>
|
|
<option value="time">Cooking Time</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="feedback-text">
|
|
<label>Your Feedback</label>
|
|
<textarea
|
|
value={feedback}
|
|
onChange={(e) => setFeedback(e.target.value)}
|
|
placeholder="Examples: 'Make the recipes simpler', 'Add more Italian dishes', 'Avoid bell peppers', 'Use the slow cooker more often'..."
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
className="submit-button"
|
|
onClick={handleSubmit}
|
|
disabled={!feedback.trim() || isSubmitting}
|
|
>
|
|
{isSubmitting ? 'Submitting...' : 'Update Meal Plan'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="feedback-examples">
|
|
<h4>Example Feedback</h4>
|
|
<ul>
|
|
<li>"I'd like to have more vegetarian options during the week."</li>
|
|
<li>"Can we include more pasta dishes?"</li>
|
|
<li>"The meals are too complex, I need simpler recipes with fewer ingredients."</li>
|
|
<li>"Please add more breakfast-for-dinner options."</li>
|
|
</ul>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MealPlanFeedback;
|