Skip to content

Uiux/booking guest vs signin #494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thlpkee20-wq merged 4 commits into from
Jul 29, 2026
Merged

Uiux/booking guest vs signin #494

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7b4f0da
design: add bottom-nav badge scheme
Opulencechuks Jul 28, 2026
2e4f28a
design: add checkout gas-fee breakdown
Opulencechuks Jul 28, 2026
de09204
design: add booking guest-vs-signin path selector
Jul 28, 2026
05560bf
Merge remote-tracking branch 'origin/main' into pr-494
thlpkee20-wq Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 100 additions & 4 deletions src/app/dashboard/slots/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default function SlotDetailPage({

// MODAL / CHECKOUT STATE
const [isModalOpen, setIsModalOpen] = useState(false);
const [purchaseStep, setPurchaseStep] = useState<"confirm" | "loading" | "success">("confirm");
const [purchaseStep, setPurchaseStep] = useState<"auth" | "confirm" | "loading" | "success">("auth");
const [loadingMessage, setLoadingMessage] = useState("");
const [txHash, setTxHash] = useState("");
const [announcement, setAnnouncement] = useState(""); // Screen reader announcer
Expand Down Expand Up @@ -197,13 +197,13 @@ export default function SlotDetailPage({

const handleOpenModal = () => {
if (!isWalletReady || !hasFunds) return;
setPurchaseStep("confirm");
setPurchaseStep("auth");
setIsModalOpen(true);
};

const handleCloseModal = useCallback(() => {
setIsModalOpen(false);
setPurchaseStep("confirm");
setPurchaseStep("auth");
}, []);

// Keyboard navigation & focus management inside checkout modal
Expand Down Expand Up @@ -717,13 +717,109 @@ export default function SlotDetailPage({
<button
type="button"
onClick={handleCloseModal}
className="absolute top-4 right-4 h-8 w-8 flex items-center justify-center rounded-full border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
className="absolute top-4 right-4 h-8 w-8 flex items-center justify-center rounded-full border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 z-10"
aria-label="Close modal dialog"
>
✕
</button>
)}

{/* STEP 0: AUTHENTICATION / PATH SELECTION */}
{purchaseStep === "auth" && (
<div className="space-y-6">
<div className="text-center space-y-2">
<h3 id="modal-headline" className="text-xl font-bold text-white">
How would you like to continue?
</h3>
<p className="text-xs leading-relaxed text-slate-400 max-w-sm mx-auto">
Choose your checkout path to secure this booking.
</p>
</div>

<div className="grid grid-cols-1 gap-4">
{/* Guest Card */}
<div className="rounded-2xl border border-white/10 bg-slate-950/40 p-4 transition-all hover:border-cyan-400/30">
<div className="flex justify-between items-start mb-3">
<h4 className="text-sm font-bold text-white">Guest (Wallet Only)</h4>
</div>
<ul className="space-y-2 mb-4 text-xs text-slate-300">
<li className="flex gap-2 items-start">
<Check className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
<span>Fast checkout</span>
</li>
<li className="flex gap-2 items-start">
<AlertCircle className="h-3.5 w-3.5 text-amber-400 shrink-0 mt-0.5" />
<span>No booking history or preferences saved</span>
</li>
</ul>
<button
onClick={() => setPurchaseStep("confirm")}
className="w-full flex items-center justify-center rounded-full font-bold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 px-4 py-2.5 text-xs border border-white/10 text-slate-300 hover:bg-white/5"
>
Continue as Guest
</button>
</div>

{/* Sign In Card */}
<div className="rounded-2xl border border-cyan-400/30 bg-cyan-400/5 p-4 transition-all hover:border-cyan-400/50 relative">
<div className="flex justify-between items-start mb-3">
<h4 className="text-sm font-bold text-cyan-300 flex items-center gap-1.5">
Sign In
<span className="group relative ml-1">
<Info className="h-3.5 w-3.5 text-cyan-400/60 cursor-pointer hover:text-cyan-300" aria-label="Why sign in?" />
<span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 rounded bg-slate-900 border border-white/10 p-2 text-[10px] text-slate-200 opacity-0 group-hover:opacity-100 transition shadow-xl z-20">
Signing in syncs your wallet with your profile, giving you access to purchase history, saved settings, and priority support.
</span>
</span>
</h4>
<span className="inline-flex rounded bg-cyan-400/10 px-1.5 py-0.5 text-[10px] font-bold text-cyan-400 uppercase border border-cyan-400/20">
Recommended
</span>
</div>
<ul className="space-y-2 mb-4 text-xs text-slate-300">
<li className="flex gap-2 items-start">
<Check className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
<span>Full booking history & receipts</span>
</li>
<li className="flex gap-2 items-start">
<Check className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
<span>Saved preferences & notifications</span>
</li>
</ul>
<button
onClick={() => setPurchaseStep("confirm")}
className="w-full flex items-center justify-center rounded-full font-bold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 px-4 py-2.5 text-xs bg-cyan-400/20 text-cyan-100 hover:bg-cyan-400/30 border border-cyan-400/30"
>
Sign In to Continue
</button>
</div>

{/* Create Account Card */}
<div className="rounded-2xl border border-white/10 bg-slate-950/40 p-4 transition-all hover:border-cyan-400/30">
<div className="flex justify-between items-start mb-3">
<h4 className="text-sm font-bold text-white">Create Account</h4>
</div>
<ul className="space-y-2 mb-4 text-xs text-slate-300">
<li className="flex gap-2 items-start">
<Check className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
<span>Unlock all platform features</span>
</li>
<li className="flex gap-2 items-start">
<Check className="h-3.5 w-3.5 text-emerald-400 shrink-0 mt-0.5" />
<span>Setup takes &lt; 1 minute</span>
</li>
</ul>
<button
onClick={() => setPurchaseStep("confirm")}
className="w-full flex items-center justify-center rounded-full font-bold transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 px-4 py-2.5 text-xs border border-white/10 text-slate-300 hover:bg-white/5"
>
Create Account
</button>
</div>
</div>
</div>
)}

{/* STEP 1: INITIAL CONFIRMATION DETAILS */}
{purchaseStep === "confirm" && (
<div className="space-y-6">
Expand Down
Loading