Phase 7

src/app/(customer)/settings/notifications/page.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { TopNav } from "@/components/navigation/top-nav";
+import { NotificationChannel, NotificationType } from "@/generated/prisma/enums";
+import { prisma } from "@/lib/db/prisma";
+import { getNotificationPreferences } from "@/services/notifications/notification.service";
+import { NotificationPreferencesForm } from "@/features/staff/components/notification-preferences-form";
+import type { PreferenceCellState } from "@/features/staff/components/notification-preferences-form";
+import { PushSubscribeToggle } from "@/features/notifications/components/push-subscribe-toggle";
+import { saveCustomerNotificationPreferencesAction } from "@/features/notifications/actions/preferences";
+
+export const metadata: Metadata = { title: "Notifications" };
+export const dynamic = "force-dynamic";
+
+const REMINDER_CHANNELS: NotificationChannel[] = [NotificationChannel.EMAIL, NotificationChannel.PUSH];
+
+export default async function CustomerNotificationSettingsPage() {
+  const session = await auth();
+  if (!session?.user) redirect("/sign-in?callbackUrl=/settings/notifications");
+
+  const rows = await getNotificationPreferences(prisma, session.user.id);
+  const cells: PreferenceCellState[] = REMINDER_CHANNELS.map((channel) => ({
+    channel,
+    isEnabled:
+      rows.find((r) => r.type === NotificationType.BOOKING_REMINDER && r.channel === channel)?.isEnabled ?? true,
+  }));
+
+  return (
+    <div className="pb-12">
+      <TopNav title="Notifications" onBack sticky className="bg-stone" />
+      <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
+        <NotificationPreferencesForm initial={cells} action={saveCustomerNotificationPreferencesAction} />
+        <div className="rounded-jumbo border-line border bg-white p-5">
+          <h2 className="mb-3 text-sm font-bold">Push Notifications</h2>
+          <PushSubscribeToggle />
+        </div>
+      </main>
+    </div>
+  );
+}