374 lines
14 KiB
TypeScript
374 lines
14 KiB
TypeScript
import type { Metadata } from "next";
|
||
import { Star } from "lucide-react";
|
||
import Link from "next/link";
|
||
import { auth } from "@/auth";
|
||
import { AppointmentCard } from "@/components/ui/appointment-card";
|
||
import { BarberCard } from "@/components/ui/barber-card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card } from "@/components/ui/card";
|
||
import { ServiceCard } from "@/components/ui/service-card";
|
||
import { Weekday } from "@/generated/prisma/enums";
|
||
import type { Prisma } from "@/generated/prisma/client";
|
||
import { computeOpeningStatus } from "@/lib/business/opening-status";
|
||
import { getPrimaryBusiness } from "@/lib/business/get-primary-business";
|
||
import { prisma } from "@/lib/db/prisma";
|
||
import { getAvailableServices } from "@/services/scheduling/availability.service";
|
||
import { getLoyaltySummary, type LoyaltySummary } from "@/services/loyalty/loyalty.service";
|
||
import { getBusinessReviews } from "@/services/reviews/reviews.service";
|
||
import type { AppointmentStatus } from "@/types/domain";
|
||
|
||
export const metadata: Metadata = { title: "Home" };
|
||
export const dynamic = "force-dynamic";
|
||
|
||
const WEEKDAY_ORDER: Weekday[] = [
|
||
Weekday.MONDAY,
|
||
Weekday.TUESDAY,
|
||
Weekday.WEDNESDAY,
|
||
Weekday.THURSDAY,
|
||
Weekday.FRIDAY,
|
||
Weekday.SATURDAY,
|
||
Weekday.SUNDAY,
|
||
];
|
||
const WEEKDAY_LABEL: Record<Weekday, string> = {
|
||
MONDAY: "Monday",
|
||
TUESDAY: "Tuesday",
|
||
WEDNESDAY: "Wednesday",
|
||
THURSDAY: "Thursday",
|
||
FRIDAY: "Friday",
|
||
SATURDAY: "Saturday",
|
||
SUNDAY: "Sunday",
|
||
};
|
||
|
||
const STATUS_MAP: Record<string, AppointmentStatus> = {
|
||
PENDING: "pending_approval",
|
||
CONFIRMED: "confirmed",
|
||
CHECKED_IN: "arrived",
|
||
IN_PROGRESS: "in_progress",
|
||
};
|
||
|
||
export default async function CustomerHomePage() {
|
||
const [business, session] = await Promise.all([getPrimaryBusiness(), auth()]);
|
||
|
||
const [services, staff, reviews] = await Promise.all([
|
||
getAvailableServices(prisma, { businessId: business.id }),
|
||
prisma.staffProfile.findMany({
|
||
where: { businessId: business.id, status: "ACTIVE", isBookableOnline: true },
|
||
include: { user: { select: { name: true, image: true } } },
|
||
}),
|
||
getBusinessReviews(business.id),
|
||
]);
|
||
|
||
const openingStatus = computeOpeningStatus(business.hours, business.timezone);
|
||
const location = business.locations[0];
|
||
const previewServices = services.slice(0, 4);
|
||
|
||
type UpcomingAppointment = Prisma.AppointmentGetPayload<{
|
||
include: { services: { include: { service: true } }; staff: { include: { user: true } } };
|
||
}>;
|
||
|
||
let customerProfile: Awaited<ReturnType<typeof prisma.customerProfile.findUnique>> = null;
|
||
let upcomingAppointment: UpcomingAppointment | null = null;
|
||
let loyalty: LoyaltySummary | null = null;
|
||
let preferredBarberName: string | null = null;
|
||
let lastCompletedAppointment: Awaited<ReturnType<typeof prisma.appointment.findFirst>> = null;
|
||
|
||
if (session?.user?.id) {
|
||
customerProfile = await prisma.customerProfile.findUnique({
|
||
where: { userId: session.user.id },
|
||
});
|
||
|
||
if (customerProfile) {
|
||
[upcomingAppointment, loyalty, lastCompletedAppointment] = await Promise.all([
|
||
prisma.appointment.findFirst({
|
||
where: {
|
||
customerId: customerProfile.id,
|
||
status: { in: ["PENDING", "CONFIRMED", "CHECKED_IN"] },
|
||
startAt: { gte: new Date() },
|
||
},
|
||
orderBy: { startAt: "asc" },
|
||
include: { services: { include: { service: true } }, staff: { include: { user: true } } },
|
||
}),
|
||
getLoyaltySummary(prisma, { customerId: customerProfile.id, businessId: business.id }),
|
||
prisma.appointment.findFirst({
|
||
where: { customerId: customerProfile.id, status: "COMPLETED" },
|
||
orderBy: { startAt: "desc" },
|
||
}),
|
||
]);
|
||
|
||
if (customerProfile.preferredBarberId) {
|
||
const preferred = await prisma.staffProfile.findUnique({
|
||
where: { id: customerProfile.preferredBarberId },
|
||
include: { user: { select: { name: true } } },
|
||
});
|
||
preferredBarberName = preferred?.user.name ?? null;
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
{/* Hero */}
|
||
<section className="bg-ink relative h-56 w-full overflow-hidden">
|
||
{business.logoUrl ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img src={business.logoUrl} alt="" className="h-full w-full object-cover opacity-80" />
|
||
) : null}
|
||
</section>
|
||
|
||
<main className="mx-auto max-w-2xl bg-white px-6 py-6">
|
||
{session?.user && (
|
||
<p className="text-muted mb-1 text-sm">
|
||
Good to see you, {session.user.name?.split(" ")[0] ?? "there"}
|
||
</p>
|
||
)}
|
||
<h1 className="mb-1 text-2xl font-bold tracking-tight">{business.name}</h1>
|
||
{location && (
|
||
<p className="text-muted mb-3 text-xs">
|
||
{location.addressLine1}, {location.city} {location.postalCode}
|
||
</p>
|
||
)}
|
||
<div className="mb-4 flex items-center gap-3 text-sm">
|
||
<div className="text-accent-loyalty flex items-center gap-1">
|
||
<Star className="h-4 w-4 fill-current" aria-hidden="true" />
|
||
<span className="text-ink font-bold">{reviews.averageRating.toFixed(1)}</span>
|
||
</div>
|
||
<span className="text-muted">· {reviews.totalReviews.toLocaleString()} reviews</span>
|
||
<span
|
||
className={openingStatus.isOpen ? "text-accent-foreground font-bold" : "text-danger font-bold"}
|
||
>
|
||
{openingStatus.label}
|
||
</span>
|
||
</div>
|
||
{business.description && (
|
||
<p className="text-muted mb-6 text-sm leading-relaxed">{business.description}</p>
|
||
)}
|
||
|
||
{/* Upcoming appointment */}
|
||
{upcomingAppointment && (
|
||
<section className="mb-6">
|
||
<h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
|
||
Your Next Visit
|
||
</h2>
|
||
<AppointmentCard
|
||
status={STATUS_MAP[upcomingAppointment.status] ?? "confirmed"}
|
||
serviceName={upcomingAppointment.services.map((s) => s.service.name).join(" + ")}
|
||
person={{
|
||
id: upcomingAppointment.staffId,
|
||
name: upcomingAppointment.staff.user.name ?? "Barber",
|
||
}}
|
||
formattedDate={upcomingAppointment.startAt.toLocaleDateString("en-GB", {
|
||
weekday: "short",
|
||
day: "numeric",
|
||
month: "short",
|
||
timeZone: business.timezone,
|
||
})}
|
||
formattedTime={upcomingAppointment.startAt.toLocaleTimeString("en-GB", {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
timeZone: business.timezone,
|
||
})}
|
||
actions={
|
||
<Link
|
||
href="/appointments"
|
||
className="text-ink text-xs font-bold tracking-widest uppercase underline"
|
||
>
|
||
View details
|
||
</Link>
|
||
}
|
||
/>
|
||
</section>
|
||
)}
|
||
|
||
{/* Loyalty summary */}
|
||
{loyalty?.isEnabled && loyalty.accountId && (
|
||
<Link
|
||
href="/loyalty"
|
||
className={
|
||
loyalty.availableReward
|
||
? "rounded-jumbo border-accent-loyalty bg-accent-loyalty/10 mb-6 block border p-5 shadow-sm"
|
||
: "rounded-jumbo border-line mb-6 block border bg-white p-5 shadow-sm"
|
||
}
|
||
>
|
||
{loyalty.availableReward ? (
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-sm font-bold">Reward available — {loyalty.availableReward.label}</p>
|
||
<span className="text-accent-loyalty-foreground text-xs font-bold uppercase tracking-widest">View</span>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="mb-3 flex items-center justify-between">
|
||
<p className="text-sm font-bold">Loyalty Progress</p>
|
||
<span className="text-muted text-xs">
|
||
{loyalty.currentStamps}/{loyalty.stampsRequired} stamps
|
||
</span>
|
||
</div>
|
||
<div className="bg-stone h-2 w-full overflow-hidden rounded-full">
|
||
<div
|
||
className="bg-accent-loyalty h-full rounded-full"
|
||
style={{
|
||
width: `${Math.min(100, (loyalty.currentStamps / loyalty.stampsRequired) * 100)}%`,
|
||
}}
|
||
/>
|
||
</div>
|
||
</>
|
||
)}
|
||
</Link>
|
||
)}
|
||
|
||
{/* Preferred barber + book again */}
|
||
{(preferredBarberName || lastCompletedAppointment) && (
|
||
<div className="mb-6 grid grid-cols-2 gap-3">
|
||
{preferredBarberName && (
|
||
<Card className="p-4">
|
||
<p className="text-muted text-[10px] font-bold tracking-widest uppercase">
|
||
Preferred Barber
|
||
</p>
|
||
<p className="mt-1 text-sm font-bold">{preferredBarberName}</p>
|
||
</Card>
|
||
)}
|
||
{lastCompletedAppointment && (
|
||
<Button asChild variant="secondary" className="h-full w-full">
|
||
<Link href="/appointments">Book Again</Link>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Booking CTA */}
|
||
<Button asChild className="mb-8 w-full">
|
||
<Link href="/book">Book an Appointment</Link>
|
||
</Button>
|
||
|
||
{/* Services */}
|
||
<section className="mb-8">
|
||
<div className="mb-3 flex items-center justify-between">
|
||
<h2 className="text-muted text-xs font-bold tracking-widest uppercase">
|
||
Popular Services
|
||
</h2>
|
||
<Link
|
||
href="/book"
|
||
className="text-ink text-[10px] font-bold tracking-widest uppercase underline"
|
||
>
|
||
See all
|
||
</Link>
|
||
</div>
|
||
<Card className="divide-line divide-y px-5">
|
||
{previewServices.map((service) => (
|
||
<ServiceCard
|
||
key={service.id}
|
||
service={{
|
||
id: service.id,
|
||
name: service.name,
|
||
durationMinutes: service.durationMinutes,
|
||
formattedPrice: `£${Number(service.price).toFixed(2)}`,
|
||
}}
|
||
action={
|
||
<Button asChild size="sm">
|
||
<Link href="/book">Book</Link>
|
||
</Button>
|
||
}
|
||
/>
|
||
))}
|
||
</Card>
|
||
</section>
|
||
|
||
{/* Barbers */}
|
||
<section className="mb-8">
|
||
<h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
|
||
Our Barbers
|
||
</h2>
|
||
<div className="flex gap-5 overflow-x-auto pb-1">
|
||
{staff.map((s) => (
|
||
<BarberCard
|
||
key={s.id}
|
||
staff={{
|
||
id: s.id,
|
||
name: s.user.name ?? "Barber",
|
||
avatarUrl: s.user.image ?? undefined,
|
||
}}
|
||
isPreferred={customerProfile?.preferredBarberId === s.id}
|
||
/>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Reviews */}
|
||
<section className="mb-8">
|
||
<div className="mb-3 flex items-center justify-between">
|
||
<h2 className="text-muted text-xs font-bold tracking-widest uppercase">Reviews</h2>
|
||
{reviews.isDemoData && (
|
||
<span className="text-muted text-[9px] font-bold tracking-widest uppercase">
|
||
Demo data
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="space-y-3">
|
||
{reviews.reviews.map((review) => (
|
||
<Card key={review.id} className="p-4">
|
||
<div className="mb-1 flex items-center justify-between">
|
||
<p className="text-sm font-bold">{review.authorName}</p>
|
||
<span className="text-muted text-[10px]">{review.relativeDate}</span>
|
||
</div>
|
||
<div className="text-accent-loyalty mb-2 flex gap-0.5">
|
||
{Array.from({ length: review.rating }, (_, i) => (
|
||
<Star key={i} className="h-3 w-3 fill-current" aria-hidden="true" />
|
||
))}
|
||
</div>
|
||
<p className="text-muted text-xs">{review.text}</p>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* Hours */}
|
||
<section className="mb-4">
|
||
<h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
|
||
Opening Hours
|
||
</h2>
|
||
<Card className="divide-line divide-y px-5">
|
||
{WEEKDAY_ORDER.map((day) => {
|
||
const dayHours = business.hours.find((h) => h.dayOfWeek === day);
|
||
return (
|
||
<div key={day} className="flex items-center justify-between py-3 text-sm">
|
||
<span className="text-muted">{WEEKDAY_LABEL[day]}</span>
|
||
<span className="font-medium">
|
||
{!dayHours ||
|
||
dayHours.isClosed ||
|
||
dayHours.opensAtMinutes === null ||
|
||
dayHours.closesAtMinutes === null
|
||
? "Closed"
|
||
: `${String(Math.floor(dayHours.opensAtMinutes / 60)).padStart(2, "0")}:${String(dayHours.opensAtMinutes % 60).padStart(2, "0")} – ${String(Math.floor(dayHours.closesAtMinutes / 60)).padStart(2, "0")}:${String(dayHours.closesAtMinutes % 60).padStart(2, "0")}`}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</Card>
|
||
</section>
|
||
|
||
{/* Contact */}
|
||
<section>
|
||
<h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">Contact</h2>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{business.phone && (
|
||
<a
|
||
href={`tel:${business.phone}`}
|
||
className="border-line rounded-xl border bg-white py-4 text-center text-sm font-bold"
|
||
>
|
||
Call
|
||
</a>
|
||
)}
|
||
{business.email && (
|
||
<a
|
||
href={`mailto:${business.email}`}
|
||
className="border-line rounded-xl border bg-white py-4 text-center text-sm font-bold"
|
||
>
|
||
Email
|
||
</a>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|