61 lines
3.8 KiB
TypeScript
61 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useId, useState } from 'react';
|
|
import { authClient } from '@/lib/auth/client';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Field, FieldLabel } from '@/components/ui/field';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { syncSitePush } from './push-client';
|
|
|
|
const dismissedKey = 'site-push-dont-ask';
|
|
const askedKey = 'site-push-asked';
|
|
export function SitePushPrompt({ configured }: { configured: boolean }) {
|
|
const { data } = authClient.useSession();
|
|
const userId = data?.user.id;
|
|
const id = useId();
|
|
const [open, setOpen] = useState(false);
|
|
const [dontAsk, setDontAsk] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState('');
|
|
useEffect(() => {
|
|
if (!configured || !window.isSecureContext || !('Notification' in window) || !('PushManager' in window) || !('serviceWorker' in navigator)) return;
|
|
let active = true;
|
|
function show() { setError(''); setOpen(true); }
|
|
window.addEventListener('notifications:enable', show);
|
|
void Promise.resolve().then(async () => {
|
|
if (!active) return;
|
|
if (Notification.permission === 'granted') {
|
|
if (userId && !sessionStorage.getItem(`site-push-synced-${userId}`)) await syncSitePush(userId);
|
|
} else if (Notification.permission === 'default' && !localStorage.getItem(dismissedKey) && !sessionStorage.getItem(askedKey)) {
|
|
sessionStorage.setItem(askedKey, '1');
|
|
setOpen(true);
|
|
}
|
|
}).catch(() => undefined);
|
|
return () => { active = false; window.removeEventListener('notifications:enable', show); };
|
|
}, [configured, userId]);
|
|
function close() {
|
|
if (dontAsk) localStorage.setItem(dismissedKey, '1');
|
|
setOpen(false);
|
|
}
|
|
async function enable() {
|
|
setBusy(true); setError('');
|
|
try {
|
|
if (await Notification.requestPermission() !== 'granted') {
|
|
setError('ยังไม่ได้อนุญาตการแจ้งเตือน เปิดสิทธิ์ในการตั้งค่าเว็บไซต์ของเบราว์เซอร์');
|
|
return;
|
|
}
|
|
if (userId) await syncSitePush(userId);
|
|
close();
|
|
} catch { setError('เปิดการแจ้งเตือนไม่สำเร็จ กรุณาลองอีกครั้ง'); }
|
|
finally { setBusy(false); }
|
|
}
|
|
return <Dialog open={open} onOpenChange={value => { if (!value && !busy) close(); }}><DialogContent>
|
|
<DialogHeader><DialogTitle>รับการแจ้งเตือนจากเว็บไซต์?</DialogTitle><DialogDescription>รับข้อความ Commission คำตอบกลับความคิดเห็น และการแจ้งเตือนอื่นๆ ของเว็บไซต์ในอนาคต แม้ปิดแท็บแล้ว</DialogDescription></DialogHeader>
|
|
{!userId && <p className="text-sm text-muted-foreground">หลังเข้าสู่ระบบ เราจะเชื่อมการแจ้งเตือนกับบัญชีของคุณ</p>}
|
|
<Field orientation="horizontal"><Checkbox id={id} checked={dontAsk} onCheckedChange={setDontAsk} disabled={busy} /><FieldLabel htmlFor={id}>ไม่ต้องถามอีก</FieldLabel></Field>
|
|
{error && <p role="alert" className="text-sm text-destructive">{error}</p>}
|
|
<DialogFooter><Button variant="outline" disabled={busy} onClick={close}>ไว้ก่อน</Button><Button disabled={busy} onClick={() => void enable()}>เปิดการแจ้งเตือน</Button></DialogFooter>
|
|
</DialogContent></Dialog>;
|
|
}
|