(
+ () => defaultPreferences
+ );
+
+ const [isEnabling, setIsEnabling] = useState(false);
+
+ // Update translations when locale changes
+ useEffect(() => {
+ setPreferences((current) =>
+ current.map((pref) => {
+ const defaultPref = defaultPreferences.find(
+ (d) => d.category === pref.category
+ );
+ return defaultPref
+ ? {
+ ...pref,
+ label: defaultPref.label,
+ description: defaultPref.description,
+ }
+ : pref;
+ })
+ );
+ }, [defaultPreferences]);
+
+ // Load preferences from localStorage
+ useEffect(() => {
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ try {
+ const parsed = JSON.parse(stored);
+ // Validate that parsed data is an array
+ if (!Array.isArray(parsed)) {
+ console.warn(
+ "Invalid notification preferences format, using defaults"
+ );
+ return;
+ }
+
+ setPreferences((current) =>
+ current.map((pref) => {
+ const storedPref = parsed.find(
+ (p: NotificationPreference) =>
+ p &&
+ typeof p === "object" &&
+ p.category === pref.category &&
+ typeof p.enabled === "boolean"
+ );
+ return storedPref
+ ? { ...pref, enabled: storedPref.enabled }
+ : pref;
+ })
+ );
+ } catch (parseError) {
+ console.error(
+ "Failed to parse notification preferences, using defaults:",
+ parseError
+ );
+ // Clear corrupted data
+ try {
+ localStorage.removeItem(STORAGE_KEY);
+ } catch {
+ // Ignore removal errors (e.g., SecurityError in private mode)
+ }
+ }
+ }
+ } catch (error) {
+ // Handle QuotaExceededError or SecurityError when accessing localStorage
+ console.error(
+ "Failed to load notification preferences (storage access denied):",
+ error
+ );
+ }
+ }, []);
+
+ // Save preferences to localStorage synchronously for immediate error feedback
+ const savePreferences = (newPreferences: NotificationPreference[]) => {
+ setPreferences(newPreferences);
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(newPreferences));
+ } catch (error) {
+ // Handle QuotaExceededError or SecurityError
+ if (error instanceof Error) {
+ if (error.name === "QuotaExceededError") {
+ console.error(
+ "Failed to save notification preferences: Storage quota exceeded"
+ );
+ // Optionally notify user about storage issues
+ } else if (error.name === "SecurityError") {
+ console.error(
+ "Failed to save notification preferences: Storage access denied (private mode?)"
+ );
+ } else {
+ console.error("Failed to save notification preferences:", error);
+ }
+ }
+ }
+ };
+
+ // Handle enabling notifications
+ const handleEnableNotifications = async () => {
+ setIsEnabling(true);
+ try {
+ const result = await requestPermission();
+ if (result === "granted") {
+ await showNotification({
+ title: _(msg`Notifications Enabled`),
+ body: _(msg`You'll now receive important updates from SecPal`),
+ tag: "welcome-notification",
+ });
+ }
+ } catch (error) {
+ console.error("Failed to enable notifications:", error);
+ } finally {
+ setIsEnabling(false);
+ }
+ };
+
+ // Handle toggling a preference
+ const handleTogglePreference = (category: NotificationCategory) => {
+ const newPreferences = preferences.map((pref) =>
+ pref.category === category ? { ...pref, enabled: !pref.enabled } : pref
+ );
+ savePreferences(newPreferences);
+ };
+
+ // Handle sending a test notification
+ const handleTestNotification = async () => {
+ if (permission !== "granted") return;
+
+ try {
+ await showNotification({
+ title: _(msg`Test Notification`),
+ body: _(msg`This is a test notification from SecPal`),
+ tag: "test-notification",
+ requireInteraction: false,
+ });
+ } catch (error) {
+ console.error("Failed to send test notification:", error);
+ }
+ };
+
+ if (!isSupported) {
+ return (
+
+
+
+ Notifications are not supported in your browser. Please use a modern
+ browser like Chrome, Firefox, or Safari.
+
+
+
+ );
+ }
+
+ if (permission === "denied") {
+ return (
+
+
+
+ Notifications have been blocked. Please enable them in your browser
+ settings to receive important updates.
+
+
+
+ );
+ }
+
+ if (permission === "default") {
+ return (
+
+
+
+
+ Enable notifications to receive important updates about security
+ alerts, shift reminders, and system notifications.
+
+
+
+
+
+
+
+
+ Notification Preferences
+
+
+ Choose which notifications you want to receive
+
+
+
+
+
+
+
+
+
+
+ โ Notifications are enabled. You'll receive updates based on your
+ preferences.
+
+
+
+