feat: support contact links and SIE import UX polish (#138)
* feat: event log, pending operations, and MCP staging - Event log system: persist bus events to event_log table for external automation platforms. Batch insert for transaction.synced. Daily cleanup cron at 02:00 UTC. - Pending operations: MCP write tools (categorize, create customer, create invoice) now stage to pending_operations instead of executing directly. Users review and commit/reject from /pending in the web UI. - Granskning page: card-based review UI with expandable previews, commit/reject dialogs. Only shown in nav when pending ops exist. - Commit route re-executes using core lib functions (no extension imports). Guards against stale state (double-commit, deleted entities). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: stage new MCP write tools after main merge Add staging for 4 new write tools from #133: - mark_invoice_paid, send_invoice, mark_invoice_sent, match_transaction_invoice - Expand pending_operations CHECK constraint - Add commit executors with full execution logic - Add UI labels and generic preview component - Remove confirm parameter from categorize (single-call staging) - Fix UUID in pending op title (fetch transaction description) - Hide Granskning nav when no pending ops Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: address PR review feedback - Fix TS build error: use `select('*, customer:customers(*)')` for match_transaction_invoice to avoid array type inference - Add status guard to commitSendInvoice (prevents duplicate sends) - Replace auth.admin.getUserById with user email from session auth - Restore optimistic lock check in commitMatchTransactionInvoice - Fix tool description typo: expense_software → expense_office Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add support contact links and improve SIE import UX Add a SupportLink component with a contact dialog throughout the app (nav, help page, settings, MFA, error pages, empty states). Improve SIE import flow with phased loading states, structured skip breakdowns, and an elapsed-time counter. Fix MFA enroll stale factor cleanup and URL encoding for settings return path. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: address PR review — open redirect, XSS, test cleanup, fallback email - Validate returnTo is a relative path in MFA enroll (prevents open redirect) - Add afterEach import to event-log-handler tests (fixes handler leak) - HTML-escape user-supplied subject and message in support email body - Replace hardcoded personal email with support@gnubok.se fallback Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
f3ae3cd361
commit
5cb8c3c1e4
@@ -15,6 +15,7 @@ import {
|
||||
Plus,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react'
|
||||
import { SupportLink } from '@/components/ui/support-link'
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: LucideIcon
|
||||
@@ -25,6 +26,7 @@ interface EmptyStateProps {
|
||||
onAction?: () => void
|
||||
secondaryActionLabel?: string
|
||||
secondaryActionHref?: string
|
||||
supportHint?: boolean
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
@@ -41,6 +43,7 @@ export function EmptyState({
|
||||
onAction,
|
||||
secondaryActionLabel,
|
||||
secondaryActionHref,
|
||||
supportHint,
|
||||
className,
|
||||
children,
|
||||
}: EmptyStateProps) {
|
||||
@@ -56,6 +59,14 @@ export function EmptyState({
|
||||
<h3 className="text-lg font-medium mb-2">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-sm mb-6 text-balance">{description}</p>
|
||||
|
||||
{supportHint && (
|
||||
<div className="mb-6">
|
||||
<SupportLink variant="muted" subject="Behöver hjälp att komma igång">
|
||||
Behöver du hjälp? Kontakta support
|
||||
</SupportLink>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(actionLabel || children) && (
|
||||
<div className="flex flex-col sm:flex-row items-center gap-3">
|
||||
{actionHref && actionLabel && (
|
||||
@@ -121,6 +132,7 @@ export function EmptyTransactions() {
|
||||
description="Importera kontoutdrag från din bank för att automatiskt bokföra och få koll på ekonomin."
|
||||
actionLabel="Importera transaktioner"
|
||||
actionHref="/import"
|
||||
supportHint
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -155,6 +167,7 @@ export function NoBankConnected() {
|
||||
description="Importera kontoutdrag från din bank för att automatiskt bokföra och få bättre koll på ekonomin."
|
||||
actionLabel="Importera transaktioner"
|
||||
actionHref="/import"
|
||||
supportHint
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Mail, Loader2, Send } from 'lucide-react'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { useToast } from '@/components/ui/use-toast'
|
||||
|
||||
interface SupportLinkProps {
|
||||
variant?: 'inline' | 'muted'
|
||||
subject?: string
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function SupportLink({
|
||||
variant = 'inline',
|
||||
subject,
|
||||
children,
|
||||
className,
|
||||
}: SupportLinkProps) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
const [sent, setSent] = useState(false)
|
||||
const { toast } = useToast()
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (message.trim().length < 5) return
|
||||
|
||||
setIsSending(true)
|
||||
try {
|
||||
const res = await fetch('/api/support/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ subject, message: message.trim() }),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || 'Kunde inte skicka meddelandet')
|
||||
}
|
||||
|
||||
setSent(true)
|
||||
setTimeout(() => {
|
||||
setOpen(false)
|
||||
setSent(false)
|
||||
setMessage('')
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Kunde inte skicka',
|
||||
description: error instanceof Error ? error.message : 'Försök igen.',
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setIsSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
function handleOpenChange(next: boolean) {
|
||||
setOpen(next)
|
||||
if (!next) {
|
||||
setSent(false)
|
||||
setMessage('')
|
||||
}
|
||||
}
|
||||
|
||||
const trigger =
|
||||
variant === 'muted' ? (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Mail className="h-3 w-3" />
|
||||
{children ?? 'Kontakta support'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 text-primary hover:text-primary/80 underline-offset-4 hover:underline transition-colors text-sm cursor-pointer',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children ?? 'Kontakta support'}
|
||||
</button>
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Kontakta support</DialogTitle>
|
||||
<DialogDescription>
|
||||
Beskriv ditt ärende så återkommer vi så snart vi kan.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{sent ? (
|
||||
<div className="flex flex-col items-center py-6 gap-3">
|
||||
<div className="p-3 rounded-full bg-success/10">
|
||||
<Send className="h-6 w-6 text-success" />
|
||||
</div>
|
||||
<p className="text-sm font-medium">Tack! Vi har mottagit ditt meddelande.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Textarea
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="Beskriv vad du behöver hjälp med..."
|
||||
className="min-h-[120px] resize-none"
|
||||
maxLength={5000}
|
||||
disabled={isSending}
|
||||
autoFocus
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1.5">
|
||||
{message.length}/5000 tecken
|
||||
</p>
|
||||
<DialogFooter className="mt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(false)}
|
||||
disabled={isSending}
|
||||
>
|
||||
Avbryt
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSending || message.trim().length < 5}
|
||||
>
|
||||
{isSending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Skickar...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="mr-2 h-4 w-4" />
|
||||
Skicka
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user