"use client"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import { useRouter } from "next/navigation"; import { useAppDispatch } from "@/store/hooks"; import { logout } from "@/store/slices/authSlice"; import { resetStore } from "@/store/resetAction"; import { getStoredUser } from "@/lib/utils/persistAuth"; import { getPremiumStatus, setPremiumStatus } from "@/lib/utils/permissions"; import { clearSession } from "@/lib/utils/clearSession"; import { useToast } from "@/lib/toast"; import { LOCALE_LABELS, SUPPORTED_LOCALES } from "@/lib/constants/locales"; import TransactionListModal from "./TransactionListModal"; interface StaticPage { id: number; title: string; slug: string; content?: string; } interface SettingsModalProps { open: boolean; onClose: () => void; } const LANG_CODES: Record = { en: "EN", gu: "GU", hi: "HI", ar: "AR" }; export default function SettingsModal({ open, onClose }: SettingsModalProps) { const dispatch = useAppDispatch(); const router = useRouter(); const { success, error: showError } = useToast(); const [visible, setVisible] = useState(false); const [pages, setPages] = useState([]); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [currentLocale, setCurrentLocale] = useState("en"); const [txModalOpen, setTxModalOpen] = useState(false); const isPremium = getPremiumStatus(); const user = getStoredUser(); const fetchedRef = useRef(false); // Animate in useEffect(() => { if (open) { requestAnimationFrame(() => setVisible(true)); document.body.style.overflow = "hidden"; if (!fetchedRef.current) { fetchedRef.current = true; fetchPages(); } // Detect current locale from cookie const localeCookie = document.cookie.split(";").find(c => c.trim().startsWith("NEXT_LOCALE=")); if (localeCookie) setCurrentLocale(localeCookie.split("=")[1].trim()); } else { setVisible(false); document.body.style.overflow = ""; } return () => { document.body.style.overflow = ""; }; }, [open]); async function fetchPages() { try { const { default: apiClient } = await import("@/services/api.client"); const { API_ENDPOINTS } = await import("@/lib/constants/apiEndpoints"); const { data } = await apiClient.post<{ result: StaticPage[] }>( API_ENDPOINTS.GET_PAGES, {}, ); setPages(data.result ?? []); } catch { setPages([]); } } function switchLocale(loc: string) { document.cookie = `NEXT_LOCALE=${loc};path=/;max-age=31536000`; setCurrentLocale(loc); window.location.reload(); } async function handleLogout() { // 1. Redux logout action dispatch(logout()); // 2. Reset entire Redux store to initial state dispatch(resetStore()); // 3. Wipe localStorage + cookies clearSession(); // 4. Navigate to login onClose(); router.push("/login"); success("Logged out successfully"); } async function handleDeleteAccount() { dispatch(logout()); dispatch(resetStore()); clearSession(); setPremiumStatus(false); onClose(); setDeleteDialogOpen(false); router.push("/login"); success("Account deleted successfully"); } if (!open && !visible) return null; return ( <> {/* Backdrop */}
{/* Side drawer */}
{/* ── Header ── */}

Settings

{/* ── User info ── */} {user && (
{user.full_name?.charAt(0)?.toUpperCase() ?? "?"}

{user.full_name}

{user.email}

)} {/* ── Subscription ── */}
{isPremium ? (
⭐ DTNews Premium

All premium features unlocked

) : (

Free plan

Upgrade to unlock e-paper, premium articles, and more

Upgrade to Premium
)}
{/* ── Language ── */}
{SUPPORTED_LOCALES.map((loc) => ( ))}
{/* ── Pages from API ── */} {pages.length > 0 && (
{pages.map((page, idx) => ( } label={page.title} href={`/company/${page.slug}`} onClick={onClose} /> ))}
)} {/* ── App ── */}
} label="About DTNews" href="/company/about" onClick={onClose} /> } label="Contact Support" href="/company/contact" onClick={onClose} />
{/* ── Danger zone ── */}

DTNews · DivineTechs IT Company · v1.5

{/* ── Transaction list modal ── */} setTxModalOpen(false)} /> {/* ── Delete account confirmation modal ── */} {deleteDialogOpen && ( <>
setDeleteDialogOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(14,14,17,0.65)", backdropFilter: "blur(4px)", zIndex: 1100 }} />
{/* Warning icon */}

Delete your account?

This will permanently delete your account and all your data. This action cannot be undone.

)} ); } // ── Sub-components ──────────────────────────────────────────────────────────── function Section({ label, children }: { label: string; children: React.ReactNode }) { return (

{label}

{children}
); } function SettingRow({ icon, label, href, onClick }: { icon: React.ReactNode; label: string; href: string; onClick?: () => void }) { return ( (e.currentTarget.style.background = "var(--bg, #f8f9fb)")} onMouseLeave={(e) => (e.currentTarget.style.background = "none")} > {icon} {label} ); } function dangerRowStyle(isDanger: boolean): React.CSSProperties { return { display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6875rem 0.75rem", borderRadius: 8, background: "none", border: "none", cursor: "pointer", width: "100%", textAlign: "left", fontSize: "0.875rem", fontWeight: 500, color: isDanger ? "#C1272D" : "var(--ink, #0e0e11)", transition: "background 0.12s", }; } function iconWrap(color: string): React.CSSProperties { return { width: 28, height: 28, borderRadius: 7, background: color === "#C1272D" ? "rgba(193,39,45,0.08)" : "var(--bg, #f8f9fb)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color, }; }