layouts
This commit is contained in:
parent
429cdb7094
commit
c4748aa0ee
|
|
@ -12,13 +12,7 @@ export function LoginPageClient() {
|
|||
const searchParams = useSearchParams();
|
||||
const nextPath = searchParams.get("next") || "/profile";
|
||||
|
||||
const {
|
||||
requestOtp,
|
||||
verifyOtp,
|
||||
loginPassword,
|
||||
loginSocial,
|
||||
loginBookingRef,
|
||||
} = useAuth();
|
||||
const { requestOtp, verifyOtp, loginPassword, loginGoogle, loginBookingRef } = useAuth();
|
||||
|
||||
const [tab, setTab] = useState<Tab>("otp");
|
||||
const [email, setEmail] = useState("");
|
||||
|
|
@ -59,15 +53,17 @@ export function LoginPageClient() {
|
|||
if (r.ok) router.push(nextPath);
|
||||
}
|
||||
|
||||
function handleSocial(provider: "google" | "apple" | "facebook") {
|
||||
loginSocial(provider);
|
||||
router.push(nextPath);
|
||||
async function handleGoogle() {
|
||||
setMessage(null);
|
||||
await loginGoogle();
|
||||
}
|
||||
|
||||
function handleBookingRef(e: React.FormEvent) {
|
||||
async function handleBookingRef(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
const r = loginBookingRef(bookingRef);
|
||||
setLoading(true);
|
||||
const r = await loginBookingRef(bookingRef);
|
||||
setLoading(false);
|
||||
setMessage(r.message);
|
||||
if (r.ok) router.push(nextPath);
|
||||
}
|
||||
|
|
@ -162,7 +158,7 @@ export function LoginPageClient() {
|
|||
/>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--color-muted)]">
|
||||
Demo: enter <strong>123456</strong>
|
||||
Use the code sent to your email (hotel guest OTP).
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
|
|
@ -212,7 +208,7 @@ export function LoginPageClient() {
|
|||
/>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--color-muted)]">
|
||||
Demo password: <strong>shitaye</strong> or <strong>demo123</strong>
|
||||
Use your Yaltopia homes account password
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
|
|
@ -226,32 +222,20 @@ export function LoginPageClient() {
|
|||
|
||||
{tab === "social" && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-[var(--color-muted)]">
|
||||
Mock sign-in — no external redirect in this demo.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSocial("google")}
|
||||
onClick={() => void handleGoogle()}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 text-sm font-semibold transition hover:bg-[var(--color-surface-muted)]"
|
||||
>
|
||||
<span className="text-base" aria-hidden>
|
||||
G
|
||||
<svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
|
||||
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
|
||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
|
||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
|
||||
</svg>
|
||||
</span>
|
||||
Continue with Google
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSocial("apple")}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-text)] py-3 text-sm font-semibold text-white transition hover:opacity-90"
|
||||
>
|
||||
Continue with Apple
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSocial("facebook")}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[#1877f2] py-3 text-sm font-semibold text-white transition hover:opacity-95"
|
||||
>
|
||||
Continue with Facebook
|
||||
Login with Google
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -269,11 +253,15 @@ export function LoginPageClient() {
|
|||
/>
|
||||
</label>
|
||||
<p className="text-xs text-[var(--color-muted)]">
|
||||
Try <strong>SHITAYE-2026-DEMO</strong> or <strong>GUEST-1234</strong> — no email
|
||||
required. You can place orders and view a limited stay profile.
|
||||
Enter the booking code from your confirmation email. You must have used the same
|
||||
email at booking so your account links for the full guest portal.
|
||||
</p>
|
||||
<button type="submit" className="btn-mustard w-full justify-center py-3 text-sm">
|
||||
Continue with booking ID
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-mustard w-full justify-center py-3 text-sm disabled:opacity-60"
|
||||
>
|
||||
{loading ? "Signing in…" : "Continue with booking code"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { RequireAuth } from "@/components/RequireAuth";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import type { OrderCategory, OrderRecord } from "@/context/AuthContext";
|
||||
import {
|
||||
seedAppointments,
|
||||
seedRewardsHistory,
|
||||
seedShuttle,
|
||||
} from "@/lib/mocks/guestData";
|
||||
import { siteConfig } from "@/lib/mocks/site";
|
||||
guestMe,
|
||||
guestOrders,
|
||||
guestPointsHistory,
|
||||
guestSpaBookings,
|
||||
type PointLedgerRow,
|
||||
type SpaBookingRow,
|
||||
} from "@/lib/guest-hotel-api";
|
||||
|
||||
const orderTabs: { id: OrderCategory | "all"; label: string }[] = [
|
||||
{ id: "all", label: "All" },
|
||||
|
|
@ -60,13 +62,66 @@ export function ProfilePageClient() {
|
|||
}
|
||||
|
||||
function ProfileContent() {
|
||||
const { session, orders, logout } = useAuth();
|
||||
const { session, logout, accessToken } = useAuth();
|
||||
const [orderFilter, setOrderFilter] = useState<OrderCategory | "all">("all");
|
||||
const [apiBalance, setApiBalance] = useState<number | null>(null);
|
||||
const [apiLedger, setApiLedger] = useState<PointLedgerRow[]>([]);
|
||||
const [apiOrders, setApiOrders] = useState<OrderRecord[]>([]);
|
||||
const [appointments, setAppointments] = useState<SpaBookingRow[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!accessToken || !session) return;
|
||||
const pid = session.propertyId;
|
||||
if (!pid) return;
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const me = await guestMe(pid, accessToken);
|
||||
const ph = await guestPointsHistory(pid, accessToken);
|
||||
const ord = await guestOrders(pid, accessToken);
|
||||
const spa = await guestSpaBookings(pid, accessToken);
|
||||
|
||||
if (!cancelled) {
|
||||
setApiBalance(me.balance);
|
||||
setApiLedger(ph.data ?? []);
|
||||
setApiOrders(
|
||||
(ord.data ?? []).map((o) => ({
|
||||
id: o.id,
|
||||
category: o.type,
|
||||
title:
|
||||
o.type === "room-service"
|
||||
? "Room Service Order"
|
||||
: o.type === "laundry"
|
||||
? "Laundry Request"
|
||||
: o.type === "gym"
|
||||
? "Gym Booking"
|
||||
: "Spa Booking",
|
||||
detail: o.detail,
|
||||
totalUsd: Number(o.total ?? 0),
|
||||
placedAt: o.createdAt,
|
||||
status: (["pending", "confirmed", "completed"].includes(o.status.toLowerCase())
|
||||
? o.status.toLowerCase()
|
||||
: "pending") as OrderRecord["status"],
|
||||
})),
|
||||
);
|
||||
setAppointments(spa.data ?? []);
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) {
|
||||
setApiOrders([]);
|
||||
setAppointments([]);
|
||||
}
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [accessToken, session]);
|
||||
|
||||
const filteredOrders = useMemo(() => {
|
||||
if (orderFilter === "all") return orders;
|
||||
return orders.filter((o) => o.category === orderFilter);
|
||||
}, [orders, orderFilter]);
|
||||
if (orderFilter === "all") return apiOrders;
|
||||
return apiOrders.filter((o) => o.category === orderFilter);
|
||||
}, [apiOrders, orderFilter]);
|
||||
|
||||
if (!session) {
|
||||
return null;
|
||||
|
|
@ -86,24 +141,19 @@ function ProfileContent() {
|
|||
<div className="mt-6 flex flex-col gap-4 border-b border-[var(--color-border)] pb-8 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h1 className="font-heading text-3xl font-semibold text-[var(--color-text)] md:text-4xl">
|
||||
{session.kind === "member"
|
||||
? `Hello, ${session.displayName}`
|
||||
: `Welcome, ${session.guestName}`}
|
||||
Hello, {session.displayName}
|
||||
</h1>
|
||||
<p className="mt-2 text-sm text-[var(--color-muted)]">
|
||||
{session.kind === "member" ? (
|
||||
<span className="font-medium text-[var(--color-text)]">{session.email}</span>
|
||||
{session.bookingCode ? (
|
||||
<>
|
||||
<span className="font-medium text-[var(--color-text)]">{session.email}</span>
|
||||
{" · "}
|
||||
Signed in via {session.authMethod}
|
||||
Booking code{" "}
|
||||
<span className="font-mono font-semibold text-[var(--color-text)]">
|
||||
{session.bookingCode}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Booking <span className="font-mono font-semibold">{session.bookingRef}</span>
|
||||
{" · "}
|
||||
{session.roomLabel} · checkout {session.checkOut}
|
||||
</>
|
||||
)}
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
|
|
@ -125,75 +175,49 @@ function ProfileContent() {
|
|||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)]">
|
||||
Rewards points
|
||||
</p>
|
||||
{session.kind === "member" ? (
|
||||
<>
|
||||
<p className="mt-3 font-heading text-4xl font-semibold text-[var(--color-text)]">
|
||||
{session.points.toLocaleString()}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">
|
||||
{session.tier} tier · earn on stays & dining
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="mt-3 text-sm leading-relaxed text-[var(--color-muted)]">
|
||||
Full loyalty points unlock when you sign in with email. Booking-ID access covers
|
||||
orders and stay tools.
|
||||
<>
|
||||
<p className="mt-3 font-heading text-4xl font-semibold text-[var(--color-text)]">
|
||||
{(apiBalance ?? session.points).toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-sm lg:col-span-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)]">
|
||||
Airport shuttle
|
||||
</p>
|
||||
<p className="mt-2 font-heading text-xl text-[var(--color-text)]">
|
||||
Lobby pickup · {seedShuttle.lobbyPickupTime}
|
||||
</p>
|
||||
<p className="mt-2 text-sm text-[var(--color-muted)]">
|
||||
{new Date(seedShuttle.departureDate).toLocaleDateString(undefined, {
|
||||
weekday: "long",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}{" "}
|
||||
· {seedShuttle.airport}
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-[var(--color-text)]">
|
||||
{seedShuttle.flightLabel}
|
||||
</p>
|
||||
<p className="mt-3 text-xs text-[var(--color-muted)]">{seedShuttle.notes}</p>
|
||||
<a
|
||||
href={`mailto:${siteConfig.email}?subject=Shuttle%20change`}
|
||||
className="mt-4 inline-block text-sm font-semibold text-[var(--color-accent)] hover:underline"
|
||||
>
|
||||
Request a change
|
||||
</a>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">
|
||||
{apiBalance != null ? "Live balance" : "Balance unavailable"}
|
||||
</p>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-12">
|
||||
<h2 className="font-heading text-2xl text-[var(--color-text)]">Booked appointments</h2>
|
||||
<ul className="mt-4 grid gap-3 md:grid-cols-2">
|
||||
{seedAppointments.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-5 shadow-sm"
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-primary)]">
|
||||
{a.status}
|
||||
</p>
|
||||
<p className="mt-2 font-semibold text-[var(--color-text)]">{a.title}</p>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">{a.when}</p>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">{a.where}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{appointments.length === 0 ? (
|
||||
<p className="mt-4 rounded-xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-muted)] px-4 py-8 text-sm text-[var(--color-muted)]">
|
||||
No gym/spa bookings found.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="mt-4 grid gap-3 md:grid-cols-2">
|
||||
{appointments.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-5 shadow-sm"
|
||||
>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-primary)]">
|
||||
{a.status}
|
||||
</p>
|
||||
<p className="mt-2 font-semibold text-[var(--color-text)]">
|
||||
{a.offering?.name ?? "Spa/Gym booking"}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">
|
||||
{formatWhen(a.scheduledAt ?? a.createdAt)}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-12">
|
||||
<h2 className="font-heading text-2xl text-[var(--color-text)]">Orders</h2>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">
|
||||
Room service, laundry, gym, and spa — including demo history and new orders from this
|
||||
device.
|
||||
Room service, laundry, gym, and spa
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{orderTabs.map((t) => (
|
||||
|
|
@ -225,21 +249,33 @@ function ProfileContent() {
|
|||
</section>
|
||||
|
||||
<section className="mt-12">
|
||||
<h2 className="font-heading text-2xl text-[var(--color-text)]">Rewards earned</h2>
|
||||
<h2 className="font-heading text-2xl text-[var(--color-text)]">Rewards history</h2>
|
||||
<ul className="mt-4 space-y-2">
|
||||
{seedRewardsHistory.map((r) => (
|
||||
<li
|
||||
key={r.id}
|
||||
className="flex items-center justify-between rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-[var(--color-text)]">{r.label}</p>
|
||||
<p className="text-xs text-[var(--color-muted)]">{r.earnedAt}</p>
|
||||
</div>
|
||||
<span className="badge-mustard">+{r.points} pts</span>
|
||||
</li>
|
||||
))}
|
||||
{apiLedger.length > 0
|
||||
? apiLedger.map((r) => (
|
||||
<li
|
||||
key={r.id}
|
||||
className="flex items-center justify-between rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm"
|
||||
>
|
||||
<div>
|
||||
<p className="font-medium text-[var(--color-text)]">{r.reason.replace(/_/g, " ")}</p>
|
||||
<p className="text-xs text-[var(--color-muted)]">{formatWhen(r.createdAt)}</p>
|
||||
</div>
|
||||
<span
|
||||
className={
|
||||
r.delta >= 0 ? "badge-mustard" : "rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-800"
|
||||
}
|
||||
>
|
||||
{r.delta >= 0 ? "+" : ""}
|
||||
{r.delta} pts
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
: null}
|
||||
</ul>
|
||||
{apiLedger.length === 0 ? (
|
||||
<p className="mt-4 text-sm text-[var(--color-muted)]">No rewards history returned yet.</p>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { siteConfig } from "@/lib/mocks/site";
|
||||
import { siteConfig } from "@/lib/site-config";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { HeaderAccount } from "@/components/HeaderAccount";
|
||||
import { CurrencySwitcher } from "@/components/CurrencySwitcher";
|
||||
import { ReviewsMenu } from "@/components/ReviewsMenu";
|
||||
import { siteConfig } from "@/lib/mocks/site";
|
||||
import { siteConfig } from "@/lib/site-config";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
const nav = [
|
||||
{ href: "/#rooms", label: "Rooms" },
|
||||
|
|
@ -16,6 +19,8 @@ const nav = [
|
|||
];
|
||||
|
||||
export function Header() {
|
||||
const { session } = useAuth();
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-40">
|
||||
<div className="border-b border-white/10 bg-[var(--color-navy)] text-white">
|
||||
|
|
@ -72,12 +77,14 @@ export function Header() {
|
|||
</nav>
|
||||
<div className="flex shrink-0 items-center gap-2 md:gap-3">
|
||||
<HeaderAccount />
|
||||
<Link
|
||||
href="/booking"
|
||||
className="btn-mustard px-4 py-2.5 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:px-5"
|
||||
>
|
||||
Book
|
||||
</Link>
|
||||
{!session && (
|
||||
<Link
|
||||
href="/booking"
|
||||
className="btn-mustard px-4 py-2.5 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:px-5"
|
||||
>
|
||||
Book
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,8 @@ export function HeaderAccount() {
|
|||
}
|
||||
|
||||
if (session) {
|
||||
const points =
|
||||
session.kind === "member" ? session.points : "—";
|
||||
const label =
|
||||
session.kind === "member"
|
||||
? session.displayName.split(" ")[0] ?? "Guest"
|
||||
: session.guestName.split(" ")[0] ?? "Guest";
|
||||
const points = session.points;
|
||||
const label = session.displayName.split(" ")[0] ?? "Guest";
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
|
|
@ -27,7 +23,7 @@ export function HeaderAccount() {
|
|||
className="hidden max-w-[140px] truncate rounded-full border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-1.5 text-xs font-semibold text-[var(--color-primary)] sm:inline-block"
|
||||
title="Loyalty points"
|
||||
>
|
||||
{points !== "—" ? `${points} pts` : "Stay"}
|
||||
{`${points} pts`}
|
||||
</Link>
|
||||
<Link
|
||||
href="/profile"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { Outlet } from "@/lib/mocks/outlets";
|
||||
import type { Outlet } from "@/lib/data/outlets";
|
||||
|
||||
type Props = { outlet: Outlet };
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user