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 | 103x 103x 103x 158x 158x 158x 158x 158x 154x 1x 1x 1x 1x 1x 1x 1x 1x 1x 412x 154x 104x 154x 131x 104x 104x 308x 106x 154x 260x 260x 366x 370x 416x 418x | 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>
);
}
|