| "use client"; |
|
|
| import { useId, useState } from "react"; |
| import { MessageSquarePlus, X } from "lucide-react"; |
| import { cn } from "@/lib/utils"; |
| import { trackBetaEvent } from "@/lib/beta/betaAnalytics"; |
| import { |
| BETA_FEEDBACK_KIND_LABELS, |
| MAX_FEEDBACK_MESSAGE_LENGTH, |
| submitBetaFeedback, |
| type BetaFeedbackKind, |
| type BetaFeedbackRating, |
| } from "@/lib/beta/betaFeedback"; |
|
|
| type BetaFeedbackButtonProps = { |
| route?: string; |
| subject?: string; |
| chapterTitle?: string; |
| missionTitle?: string; |
| stepLabel?: string; |
| className?: string; |
| }; |
|
|
| const KIND_ORDER: BetaFeedbackKind[] = [ |
| "helped_understand", |
| "still_confusing", |
| "wrong_or_doubtful", |
| "too_long", |
| "need_more_examples", |
| "class_confusing", |
| "bug", |
| "content_issue", |
| "ui_issue", |
| "too_hard", |
| "too_easy", |
| "liked", |
| "other", |
| ]; |
|
|
| export function BetaFeedbackButton({ |
| route, |
| subject, |
| chapterTitle, |
| missionTitle, |
| stepLabel, |
| className, |
| }: BetaFeedbackButtonProps) { |
| const [open, setOpen] = useState(false); |
| const [kind, setKind] = useState<BetaFeedbackKind>("class_confusing"); |
| const [rating, setRating] = useState<BetaFeedbackRating | null>(null); |
| const [message, setMessage] = useState(""); |
| const [submitted, setSubmitted] = useState(false); |
| const [error, setError] = useState<string | null>(null); |
| const titleId = useId(); |
| const messageId = useId(); |
|
|
| const context = { route, subject, chapterTitle, missionTitle, stepLabel }; |
|
|
| function openPanel() { |
| setOpen(true); |
| setSubmitted(false); |
| setError(null); |
| trackBetaEvent({ name: "feedback_opened", ...context }); |
| } |
|
|
| function closePanel() { |
| setOpen(false); |
| } |
|
|
| function handleSubmit() { |
| const result = submitBetaFeedback({ kind, rating: rating ?? undefined, message, ...context }); |
| if (!result.ok) { |
| setError(result.error === "empty_message" ? "Please write a short message first." : "Storage unavailable on this device."); |
| return; |
| } |
| setSubmitted(true); |
| setMessage(""); |
| setRating(null); |
| } |
|
|
| return ( |
| <div className={cn("relative", className)}> |
| <button |
| type="button" |
| onClick={openPanel} |
| aria-haspopup="dialog" |
| aria-expanded={open} |
| aria-label="Open beta feedback" |
| className="inline-flex min-h-9 items-center gap-2 rounded-lg border border-[#2A2A2A] bg-[#111111] px-3 text-[12px] font-semibold text-white transition hover:bg-[#1A1A1A] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| > |
| <MessageSquarePlus className="size-3.5" aria-hidden="true" /> |
| Beta feedback |
| </button> |
| |
| {open ? ( |
| <div |
| role="dialog" |
| aria-modal="false" |
| aria-labelledby={titleId} |
| data-testid="beta-feedback-panel" |
| className="absolute right-0 z-40 mt-2 w-[min(92vw,340px)] rounded-xl border border-[#2A2A2A] bg-[#0B0B0B] p-4 shadow-[0_24px_80px_rgba(0,0,0,0.5)]" |
| > |
| <div className="flex items-start justify-between gap-2"> |
| <div> |
| <p id={titleId} className="text-[13px] font-bold text-white"> |
| Beta feedback |
| </p> |
| <p className="mt-1 text-[11px] leading-4 text-[#8B8B8B]">Tell us what confused you or what broke.</p> |
| </div> |
| <button |
| type="button" |
| onClick={closePanel} |
| aria-label="Close beta feedback" |
| className="rounded-lg border border-[#2A2A2A] bg-[#111111] p-1.5 text-[#A1A1AA] transition hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| > |
| <X className="size-3.5" aria-hidden="true" /> |
| </button> |
| </div> |
| |
| {submitted ? ( |
| <div className="mt-4" data-testid="beta-feedback-confirmation"> |
| <p className="text-[13px] font-semibold text-white">Thanks! Feedback saved.</p> |
| <p className="mt-1 text-[11px] leading-4 text-[#8B8B8B]">Stored on this device for beta testing.</p> |
| <button |
| type="button" |
| onClick={closePanel} |
| className="mt-3 inline-flex min-h-9 w-full items-center justify-center rounded-lg bg-white px-3 text-[12px] font-bold text-black transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| > |
| Close feedback |
| </button> |
| </div> |
| ) : ( |
| <div className="mt-3 space-y-3"> |
| <div> |
| <label htmlFor={`${titleId}-kind`} className="text-[10px] font-semibold uppercase tracking-wider text-[#6B7280]"> |
| What is this about? |
| </label> |
| <select |
| id={`${titleId}-kind`} |
| aria-label="What is this about?" |
| value={kind} |
| onChange={(event) => setKind(event.target.value as BetaFeedbackKind)} |
| className="mt-1.5 w-full rounded-lg border border-[#2A2A2A] bg-[#050505] p-2 text-[12px] text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| > |
| {KIND_ORDER.map((value) => ( |
| <option key={value} value={value}> |
| {BETA_FEEDBACK_KIND_LABELS[value]} |
| </option> |
| ))} |
| </select> |
| </div> |
| |
| <div> |
| <fieldset className="mt-1.5 flex gap-1.5" aria-label="Rating (optional)"> |
| <legend className="sr-only">Rating (optional)</legend> |
| {([1, 2, 3, 4, 5] as BetaFeedbackRating[]).map((value) => ( |
| <button |
| key={value} |
| type="button" |
| aria-label={`Rate ${value} out of 5`} |
| aria-pressed={rating === value} |
| onClick={() => setRating((current) => (current === value ? null : value))} |
| className={cn( |
| "size-8 rounded-lg border text-[12px] font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35", |
| rating === value |
| ? "border-white bg-white text-black" |
| : "border-[#2A2A2A] bg-[#050505] text-white hover:bg-[#151515]", |
| )} |
| > |
| {value} |
| </button> |
| ))} |
| </fieldset> |
| </div> |
| |
| <div> |
| <label htmlFor={messageId} className="text-[10px] font-semibold uppercase tracking-wider text-[#6B7280]"> |
| Message |
| </label> |
| <textarea |
| id={messageId} |
| aria-label="Message" |
| value={message} |
| maxLength={MAX_FEEDBACK_MESSAGE_LENGTH} |
| onChange={(event) => { |
| setMessage(event.target.value); |
| if (error) setError(null); |
| }} |
| rows={4} |
| placeholder="What confused you or what broke?" |
| className="mt-1.5 w-full resize-y rounded-lg border border-[#2A2A2A] bg-[#050505] p-2.5 text-[12px] leading-5 text-white placeholder:text-[#5F6368] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| /> |
| <div className="mt-1 flex items-center justify-between"> |
| <p className="text-[10px] text-[#5F6368]">{message.length}/{MAX_FEEDBACK_MESSAGE_LENGTH}</p> |
| {error ? <p className="text-[10px] font-semibold text-white">{error}</p> : null} |
| </div> |
| </div> |
| |
| <p className="text-[10px] leading-4 text-[#6B7280]"> |
| Beta feedback is saved on this device. Do not include private personal details. |
| </p> |
| |
| <button |
| type="button" |
| onClick={handleSubmit} |
| className="inline-flex min-h-9 w-full items-center justify-center rounded-lg bg-white px-3 text-[12px] font-bold text-black transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/35" |
| > |
| Submit feedback |
| </button> |
| </div> |
| )} |
| </div> |
| ) : null} |
| </div> |
| ); |
| } |
|
|
