const Section = ({ title, children }) => (
{title}
{children}
); function Settings({ user, jobContext, onJobChange, onLogout, darkMode = false, subscriptionPlan = "free", sessionUsage = { used: 0, limit: 1 }, onUpgrade }) { const isPaid = subscriptionPlan === "pro" || subscriptionPlan === "premium"; // Selected repos persist on jobContext.selectedRepos (array of repo names). // Default selection (first session after connecting): all repos selected. const [selectedRepos, setSelectedRepos] = React.useState(() => { const saved = jobContext?.selectedRepos; if (Array.isArray(saved)) return saved; return (jobContext?.githubTopRepos || []).map(r => r.name); }); function toggleRepo(name) { setSelectedRepos(prev => { const next = prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]; onJobChange({ ...jobContext, selectedRepos: next }); return next; }); } function selectAllRepos() { const all = (jobContext?.githubTopRepos || []).map(r => r.name); setSelectedRepos(all); onJobChange({ ...jobContext, selectedRepos: all }); } const [role, setRole] = React.useState(jobContext?.role || ""); const [company, setCompany] = React.useState(jobContext?.company || ""); const ghConnected = !!(jobContext?.githubName); const [voice, setVoice] = React.useState(localStorage.getItem("gr.voice") || "female"); const [saved, setSaved] = React.useState(false); function save() { const ctx = { ...jobContext, role, company, }; onJobChange(ctx); localStorage.setItem("gr.voice", voice); setSaved(true); setTimeout(() => setSaved(false), 2000); } return (

Settings

Manage your profile, interview setup, and connections
{/* Profile */}
{user.picture ? : }
{user.name}
{user.email}
Google connected
{/* Interview setup */}
setRole(e.target.value)} /> setCompany(e.target.value)} />
{/* Voice preference */}
{[ { id: "female", label: "Female", desc: "HFC Β· Natural", icon: "user-round" }, { id: "male", label: "Male", desc: "Lessac Β· Clear", icon: "user" }, ].map(v => ( ))}
{/* Connections */}
{/* GitHub */}
GitHub
Ari references your repos during technical questions
{ghConnected && Connected}
{ghConnected ? (
{ e.currentTarget.src = "../../assets/logo.svg"; }} />
{jobContext.githubName}
@{jobContext.github} Β· {jobContext.githubRepos} repos
{jobContext.githubBio &&
{jobContext.githubBio}
}
{jobContext.githubCompany && 🏒 {jobContext.githubCompany}} {jobContext.githubLocation && πŸ“ {jobContext.githubLocation}}
{jobContext.githubLanguages?.length > 0 && (
{jobContext.githubLanguages.map(l => ( {l} ))}
)} {jobContext.githubTopRepos?.length > 0 && (
Repos Ari draws questions from
{isPaid ? `Pick the projects you want to be quizzed on β€” ${selectedRepos.length} selected.` : "Pro and Premium can pick specific repos. Free uses all your top repos."}
{isPaid && ( )} {!isPaid && onUpgrade && ( )}
{jobContext.githubTopRepos.map(r => { const checked = selectedRepos.includes(r.name); const interactive = isPaid; return ( ); })}
{isPaid && selectedRepos.length === 0 && (
No repos selected β€” Ari will fall back to all your top repos.
)}
)}
) : ( Connect GitHub )} {/* LinkedIn */}
LinkedIn
Your background and experience for personalised questions
{jobContext?.linkedinName && Connected}
{jobContext?.linkedinName ? (
{jobContext.linkedinPicture ? :
in
}
{jobContext.linkedinName}
{jobContext.linkedinEmail}
) : ( Connect LinkedIn )}
{/* Subscription management β€” paid users only */} {subscriptionPlan !== "free" && ( )} {/* Plan usage β€” pro only */} {subscriptionPlan !== "free" && (() => { const remaining = sessionUsage.limit - sessionUsage.used; const pct = Math.min((sessionUsage.used / sessionUsage.limit) * 100, 100); const color = remaining <= 5 ? "#dc2626" : remaining <= 10 ? "#d97706" : "var(--gr-green-500)"; return (
{remaining} of {sessionUsage.limit} sessions left this month
{sessionUsage.used} session{sessionUsage.used !== 1 ? "s" : ""} used Β· resets on your next billing date
{subscriptionPlan}
); })()}
); } // ── Subscription cancel + refund-request panel ──────────────────── function SubscriptionPanel({ subscriptionPlan, user, darkMode, sessionUsage = { used: 0, limit: 1 } }) { const token = localStorage.getItem("gr.token") || ""; // Refund policy: only available before first session on the current plan. // sessionUsage.used is sessions used this period β€” if it's > 0, they've used the service. const refundEligible = (sessionUsage?.used || 0) === 0; const [cancelling, setCancelling] = React.useState(false); const [cancelMsg, setCancelMsg] = React.useState(""); const [cancelErr, setCancelErr] = React.useState(""); const [showRefund, setShowRefund] = React.useState(false); const [reason, setReason] = React.useState(""); const [sending, setSending] = React.useState(false); const [refundMsg, setRefundMsg] = React.useState(""); const [refundErr, setRefundErr] = React.useState(""); async function cancel() { if (!confirm("Cancel your subscription? You'll keep access until the end of the paid period.")) return; setCancelling(true); setCancelErr(""); setCancelMsg(""); try { const res = await fetch("https://api.usegreenroom.app/api/subscription/cancel", { method: "POST", headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Couldn't cancel"); setCancelMsg(data.message || "Cancelled."); window.posthog?.capture('subscription_cancelled'); } catch (e) { setCancelErr(e.message); } setCancelling(false); } async function submitRefund(e) { e.preventDefault(); if (reason.trim().length < 5) { setRefundErr("Please tell us a bit more so we can help."); return; } setSending(true); setRefundErr(""); setRefundMsg(""); try { const res = await fetch("https://api.usegreenroom.app/api/refund/request", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify({ reason: reason.trim() }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || "Couldn't submit request"); setRefundMsg(data.message || "Request received."); setReason(""); window.posthog?.capture('refund_requested'); setTimeout(() => setShowRefund(false), 2400); } catch (e) { setRefundErr(e.message); } setSending(false); } return (
You're on the {subscriptionPlan} plan
Manage your subscription. Cancellations keep access until the end of your paid period.
{!refundEligible && (
Refunds are only available before your first mock session on this plan.
)}
{cancelMsg && (
βœ“ {cancelMsg}
)} {cancelErr && (
{cancelErr}
)} {showRefund && (
Request a refund
We process refund requests manually within 24 hours. Briefly tell us why.