108 lines
4.0 KiB
JavaScript
108 lines
4.0 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState, useRef } from "react";
|
|
import { requestNotificationPermission, onForegroundMessage } from "../utils/firebase";
|
|
import AuthService from "../services/AuthService";
|
|
|
|
export default function NotificationHandler() {
|
|
const [notification, setNotification] = useState(null);
|
|
const [showPrompt, setShowPrompt] = useState(false);
|
|
const initialized = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
if (initialized.current) return;
|
|
initialized.current = true;
|
|
|
|
const token = AuthService.getToken();
|
|
if (!token) return;
|
|
|
|
// Check current permission status
|
|
if ("Notification" in window) {
|
|
if (Notification.permission === "default") {
|
|
// Not yet asked — show prompt button
|
|
setShowPrompt(true);
|
|
} else if (Notification.permission === "granted") {
|
|
// Already allowed — get token silently
|
|
initFCM();
|
|
}
|
|
// "denied" — do nothing, user must change in browser settings
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
async function initFCM() {
|
|
const fcmToken = await requestNotificationPermission();
|
|
if (fcmToken) {
|
|
console.log("[Notifications] FCM token obtained:", fcmToken.substring(0, 20) + "...");
|
|
}
|
|
onForegroundMessage((payload) => {
|
|
const title = payload.notification?.title || payload.data?.title || "Sweet Home";
|
|
const body = payload.notification?.body || payload.data?.body || "";
|
|
setNotification({ title, body });
|
|
setTimeout(() => setNotification(null), 5000);
|
|
});
|
|
}
|
|
|
|
async function handleEnableNotifications() {
|
|
setShowPrompt(false);
|
|
await initFCM();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Permission prompt banner */}
|
|
{showPrompt && (
|
|
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999]">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<span className="text-xl">🔔</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-bold text-gray-900 text-sm">تفعيل الإشعارات</p>
|
|
<p className="text-gray-600 text-sm mt-0.5">اسمح بالإشعارات للبقاء على اطلاع بحجوزاتك وعروضنا.</p>
|
|
<div className="flex gap-2 mt-3">
|
|
<button
|
|
onClick={handleEnableNotifications}
|
|
className="px-4 py-1.5 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 transition-colors"
|
|
>
|
|
تفعيل
|
|
</button>
|
|
<button
|
|
onClick={() => setShowPrompt(false)}
|
|
className="px-4 py-1.5 text-gray-500 text-sm hover:text-gray-700 transition-colors"
|
|
>
|
|
لاحقاً
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Foreground notification toast */}
|
|
{notification && (
|
|
<div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999] animate-slide-up">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<span className="text-xl">🏠</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-bold text-gray-900 text-sm">{notification.title}</p>
|
|
<p className="text-gray-600 text-sm mt-0.5">{notification.body}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setNotification(null)}
|
|
className="text-gray-400 hover:text-gray-600 flex-shrink-0"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|