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 | 76x 76x 76x 113x 113x 113x 113x 113x 108x 1x 1x 1x 1x 1x 1x 1x 1x 1x 294x 108x 79x 108x 95x 79x 79x 216x 81x 108x 189x 189x 270x 274x 298x 300x | 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>
);
}
|