Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 33x 33x 33x 1858x 1858x 1858x 1858x 1858x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1858x 1x 1x | import {Popover, PopoverContent, PopoverTrigger} from "@radix-ui/react-popover";
import {ToolTipCover} from "@/ahuora-design-system/ui/tooltip.tsx";
import {Button} from "@/ahuora-design-system/ui/button.tsx";
import { Loader2Icon, MessageSquareMore } from "lucide-react";
import { Textarea } from "@/ahuora-design-system/ui/textarea.tsx";
import { Label } from "@/ahuora-design-system/ui/label.tsx";
import { useUserInfo } from "@/hooks/useUserInfo.ts";
import { toast } from "sonner";
import { BaseSyntheticEvent, useState, useTransition } from "react";
const googleFormUrl = import.meta.env.VITE_GOOGLE_FORM_FEEDBACK_URL;
const emailEntryId = import.meta.env.VITE_GOOGLE_FORM_FEEDBACK_EMAIL_ENTRY_ID;
const feedbackEntryId = import.meta.env.VITE_GOOGLE_FORM_FEEDBACK_TEXT_ENTRY_ID;
export function FeedbackForm() {
const {data: userData} = useUserInfo();
const [feedback, setFeedback] = useState("");
const [formIsOpen, setFormIsOpen] = useState(false);
const [isPending, startTransition] = useTransition();
const handleSubmit = async (event: BaseSyntheticEvent) => {
event.preventDefault();
startTransition(async () => {
const formData = new FormData();
formData.append(emailEntryId, userData?.email || "");
formData.append(feedbackEntryId, feedback);
await fetch(googleFormUrl, {
method: "POST",
mode: "no-cors",
body: formData
}).then(() => {
toast.success("Feedback submitted successfully! Thank you for your input.");
}).catch((error) => {
console.error("Error submitting feedback:", error);
toast.error("Failed to submit feedback. Check console logs for more details.");
}).finally(() => {
// Reset the form state
setFormIsOpen(false);
setFeedback("");
});
})
}
return (
<Popover open={formIsOpen} onOpenChange={(isOpen: boolean) => setFormIsOpen(isOpen)}>
<ToolTipCover content="Submit feedback about your experience." asChild>
<PopoverTrigger asChild>
<Button
size="icon"
variant="ghost"
aria-label="Submit feedback button"
className="w-fit"
>
<MessageSquareMore size={18} />
</Button>
</PopoverTrigger>
</ToolTipCover>
<PopoverContent
className="w-[500px] z-50 bg-background border rounded-md"
align="end"
sideOffset={5}
aria-label="Submit feedback form"
>
<form onSubmit={handleSubmit}>
<div className="flex flex-col h-full w-full p-4 gap-4">
<p className="text-xl font-bold">Share your experience</p>
<Label htmlFor="feedback-text">
We’d love to hear your feedback! Share your thoughts, ideas, or
issues to help us improve your experience.
</Label>
<Textarea
placeholder="Enter your comments here."
id="feedback-text"
aria-label="Feedback form text box"
required={true}
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
/>
<Button
type="submit"
disabled={isPending}>
Submit feedback {isPending && <Loader2Icon className="animate-spin"/>}
</Button>
</div>
</form>
</PopoverContent>
</Popover>
);
} |