120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PushPrompt — a gentle on-load invitation to enable browser notifications,
|
|
* shown to signed-in users who haven't decided yet.
|
|
*
|
|
* Browsers require a user gesture to request notification permission, so this
|
|
* is a *soft* ask: the real `Notification.requestPermission()` only fires
|
|
* when the user taps "Enable". We show it when push is supported, the server
|
|
* has push configured, permission is still "default", the user isn't already
|
|
* subscribed, and they haven't recently dismissed it (7-day cooldown).
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Bell, X } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { useAuth } from "@/components/auth/auth-provider";
|
|
import {
|
|
enablePush,
|
|
isPushEnabled,
|
|
pushConfigured,
|
|
pushPermission,
|
|
pushSupported,
|
|
} from "@/lib/push";
|
|
|
|
const DISMISS_KEY = "push.prompt.dismissedAt";
|
|
const COOLDOWN_MS = 7 * 24 * 60 * 60 * 1000;
|
|
|
|
export function PushPrompt() {
|
|
const { user, loading } = useAuth();
|
|
const [show, setShow] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const userId = user?.id;
|
|
useEffect(() => {
|
|
if (loading || !userId) return;
|
|
let cancelled = false;
|
|
|
|
// Async eligibility check — never setState synchronously in the effect.
|
|
(async () => {
|
|
if (!pushSupported() || pushPermission() !== "default") return;
|
|
const dismissed = Number(window.localStorage.getItem(DISMISS_KEY) || 0);
|
|
if (dismissed && Date.now() - dismissed < COOLDOWN_MS) return;
|
|
if (!(await pushConfigured())) return;
|
|
if (await isPushEnabled()) return;
|
|
if (!cancelled) setShow(true);
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [userId, loading]);
|
|
|
|
function dismiss() {
|
|
window.localStorage.setItem(DISMISS_KEY, String(Date.now()));
|
|
setShow(false);
|
|
}
|
|
|
|
async function enable() {
|
|
setBusy(true);
|
|
try {
|
|
await enablePush();
|
|
toast.success("Notifications enabled 🙏");
|
|
setShow(false);
|
|
} catch (err) {
|
|
toast.error(err instanceof Error ? err.message : "Couldn't enable notifications.");
|
|
// A denial / dismissal shouldn't keep re-prompting.
|
|
dismiss();
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-20 z-40 flex justify-center px-4 md:bottom-4">
|
|
<div className="flex w-full max-w-md items-start gap-3 rounded-2xl border border-border bg-card p-4 shadow-lg">
|
|
<span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<Bell className="size-4.5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold text-foreground">
|
|
Stay with your sādhana
|
|
</p>
|
|
<p className="mt-0.5 text-sm text-muted-foreground leading-snug">
|
|
Turn on notifications for daily reminders, follow requests, and
|
|
more — even when the app is closed.
|
|
</p>
|
|
<div className="mt-3 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={enable}
|
|
disabled={busy}
|
|
className="inline-flex h-9 items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
|
|
>
|
|
{busy ? "Enabling…" : "Enable"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={dismiss}
|
|
className="inline-flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
Not now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={dismiss}
|
|
aria-label="Dismiss"
|
|
className="-mr-1 -mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|