import React, { useCallback, useEffect, useState } from 'react'; import { AlertCircle, BarChart3, ExternalLink, Gift, Loader2, MessageSquarePlus, Power, RefreshCw, Save, Settings2, Users } from 'lucide-react'; import SettingsPanel, { TABS } from './components/SettingsPanel.jsx'; import Preview from './components/Preview.jsx'; import Customers from './components/Customers.jsx'; import Analytics from './components/Analytics.jsx'; import { Notice, ProBadge, Toast } from './components/ui.jsx'; import PerformanceCard from '../../shared/PerformanceCard.jsx'; import { api, money, pointValue } from './points.jsx'; const FEATURE_REQUEST_URL = 'https://wisecampaign.canny.io/feature-requests'; // On/off is saved on its own, so it never counts as an unsaved change const snapshot = (settings) => JSON.stringify({ ...settings, enabled: undefined }); const VIEWS = [ { id: 'settings', label: 'Settings', icon: }, { id: 'customers', label: 'Customers', icon: }, { id: 'analytics', label: 'Analytics', icon: , pro: true }, ]; export default function App() { const [data, setData] = useState(null); const [settings, setSettings] = useState(null); const [saved, setSaved] = useState(''); const [status, setStatus] = useState('loading'); const [isSaving, setIsSaving] = useState(false); const [toast, setToast] = useState(null); const [view, setView] = useState('settings'); const [tab, setTab] = useState('earn'); const [focus, setFocus] = useState('product'); const notify = useCallback((t) => setToast(t), []); const closeToast = useCallback(() => setToast(null), []); const isDirty = status === 'ready' && snapshot(settings) !== saved; const isPro = !!data?.isPro; const load = useCallback(async () => { setStatus('loading'); try { const payload = await api(); setData(payload); setSettings(payload.settings); setSaved(snapshot(payload.settings)); setStatus('ready'); } catch (e) { setStatus('error'); } }, []); useEffect(() => { load(); }, [load]); useEffect(() => { const warn = (e) => { if (isDirty) { e.preventDefault(); e.returnValue = ''; } }; window.addEventListener('beforeunload', warn); return () => window.removeEventListener('beforeunload', warn); }, [isDirty]); const update = (key, value) => setSettings((prev) => ({ ...prev, [key]: value })); const handleSave = async () => { setIsSaving(true); try { const payload = await api('', { method: 'POST', body: settings }); setSettings(payload.settings); setSaved(snapshot(payload.settings)); setToast({ type: 'success', message: 'wiseRewards settings saved!' }); } catch (e) { setToast({ type: 'error', message: e.message }); } finally { setIsSaving(false); } }; const toggleEnabled = async () => { const next = !settings.enabled; update('enabled', next); try { await api('/status', { method: 'POST', body: { enabled: next } }); setToast({ type: 'success', message: next ? 'wiseRewards is on: customers earn and use points.' : 'wiseRewards is off.' }); } catch (e) { update('enabled', !next); setToast({ type: 'error', message: e.message }); } }; if (status !== 'ready') { return (
{status === 'loading' ? ( <> Loading wiseRewards… ) : ( <> Could not load wiseRewards. )}
); } const stats = data.stats; return (
WiseCampaign
wiseRewards
{VIEWS.map((v) => ( ))}
{isDirty && ( Unsaved changes )}
{view === 'settings' ? (
Live preview · example shopper with 1,250 points
) : (
{view === 'customers' ? ( ) : ( )}
)} {toast && }
); }