learnhouse/apps/web/components/Objects/Modals/Feedback/Feedback.tsx

import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Textarea } from "@components/StyledElements/Form/Form"
import { BarLoader } from "react-spinners"
import * as Form from '@radix-ui/react-form'
import React, { useState } from "react";
import * as Sentry from '@sentry/browser';
import { CheckCircleIcon } from "lucide-react";
import { useSession } from "@components/Contexts/SessionContext";

export const FeedbackModal = (user: any) => {
    const session = useSession() as any;

    const [isSubmitting, setIsSubmitting] = useState(false);
    const [view, setView] = useState<"feedbackForm" | "success">("feedbackForm")
    const [feedbackMessage, setFeedbackMessage] = useState("");


    const handleSubmit = async (e: any) => {
        e.preventDefault();
        setIsSubmitting(true);

        const user = session.user ? session.user : null;
        const eventId = Sentry.captureMessage(`Feedback from ${user ? user.email : 'Anonymous'} - ${feedbackMessage}`);

        const userFeedback = {
            event_id: eventId,
            name: user ? user.full_name : 'Anonymous',
            email: user ? user.email : 'Anonymous',
            comments: feedbackMessage,
        }
        Sentry.captureUserFeedback(userFeedback);
        setIsSubmitting(false);
        setView("success");
    };

    const handleFeedbackMessage = (event: React.ChangeEvent<any>) => {
        setFeedbackMessage(event.target.value)
    };

    if (view == "feedbackForm") {
        return (
            <FormLayout onSubmit={handleSubmit}>
                <FormField name="feedback-message">
                    <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
                        <FormLabel>Feedback message</FormLabel>
                        <FormMessage match="valueMissing">Please provide learning elements, separated by comma (,)</FormMessage>
                    </Flex>
                    <Form.Control asChild>
                        <Textarea style={{ height: 150, }} onChange={handleFeedbackMessage} required />
                    </Form.Control>
                </FormField>

                <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
                    <Form.Submit asChild>
                        <ButtonBlack type="submit" css={{ marginTop: 10 }}>
                            {isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" />
                                : "Submit Feedback"}
                        </ButtonBlack>
                    </Form.Submit>
                </Flex>
            </FormLayout>
        )
    } else {
        return (
            <div className="flex flex-col items-center space-y-5">
                <div className="flex flex-col items-center space-y-5 pt-10">
                    <div className="flex items-center space-x-2">
                        <div className="text-9xl text-green-500">
                            <CheckCircleIcon></CheckCircleIcon>
                        </div>
                        <div className="text-3xl text-green-500">
                            <div>Thank you for your feedback!</div>
                        </div>
                    </div>
                    <div className="text-xl text-gray-500">
                        <div>We will take it into account.</div>
                    </div>
                </div>
                <div className="flex items-center space-x-2">
                    <ButtonBlack onClick={() => setView("feedbackForm")}>Send another feedback</ButtonBlack>
                </div>
            </div>
        )
    }

}

export default FeedbackModal