Phase 7

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

@@ -1,25 +1,41 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { TopNav } from "@/components/navigation/top-nav";
+import { NotificationChannel, NotificationType } from "@/generated/prisma/enums";
 import { prisma } from "@/lib/db/prisma";
 import { getActingStaff } from "@/lib/staff/get-acting-staff";
-import { getNotificationPreferences } from "@/services/staff/staff.service";
+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 { saveNotificationPreferencesAction } from "@/features/staff/actions/profile";
 
 export const metadata: Metadata = { title: "Notifications" };
 export const dynamic = "force-dynamic";
 
+const REMINDER_CHANNELS: NotificationChannel[] = [NotificationChannel.EMAIL, NotificationChannel.PUSH];
+
 export default async function StaffNotificationsPage() {
   const staff = await getActingStaff();
   if (!staff) redirect("/home");
 
-  const cells = await getNotificationPreferences(prisma, staff.userId);
+  const rows = await getNotificationPreferences(prisma, staff.userId);
+  const cells: PreferenceCellState[] = REMINDER_CHANNELS.map((channel) => ({
+    channel,
+    isEnabled:
+      rows.find((r) => r.type === NotificationType.STAFF_APPOINTMENT_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 px-6 py-6">
-        <NotificationPreferencesForm initial={cells} />
+      <main className="mx-auto max-w-2xl space-y-6 px-6 py-6">
+        <NotificationPreferencesForm initial={cells} action={saveNotificationPreferencesAction} />
+        <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>
   );