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 96 97 98 99 100 101 102 103 104 105 106 107 108 | 49x 49x 49x 6027x 6027x 6027x 6027x 6027x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6027x 1x 1x | import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@radix-ui/react-popover";
import { Loader2Icon, MessageSquareMore } from "lucide-react";
import { BaseSyntheticEvent, useState, useTransition } from "react";
import { toast } from "sonner";
import { Button } from "@/ahuora-design-system/ui/button.tsx";
import { Label } from "@/ahuora-design-system/ui/label.tsx";
import { Textarea } from "@/ahuora-design-system/ui/textarea.tsx";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip.tsx";
import { useUserInfo } from "@/hooks/useUserInfo.ts";
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>
);
}
|