Compare commits
10 Commits
ea9aceec46
...
feature/em
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
45fd6d34eb | ||
| 30233b430f | |||
|
|
924a28e201 | ||
|
|
2cd646ddea | ||
|
|
3f9e125412 | ||
| 7bca854058 | |||
|
|
96d2a966d7 | ||
|
|
666ae8d59b | ||
| 67f1e4a26a | |||
|
|
613784a1cc |
@@ -84,6 +84,7 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
|
||||
queryKey: ['pos', 'receipt', result?.id],
|
||||
queryFn: () => api.get<{
|
||||
transaction: Transaction & { lineItems: { description: string; qty: number; unitPrice: string; taxAmount: string; lineTotal: string; discountAmount: string }[] }
|
||||
customerEmail: string | null
|
||||
company: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
|
||||
location: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
|
||||
}>(`/v1/transactions/${result!.id}/receipt`),
|
||||
@@ -91,6 +92,19 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
|
||||
})
|
||||
|
||||
const [showReceipt, setShowReceipt] = useState(false)
|
||||
const [emailMode, setEmailMode] = useState(false)
|
||||
const [emailAddress, setEmailAddress] = useState('')
|
||||
const [emailSent, setEmailSent] = useState(false)
|
||||
|
||||
const emailReceiptMutation = useMutation({
|
||||
mutationFn: () => api.post<{ message: string }>(`/v1/transactions/${result!.id}/email-receipt`, { email: emailAddress }),
|
||||
onSuccess: () => {
|
||||
toast.success('Receipt emailed')
|
||||
setEmailMode(false)
|
||||
setEmailSent(true)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (completed && result) {
|
||||
const changeGiven = parseFloat(result.changeGiven ?? '0')
|
||||
@@ -140,14 +154,47 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" className="h-11 gap-2" onClick={() => setShowReceipt(true)}>
|
||||
<Printer className="h-4 w-4" />Receipt
|
||||
</Button>
|
||||
<Button variant="outline" className="h-11 gap-2" disabled>
|
||||
<Mail className="h-4 w-4" />Email
|
||||
</Button>
|
||||
</div>
|
||||
{emailMode ? (
|
||||
<div className="w-full space-y-2">
|
||||
<Label className="text-xs text-muted-foreground">Email receipt to:</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="email"
|
||||
value={emailAddress}
|
||||
onChange={(e) => setEmailAddress(e.target.value)}
|
||||
placeholder="customer@example.com"
|
||||
className="h-9"
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-9 px-4"
|
||||
onClick={() => emailReceiptMutation.mutate()}
|
||||
disabled={!emailAddress || emailReceiptMutation.isPending}
|
||||
>
|
||||
{emailReceiptMutation.isPending ? 'Sending...' : 'Send'}
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-xs" onClick={() => setEmailMode(false)}>Cancel</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" className="h-11 gap-2" onClick={() => setShowReceipt(true)}>
|
||||
<Printer className="h-4 w-4" />Receipt
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-11 gap-2"
|
||||
onClick={() => {
|
||||
setEmailAddress(receiptData?.customerEmail ?? '')
|
||||
setEmailMode(true)
|
||||
}}
|
||||
disabled={emailSent}
|
||||
>
|
||||
<Mail className="h-4 w-4" />{emailSent ? 'Sent' : 'Email'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="w-full h-12 text-base" onClick={handleDone}>
|
||||
New Sale
|
||||
|
||||
66
packages/admin/src/components/ui/alert.tsx
Normal file
66
packages/admin/src/components/ui/alert.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
@@ -1,11 +1,29 @@
|
||||
import { createRootRoute, Outlet } from '@tanstack/react-router'
|
||||
import { Toaster } from 'sonner'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: RootLayout,
|
||||
})
|
||||
|
||||
function RootLayout() {
|
||||
useEffect(() => {
|
||||
fetch('/v1/store/branding')
|
||||
.then((r) => r.ok ? r.json() : null)
|
||||
.then((data: { name: string | null; hasLogo: boolean } | null) => {
|
||||
if (!data) return
|
||||
if (data.name) document.title = data.name
|
||||
if (data.hasLogo) {
|
||||
const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]')
|
||||
?? document.createElement('link')
|
||||
link.rel = 'icon'
|
||||
link.href = '/v1/store/logo'
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Outlet />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createFileRoute, Outlet, Link, redirect, useRouter } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
|
||||
import { queryOptions } from '@tanstack/react-query'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { api } from '@/lib/api-client'
|
||||
@@ -9,6 +9,9 @@ import { moduleListOptions } from '@/api/modules'
|
||||
import { Avatar } from '@/components/shared/avatar-upload'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Users, UserRound, HelpCircle, Shield, UserCog, LogOut, User, Wrench, Package, ClipboardList, FolderOpen, KeyRound, Settings, PanelLeftClose, PanelLeft, CalendarDays, GraduationCap, CalendarRange, BookOpen, BookMarked, Package2, Tag, Truck, ShoppingCart } from 'lucide-react'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
export const Route = createFileRoute('/_authenticated')({
|
||||
beforeLoad: () => {
|
||||
@@ -104,6 +107,58 @@ function NavGroup({ label, children, collapsed }: { label: string; children: Rea
|
||||
)
|
||||
}
|
||||
|
||||
function SetPinModal() {
|
||||
const queryClient = useQueryClient()
|
||||
const [pin, setPin] = useState('')
|
||||
const [confirmPin, setConfirmPin] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const setPinMutation = useMutation({
|
||||
mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
|
||||
toast.success('PIN set successfully')
|
||||
},
|
||||
onError: (err) => setError(err.message),
|
||||
})
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
if (pin.length < 4 || pin.length > 6) { setError('PIN must be 4-6 digits'); return }
|
||||
if (!/^\d+$/.test(pin)) { setError('PIN must be digits only'); return }
|
||||
if (pin !== confirmPin) { setError('PINs do not match'); return }
|
||||
setPinMutation.mutate()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div className="w-full max-w-sm rounded-xl border bg-card p-6 shadow-xl">
|
||||
<h2 className="text-lg font-semibold mb-1">Set your POS PIN</h2>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
A PIN is required to use the Point of Sale. Choose a 4-6 digit PIN you'll use to unlock the terminal.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>PIN</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" autoFocus />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Confirm PIN</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||
<Button type="submit" className="w-full" disabled={setPinMutation.isPending}>
|
||||
{setPinMutation.isPending ? 'Setting...' : 'Set PIN'}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AuthenticatedLayout() {
|
||||
const router = useRouter()
|
||||
const user = useAuthStore((s) => s.user)
|
||||
@@ -112,6 +167,13 @@ function AuthenticatedLayout() {
|
||||
const setPermissions = useAuthStore((s) => s.setPermissions)
|
||||
const permissionsLoaded = useAuthStore((s) => s.permissionsLoaded)
|
||||
|
||||
// Fetch profile for PIN warning
|
||||
const { data: profile } = useQuery(queryOptions({
|
||||
queryKey: ['auth', 'me'],
|
||||
queryFn: () => api.get<{ hasPin: boolean }>('/v1/auth/me'),
|
||||
enabled: !!useAuthStore.getState().token,
|
||||
}))
|
||||
|
||||
// Fetch permissions on mount
|
||||
const { data: permData } = useQuery({
|
||||
...myPermissionsOptions(),
|
||||
@@ -263,6 +325,7 @@ function AuthenticatedLayout() {
|
||||
</div>
|
||||
</nav>
|
||||
<main className="flex-1 p-6 min-h-screen">
|
||||
{profile && !profile.hasPin && <SetPinModal />}
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,22 @@ import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
||||
import { Sun, Moon, Monitor } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { AvatarUpload } from '@/components/shared/avatar-upload'
|
||||
|
||||
interface Profile {
|
||||
id: string
|
||||
email: string
|
||||
firstName: string
|
||||
lastName: string
|
||||
role: string
|
||||
employeeNumber: string | null
|
||||
hasPin: boolean
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/_authenticated/profile')({
|
||||
component: ProfilePage,
|
||||
})
|
||||
@@ -22,21 +34,56 @@ export const Route = createFileRoute('/_authenticated/profile')({
|
||||
function profileOptions() {
|
||||
return queryOptions({
|
||||
queryKey: ['auth', 'me'],
|
||||
queryFn: () => api.get<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me'),
|
||||
queryFn: () => api.get<Profile>('/v1/auth/me'),
|
||||
})
|
||||
}
|
||||
|
||||
function ProfilePage() {
|
||||
const { tab } = Route.useSearch() as { tab?: string }
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
const setAuth = useAuthStore((s) => s.setAuth)
|
||||
const storeUser = useAuthStore((s) => s.user)
|
||||
const storeToken = useAuthStore((s) => s.token)
|
||||
const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
|
||||
|
||||
const { data: profile } = useQuery(profileOptions())
|
||||
|
||||
const [firstName, setFirstName] = useState('')
|
||||
const [lastName, setLastName] = useState('')
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<h1 className="text-2xl font-bold">Profile</h1>
|
||||
|
||||
<Tabs defaultValue={tab === 'security' || tab === 'appearance' ? tab : 'account'}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="security">Security</TabsTrigger>
|
||||
<TabsTrigger value="appearance">Appearance</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="account">
|
||||
<AccountTab profile={profile} queryClient={queryClient} setAuth={setAuth} storeUser={storeUser} storeToken={storeToken} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security">
|
||||
<SecurityTab profile={profile} queryClient={queryClient} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="appearance">
|
||||
<AppearanceTab />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AccountTab({ profile, queryClient, setAuth, storeUser, storeToken }: {
|
||||
profile: Profile | undefined
|
||||
queryClient: ReturnType<typeof useQueryClient>
|
||||
setAuth: (token: string, user: any) => void
|
||||
storeUser: any
|
||||
storeToken: string | null
|
||||
}) {
|
||||
const [firstName, setFirstName] = useState(profile?.firstName ?? '')
|
||||
const [lastName, setLastName] = useState(profile?.lastName ?? '')
|
||||
const [nameLoaded, setNameLoaded] = useState(false)
|
||||
|
||||
if (profile && !nameLoaded) {
|
||||
@@ -45,12 +92,8 @@ function ProfilePage() {
|
||||
setNameLoaded(true)
|
||||
}
|
||||
|
||||
const [currentPassword, setCurrentPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
|
||||
const updateProfileMutation = useMutation({
|
||||
mutationFn: (data: Record<string, unknown>) => api.patch<{ id: string; email: string; firstName: string; lastName: string }>('/v1/auth/me', data),
|
||||
mutationFn: (data: Record<string, unknown>) => api.patch<Profile>('/v1/auth/me', data),
|
||||
onSuccess: (updated) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
|
||||
if (storeToken && storeUser) {
|
||||
@@ -61,6 +104,59 @@ function ProfilePage() {
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Account</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{profile?.id && (
|
||||
<div className="flex items-center gap-4">
|
||||
<AvatarUpload entityType="user" entityId={profile.id} size="lg" />
|
||||
<div>
|
||||
<p className="font-medium">{profile.firstName} {profile.lastName}</p>
|
||||
<p className="text-sm text-muted-foreground">{profile.email}</p>
|
||||
{profile.employeeNumber && (
|
||||
<p className="text-xs text-muted-foreground">Employee #{profile.employeeNumber}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input value={profile?.email ?? ''} disabled className="opacity-60" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>First Name</Label>
|
||||
<Input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Last Name</Label>
|
||||
<Input value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => updateProfileMutation.mutate({ firstName, lastName })}
|
||||
disabled={updateProfileMutation.isPending}
|
||||
>
|
||||
{updateProfileMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function SecurityTab({ profile, queryClient }: {
|
||||
profile: Profile | undefined
|
||||
queryClient: ReturnType<typeof useQueryClient>
|
||||
}) {
|
||||
const [currentPassword, setCurrentPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [pin, setPin] = useState('')
|
||||
const [confirmPin, setConfirmPin] = useState('')
|
||||
|
||||
const changePasswordMutation = useMutation({
|
||||
mutationFn: () => api.post('/v1/auth/change-password', { currentPassword, newPassword }),
|
||||
onSuccess: () => {
|
||||
@@ -72,6 +168,26 @@ function ProfilePage() {
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const setPinMutation = useMutation({
|
||||
mutationFn: () => api.post('/v1/auth/set-pin', { pin }),
|
||||
onSuccess: () => {
|
||||
setPin('')
|
||||
setConfirmPin('')
|
||||
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
|
||||
toast.success('PIN set')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const removePinMutation = useMutation({
|
||||
mutationFn: () => api.del('/v1/auth/pin'),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['auth', 'me'] })
|
||||
toast.success('PIN removed')
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
function handlePasswordChange() {
|
||||
if (newPassword.length < 12) {
|
||||
toast.error('Password must be at least 12 characters')
|
||||
@@ -84,47 +200,24 @@ function ProfilePage() {
|
||||
changePasswordMutation.mutate()
|
||||
}
|
||||
|
||||
function handleSetPin() {
|
||||
if (pin.length < 4 || pin.length > 6) {
|
||||
toast.error('PIN must be 4-6 digits')
|
||||
return
|
||||
}
|
||||
if (!/^\d+$/.test(pin)) {
|
||||
toast.error('PIN must be digits only')
|
||||
return
|
||||
}
|
||||
if (pin !== confirmPin) {
|
||||
toast.error('PINs do not match')
|
||||
return
|
||||
}
|
||||
setPinMutation.mutate()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<h1 className="text-2xl font-bold">Profile</h1>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Account</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{profile?.id && (
|
||||
<div className="flex items-center gap-4">
|
||||
<AvatarUpload entityType="user" entityId={profile.id} size="lg" />
|
||||
<div>
|
||||
<p className="font-medium">{profile.firstName} {profile.lastName}</p>
|
||||
<p className="text-sm text-muted-foreground">{profile.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input value={profile?.email ?? ''} disabled className="opacity-60" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>First Name</Label>
|
||||
<Input value={firstName} onChange={(e) => setFirstName(e.target.value)} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Last Name</Label>
|
||||
<Input value={lastName} onChange={(e) => setLastName(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => updateProfileMutation.mutate({ firstName, lastName })}
|
||||
disabled={updateProfileMutation.isPending}
|
||||
>
|
||||
{updateProfileMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Change Password</CardTitle>
|
||||
@@ -150,53 +243,113 @@ function ProfilePage() {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Appearance</CardTitle>
|
||||
<CardTitle className="text-lg">POS PIN</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Mode</Label>
|
||||
<div className="flex gap-2">
|
||||
{[
|
||||
{ value: 'light' as const, icon: Sun, label: 'Light' },
|
||||
{ value: 'dark' as const, icon: Moon, label: 'Dark' },
|
||||
{ value: 'system' as const, icon: Monitor, label: 'System' },
|
||||
].map((m) => (
|
||||
<Button
|
||||
key={m.value}
|
||||
variant={mode === m.value ? 'default' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setMode(m.value)}
|
||||
>
|
||||
<m.icon className="mr-2 h-4 w-4" />
|
||||
{m.label}
|
||||
{profile?.employeeNumber && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your employee number is <span className="font-mono font-medium text-foreground">{profile.employeeNumber}</span>.
|
||||
To unlock the POS, enter your employee number followed by your PIN.
|
||||
</p>
|
||||
)}
|
||||
{profile?.hasPin ? (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">You have a PIN set. You can change or remove it below.</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>New PIN (4-6 digits)</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Confirm PIN</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
|
||||
{setPinMutation.isPending ? 'Saving...' : 'Change PIN'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Color Theme</Label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{themes.map((t) => (
|
||||
<Button
|
||||
key={t.name}
|
||||
variant={colorTheme === t.name ? 'default' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setColorTheme(t.name)}
|
||||
>
|
||||
<span
|
||||
className="mr-2 h-3 w-3 rounded-full border inline-block"
|
||||
style={{ backgroundColor: `hsl(${t.light.primary})` }}
|
||||
/>
|
||||
{t.label}
|
||||
<Button variant="outline" onClick={() => removePinMutation.mutate()} disabled={removePinMutation.isPending}>
|
||||
{removePinMutation.isPending ? 'Removing...' : 'Remove PIN'}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">Set a PIN to unlock the Point of Sale terminal.</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>PIN (4-6 digits)</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={pin} onChange={(e) => setPin(e.target.value)} placeholder="****" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Confirm PIN</Label>
|
||||
<Input type="password" inputMode="numeric" maxLength={6} value={confirmPin} onChange={(e) => setConfirmPin(e.target.value)} placeholder="****" />
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleSetPin} disabled={setPinMutation.isPending}>
|
||||
{setPinMutation.isPending ? 'Saving...' : 'Set PIN'}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AppearanceTab() {
|
||||
const { mode, colorTheme, setMode, setColorTheme } = useThemeStore()
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Appearance</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Mode</Label>
|
||||
<div className="flex gap-2">
|
||||
{[
|
||||
{ value: 'light' as const, icon: Sun, label: 'Light' },
|
||||
{ value: 'dark' as const, icon: Moon, label: 'Dark' },
|
||||
{ value: 'system' as const, icon: Monitor, label: 'System' },
|
||||
].map((m) => (
|
||||
<Button
|
||||
key={m.value}
|
||||
variant={mode === m.value ? 'default' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setMode(m.value)}
|
||||
>
|
||||
<m.icon className="mr-2 h-4 w-4" />
|
||||
{m.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Color Theme</Label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{themes.map((t) => (
|
||||
<Button
|
||||
key={t.name}
|
||||
variant={colorTheme === t.name ? 'default' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setColorTheme(t.name)}
|
||||
>
|
||||
<span
|
||||
className="mr-2 h-3 w-3 rounded-full border inline-block"
|
||||
style={{ backgroundColor: `hsl(${t.light.primary})` }}
|
||||
/>
|
||||
{t.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
|
||||
import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search } from 'lucide-react'
|
||||
import { ArrowLeft, Plus, Trash2, RotateCcw, Save, Search, Mail } from 'lucide-react'
|
||||
import { PdfModal } from '@/components/repairs/pdf-modal'
|
||||
import { toast } from 'sonner'
|
||||
import { useAuthStore } from '@/stores/auth.store'
|
||||
@@ -78,6 +78,17 @@ function RepairTicketDetailPage() {
|
||||
const { data: lineItemsData, isLoading: itemsLoading } = useQuery(repairLineItemListOptions(ticketId, params))
|
||||
|
||||
const [editFields, setEditFields] = useState<Record<string, string>>({})
|
||||
const [emailEstimateOpen, setEmailEstimateOpen] = useState(false)
|
||||
const [estimateEmail, setEstimateEmail] = useState('')
|
||||
|
||||
const emailEstimateMutation = useMutation({
|
||||
mutationFn: () => api.post<{ message: string }>(`/v1/repair-tickets/${ticketId}/email-estimate`, { email: estimateEmail }),
|
||||
onSuccess: () => {
|
||||
toast.success('Estimate emailed')
|
||||
setEmailEstimateOpen(false)
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const statusMutation = useMutation({
|
||||
mutationFn: (status: string) => repairTicketMutations.updateStatus(ticketId, status),
|
||||
@@ -188,6 +199,37 @@ function RepairTicketDetailPage() {
|
||||
<h1 className="text-2xl font-bold">Ticket #{ticket.ticketNumber}</h1>
|
||||
<p className="text-sm text-muted-foreground">{ticket.customerName} — {ticket.itemDescription ?? 'No item description'}</p>
|
||||
</div>
|
||||
<Dialog open={emailEstimateOpen} onOpenChange={setEmailEstimateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-2" onClick={() => setEstimateEmail((ticket as any).customerEmail ?? '')}>
|
||||
<Mail className="h-4 w-4" />Email Estimate
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-sm">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Email Estimate</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Send to</Label>
|
||||
<Input
|
||||
type="email"
|
||||
value={estimateEmail}
|
||||
onChange={(e) => setEstimateEmail(e.target.value)}
|
||||
placeholder="customer@example.com"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full"
|
||||
onClick={() => emailEstimateMutation.mutate()}
|
||||
disabled={!estimateEmail || emailEstimateMutation.isPending}
|
||||
>
|
||||
{emailEstimateMutation.isPending ? 'Sending...' : 'Send Estimate'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<PdfModal ticket={ticket} lineItems={lineItemsData?.data ?? []} ticketId={ticketId} />
|
||||
</div>
|
||||
|
||||
|
||||
144
packages/backend/__tests__/utils/email-templates.test.ts
Normal file
144
packages/backend/__tests__/utils/email-templates.test.ts
Normal file
@@ -0,0 +1,144 @@
|
||||
import { describe, it, expect } from 'bun:test'
|
||||
import {
|
||||
renderReceiptEmailHtml,
|
||||
renderReceiptEmailText,
|
||||
renderEstimateEmailHtml,
|
||||
renderEstimateEmailText,
|
||||
} from '../../src/utils/email-templates.js'
|
||||
|
||||
const mockReceipt = {
|
||||
transaction: {
|
||||
transactionNumber: 'TXN-20260405-001',
|
||||
subtotal: '100.00',
|
||||
discountTotal: '10.00',
|
||||
taxTotal: '7.43',
|
||||
total: '97.43',
|
||||
paymentMethod: 'cash',
|
||||
amountTendered: '100.00',
|
||||
changeGiven: '2.57',
|
||||
roundingAdjustment: null,
|
||||
completedAt: '2026-04-05T12:00:00Z',
|
||||
lineItems: [
|
||||
{ description: 'Guitar Strings', qty: 2, unitPrice: '12.99', taxAmount: '2.14', lineTotal: '25.98', discountAmount: null },
|
||||
{ description: 'Tuner', qty: 1, unitPrice: '74.02', taxAmount: '5.29', lineTotal: '74.02', discountAmount: null },
|
||||
],
|
||||
},
|
||||
company: { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: { street: '123 Main St', city: 'Austin', state: 'TX', zip: '78701' } },
|
||||
location: null,
|
||||
}
|
||||
|
||||
const mockTicket = {
|
||||
ticketNumber: 'RPR-001',
|
||||
customerName: 'Jane Doe',
|
||||
customerPhone: '555-5678',
|
||||
itemDescription: 'Acoustic Guitar',
|
||||
serialNumber: 'AG-12345',
|
||||
problemDescription: 'Cracked neck joint',
|
||||
estimatedCost: '250.00',
|
||||
promisedDate: '2026-04-12',
|
||||
status: 'pending_approval',
|
||||
}
|
||||
|
||||
const mockLineItems = [
|
||||
{ itemType: 'labor', description: 'Neck repair', qty: 1, unitPrice: '150.00', totalPrice: '150.00' },
|
||||
{ itemType: 'part', description: 'Wood glue & clamps', qty: 1, unitPrice: '25.00', totalPrice: '25.00' },
|
||||
{ itemType: 'flat_rate', description: 'Setup & restring', qty: 1, unitPrice: '75.00', totalPrice: '75.00' },
|
||||
]
|
||||
|
||||
const mockCompany = { name: 'Test Store', phone: '555-1234', email: 'store@test.com', address: null }
|
||||
|
||||
describe('renderReceiptEmailHtml', () => {
|
||||
it('renders HTML with transaction details', () => {
|
||||
const html = renderReceiptEmailHtml(mockReceipt as any)
|
||||
expect(html).toContain('TXN-20260405-001')
|
||||
expect(html).toContain('Test Store')
|
||||
expect(html).toContain('Guitar Strings')
|
||||
expect(html).toContain('Tuner')
|
||||
expect(html).toContain('$97.43')
|
||||
expect(html).toContain('$100.00')
|
||||
expect(html).toContain('Powered by LunarFront')
|
||||
})
|
||||
|
||||
it('includes discount when present', () => {
|
||||
const html = renderReceiptEmailHtml(mockReceipt as any)
|
||||
expect(html).toContain('Discount')
|
||||
expect(html).toContain('$10.00')
|
||||
})
|
||||
|
||||
it('includes payment details for cash', () => {
|
||||
const html = renderReceiptEmailHtml(mockReceipt as any)
|
||||
expect(html).toContain('Cash')
|
||||
expect(html).toContain('$2.57')
|
||||
})
|
||||
|
||||
it('includes receipt config when provided', () => {
|
||||
const config = { receipt_footer: 'Thank you!', receipt_return_policy: '30-day returns' }
|
||||
const html = renderReceiptEmailHtml(mockReceipt as any, config)
|
||||
expect(html).toContain('Thank you!')
|
||||
expect(html).toContain('30-day returns')
|
||||
})
|
||||
|
||||
it('includes company address', () => {
|
||||
const html = renderReceiptEmailHtml(mockReceipt as any)
|
||||
expect(html).toContain('123 Main St')
|
||||
expect(html).toContain('Austin')
|
||||
})
|
||||
})
|
||||
|
||||
describe('renderReceiptEmailText', () => {
|
||||
it('renders plain text with transaction details', () => {
|
||||
const text = renderReceiptEmailText(mockReceipt as any)
|
||||
expect(text).toContain('TXN-20260405-001')
|
||||
expect(text).toContain('Guitar Strings')
|
||||
expect(text).toContain('Total: $97.43')
|
||||
expect(text).toContain('Cash')
|
||||
})
|
||||
})
|
||||
|
||||
describe('renderEstimateEmailHtml', () => {
|
||||
it('renders HTML with ticket details', () => {
|
||||
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
|
||||
expect(html).toContain('RPR-001')
|
||||
expect(html).toContain('Jane Doe')
|
||||
expect(html).toContain('Acoustic Guitar')
|
||||
expect(html).toContain('AG-12345')
|
||||
expect(html).toContain('Cracked neck joint')
|
||||
expect(html).toContain('$250.00')
|
||||
expect(html).toContain('Powered by LunarFront')
|
||||
})
|
||||
|
||||
it('renders line items with types', () => {
|
||||
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
|
||||
expect(html).toContain('Labor')
|
||||
expect(html).toContain('Neck repair')
|
||||
expect(html).toContain('Part')
|
||||
expect(html).toContain('Flat Rate')
|
||||
expect(html).toContain('Setup & restring')
|
||||
})
|
||||
|
||||
it('includes promised date', () => {
|
||||
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
|
||||
expect(html).toContain('Estimated completion')
|
||||
expect(html).toContain('Apr')
|
||||
})
|
||||
|
||||
it('renders without line items using estimatedCost', () => {
|
||||
const html = renderEstimateEmailHtml(mockTicket as any, [], mockCompany as any)
|
||||
expect(html).toContain('$250.00')
|
||||
})
|
||||
|
||||
it('includes company phone', () => {
|
||||
const html = renderEstimateEmailHtml(mockTicket as any, mockLineItems as any, mockCompany as any)
|
||||
expect(html).toContain('555-1234')
|
||||
})
|
||||
})
|
||||
|
||||
describe('renderEstimateEmailText', () => {
|
||||
it('renders plain text with ticket details', () => {
|
||||
const text = renderEstimateEmailText(mockTicket as any, mockLineItems as any, mockCompany as any)
|
||||
expect(text).toContain('RPR-001')
|
||||
expect(text).toContain('Jane Doe')
|
||||
expect(text).toContain('Neck repair')
|
||||
expect(text).toContain('$250.00')
|
||||
})
|
||||
})
|
||||
@@ -114,6 +114,10 @@ async function setupDatabase() {
|
||||
await testSql`INSERT INTO module_config (slug, name, description, licensed, enabled) VALUES (${m.slug}, ${m.name}, ${m.description}, true, ${m.enabled}) ON CONFLICT (slug) DO NOTHING`
|
||||
}
|
||||
|
||||
// Seed test email provider so email endpoints work without real provider
|
||||
await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.provider', 'test', false) ON CONFLICT (key) DO NOTHING`
|
||||
await testSql`INSERT INTO app_settings (key, value, is_encrypted) VALUES ('email.from_address', 'Test Store <noreply@test.com>', false) ON CONFLICT (key) DO NOTHING`
|
||||
|
||||
await testSql.end()
|
||||
console.log(' Database ready')
|
||||
}
|
||||
|
||||
@@ -1051,4 +1051,48 @@ suite('POS', { tags: ['pos'] }, (t) => {
|
||||
// Cleanup
|
||||
await t.api.post(`/v1/drawer/${drawer.data.id}/close`, { closingBalance: 100 })
|
||||
})
|
||||
|
||||
// ─── Email Receipt ──────────────────────────────────────────────────────────
|
||||
|
||||
t.test('emails a receipt for a completed transaction', { tags: ['transactions', 'email'] }, async () => {
|
||||
// Create and complete a transaction
|
||||
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Email Test Item', qty: 1, unitPrice: 25 })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
|
||||
|
||||
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'customer@test.com' })
|
||||
t.assert.status(res, 200)
|
||||
t.assert.equal(res.data.message, 'Receipt sent')
|
||||
t.assert.equal(res.data.sentTo, 'customer@test.com')
|
||||
})
|
||||
|
||||
t.test('rejects email receipt with invalid email', { tags: ['transactions', 'email', 'validation'] }, async () => {
|
||||
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Bad Email Item', qty: 1, unitPrice: 10 })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
|
||||
|
||||
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, { email: 'not-an-email' })
|
||||
t.assert.status(res, 400)
|
||||
})
|
||||
|
||||
t.test('rejects email receipt with missing body', { tags: ['transactions', 'email', 'validation'] }, async () => {
|
||||
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'No Body Item', qty: 1, unitPrice: 10 })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
|
||||
|
||||
const res = await t.api.post(`/v1/transactions/${txn.data.id}/email-receipt`, {})
|
||||
t.assert.status(res, 400)
|
||||
})
|
||||
|
||||
t.test('receipt response includes customerEmail', { tags: ['transactions', 'email'] }, async () => {
|
||||
// Create account with email
|
||||
const acct = await t.api.post('/v1/accounts', { name: 'Email Customer', email: 'acct@test.com', billingMode: 'consolidated' })
|
||||
const txn = await t.api.post('/v1/transactions', { transactionType: 'sale', locationId: LOCATION_ID, accountId: acct.data.id })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/line-items`, { description: 'Account Item', qty: 1, unitPrice: 50 })
|
||||
await t.api.post(`/v1/transactions/${txn.data.id}/complete`, { paymentMethod: 'card_present' })
|
||||
|
||||
const receipt = await t.api.get(`/v1/transactions/${txn.data.id}/receipt`)
|
||||
t.assert.status(receipt, 200)
|
||||
t.assert.equal(receipt.data.customerEmail, 'acct@test.com')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -510,4 +510,55 @@ suite('Repairs', { tags: ['repairs'] }, (t) => {
|
||||
const fileRes = await fetch(`${t.baseUrl}${signedRes.data.url}`)
|
||||
t.assert.equal(fileRes.status, 200)
|
||||
})
|
||||
|
||||
// ─── Email Estimate ─────────────────────────────────────────────────────────
|
||||
|
||||
t.test('emails a repair estimate', { tags: ['tickets', 'email'] }, async () => {
|
||||
const ticket = await t.api.post('/v1/repair-tickets', {
|
||||
customerName: 'Email Estimate Customer',
|
||||
itemDescription: 'Broken Laptop',
|
||||
problemDescription: 'Won\'t power on',
|
||||
conditionIn: 'poor',
|
||||
estimatedCost: 200,
|
||||
})
|
||||
await t.api.post(`/v1/repair-tickets/${ticket.data.id}/line-items`, {
|
||||
itemType: 'labor',
|
||||
description: 'Diagnostic fee',
|
||||
qty: 1,
|
||||
unitPrice: 50,
|
||||
})
|
||||
|
||||
const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'customer@test.com' })
|
||||
t.assert.status(res, 200)
|
||||
t.assert.equal(res.data.message, 'Estimate sent')
|
||||
t.assert.equal(res.data.sentTo, 'customer@test.com')
|
||||
})
|
||||
|
||||
t.test('rejects estimate email with invalid email', { tags: ['tickets', 'email', 'validation'] }, async () => {
|
||||
const ticket = await t.api.post('/v1/repair-tickets', {
|
||||
customerName: 'Bad Email Customer',
|
||||
problemDescription: 'Test',
|
||||
conditionIn: 'good',
|
||||
})
|
||||
const res = await t.api.post(`/v1/repair-tickets/${ticket.data.id}/email-estimate`, { email: 'bad' })
|
||||
t.assert.status(res, 400)
|
||||
})
|
||||
|
||||
t.test('returns 404 for estimate email on nonexistent ticket', { tags: ['tickets', 'email', 'validation'] }, async () => {
|
||||
const res = await t.api.post('/v1/repair-tickets/00000000-0000-0000-0000-000000000000/email-estimate', { email: 'test@test.com' })
|
||||
t.assert.status(res, 404)
|
||||
})
|
||||
|
||||
t.test('ticket detail includes customerEmail from account', { tags: ['tickets', 'email'] }, async () => {
|
||||
const acct = await t.api.post('/v1/accounts', { name: 'Repair Email Acct', email: 'repair@test.com', billingMode: 'consolidated' })
|
||||
const ticket = await t.api.post('/v1/repair-tickets', {
|
||||
customerName: 'Repair Email Acct',
|
||||
accountId: acct.data.id,
|
||||
problemDescription: 'Email test',
|
||||
conditionIn: 'good',
|
||||
})
|
||||
const detail = await t.api.get(`/v1/repair-tickets/${ticket.data.id}`)
|
||||
t.assert.status(detail, 200)
|
||||
t.assert.equal(detail.data.customerEmail, 'repair@test.com')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
-- Auto-assign employee_number on user insert if not provided
|
||||
CREATE OR REPLACE FUNCTION assign_employee_number()
|
||||
RETURNS TRIGGER AS $$
|
||||
DECLARE next_num INT;
|
||||
BEGIN
|
||||
IF NEW.employee_number IS NULL OR NEW.employee_number = '' THEN
|
||||
SELECT COALESCE(MAX(employee_number::int), 1000) + 1
|
||||
INTO next_num
|
||||
FROM "user"
|
||||
WHERE employee_number ~ '^\d+$';
|
||||
NEW.employee_number := next_num::text;
|
||||
END IF;
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
|
||||
DROP TRIGGER IF EXISTS trg_assign_employee_number ON "user";
|
||||
CREATE TRIGGER trg_assign_employee_number
|
||||
BEFORE INSERT ON "user"
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION assign_employee_number();
|
||||
|
||||
-- Backfill any users missing an employee number
|
||||
DO $$ DECLARE r RECORD; num INT;
|
||||
BEGIN
|
||||
SELECT COALESCE(MAX(employee_number::int), 1000) INTO num FROM "user" WHERE employee_number ~ '^\d+$';
|
||||
FOR r IN (SELECT id FROM "user" WHERE employee_number IS NULL OR employee_number = '' ORDER BY created_at) LOOP
|
||||
num := num + 1;
|
||||
UPDATE "user" SET employee_number = num::text WHERE id = r.id;
|
||||
END LOOP;
|
||||
END $$;
|
||||
@@ -323,6 +323,13 @@
|
||||
"when": 1775770000000,
|
||||
"tag": "0045_registers-reports",
|
||||
"breakpoints": true
|
||||
},
|
||||
{
|
||||
"idx": 46,
|
||||
"version": "7",
|
||||
"when": 1775860000000,
|
||||
"tag": "0046_auto-employee-number",
|
||||
"breakpoints": true
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -37,8 +37,10 @@ import { RbacService } from './services/rbac.service.js'
|
||||
import { ModuleService } from './services/module.service.js'
|
||||
import { AppConfigService } from './services/config.service.js'
|
||||
import { SettingsService } from './services/settings.service.js'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import { users } from './db/schema/users.js'
|
||||
import { companies } from './db/schema/stores.js'
|
||||
import { roles, userRoles } from './db/schema/rbac.js'
|
||||
import { EmailService } from './services/email.service.js'
|
||||
import bcrypt from 'bcryptjs'
|
||||
|
||||
@@ -55,6 +57,13 @@ async function seedInitialUser(app: Awaited<ReturnType<typeof buildApp>>) {
|
||||
const tempPassword = crypto.randomUUID()
|
||||
const passwordHash = await bcrypt.hash(tempPassword, 10)
|
||||
const [user] = await app.db.insert(users).values({ email, passwordHash, firstName, lastName, role: 'admin' }).returning({ id: users.id })
|
||||
|
||||
// Assign the Admin RBAC role
|
||||
const [adminRole] = await app.db.select({ id: roles.id }).from(roles).where(eq(roles.name, 'Admin')).limit(1)
|
||||
if (adminRole) {
|
||||
await app.db.insert(userRoles).values({ userId: user.id, roleId: adminRole.id })
|
||||
}
|
||||
|
||||
app.log.info({ email }, 'Initial admin user created')
|
||||
|
||||
// Send welcome email with password setup link
|
||||
|
||||
@@ -274,6 +274,8 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
|
||||
firstName: users.firstName,
|
||||
lastName: users.lastName,
|
||||
role: users.role,
|
||||
employeeNumber: users.employeeNumber,
|
||||
pinHash: users.pinHash,
|
||||
createdAt: users.createdAt,
|
||||
})
|
||||
.from(users)
|
||||
@@ -281,7 +283,16 @@ export const authRoutes: FastifyPluginAsync = async (app) => {
|
||||
.limit(1)
|
||||
|
||||
if (!user) return reply.status(404).send({ error: { message: 'User not found', statusCode: 404 } })
|
||||
return reply.send(user)
|
||||
return reply.send({
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
firstName: user.firstName,
|
||||
lastName: user.lastName,
|
||||
role: user.role,
|
||||
employeeNumber: user.employeeNumber,
|
||||
hasPin: !!user.pinHash,
|
||||
createdAt: user.createdAt,
|
||||
})
|
||||
})
|
||||
|
||||
// Update current user profile
|
||||
|
||||
@@ -13,7 +13,13 @@ import {
|
||||
RepairServiceTemplateCreateSchema,
|
||||
RepairServiceTemplateUpdateSchema,
|
||||
} from '@lunarfront/shared/schemas'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import { z } from 'zod'
|
||||
import { RepairTicketService, RepairLineItemService, RepairBatchService, RepairNoteService, RepairServiceTemplateService } from '../../services/repair.service.js'
|
||||
import { accounts } from '../../db/schema/accounts.js'
|
||||
import { companies } from '../../db/schema/stores.js'
|
||||
import { EmailService } from '../../services/email.service.js'
|
||||
import { renderEstimateEmailHtml, renderEstimateEmailText } from '../../utils/email-templates.js'
|
||||
|
||||
export const repairRoutes: FastifyPluginAsync = async (app) => {
|
||||
// --- Repair Tickets ---
|
||||
@@ -59,7 +65,14 @@ export const repairRoutes: FastifyPluginAsync = async (app) => {
|
||||
const { id } = request.params as { id: string }
|
||||
const ticket = await RepairTicketService.getById(app.db, id)
|
||||
if (!ticket) return reply.status(404).send({ error: { message: 'Repair ticket not found', statusCode: 404 } })
|
||||
return reply.send(ticket)
|
||||
|
||||
let customerEmail: string | null = null
|
||||
if (ticket.accountId) {
|
||||
const [acct] = await app.db.select({ email: accounts.email }).from(accounts).where(eq(accounts.id, ticket.accountId)).limit(1)
|
||||
customerEmail = acct?.email ?? null
|
||||
}
|
||||
|
||||
return reply.send({ ...ticket, customerEmail })
|
||||
})
|
||||
|
||||
app.patch('/repair-tickets/:id', { preHandler: [app.authenticate, app.requirePermission('repairs.edit')] }, async (request, reply) => {
|
||||
@@ -84,6 +97,42 @@ export const repairRoutes: FastifyPluginAsync = async (app) => {
|
||||
return reply.send(ticket)
|
||||
})
|
||||
|
||||
app.post('/repair-tickets/:id/email-estimate', { preHandler: [app.authenticate, app.requirePermission('repairs.view')] }, async (request, reply) => {
|
||||
const { id } = request.params as { id: string }
|
||||
const parsed = z.object({ email: z.string().email() }).safeParse(request.body)
|
||||
if (!parsed.success) {
|
||||
return reply.status(400).send({ error: { message: 'Valid email is required', statusCode: 400 } })
|
||||
}
|
||||
|
||||
// Rate limit: max 5 emails per ticket per hour
|
||||
const rateKey = `email-estimate:${id}`
|
||||
const count = await app.redis.incr(rateKey)
|
||||
if (count === 1) await app.redis.expire(rateKey, 3600)
|
||||
if (count > 5) {
|
||||
return reply.status(429).send({ error: { message: 'Too many emails for this estimate. Try again later.', statusCode: 429 } })
|
||||
}
|
||||
|
||||
const ticket = await RepairTicketService.getById(app.db, id)
|
||||
if (!ticket) return reply.status(404).send({ error: { message: 'Repair ticket not found', statusCode: 404 } })
|
||||
|
||||
const lineItemsResult = await RepairLineItemService.listByTicket(app.db, id, { page: 1, limit: 500 })
|
||||
const [company] = await app.db.select().from(companies).limit(1)
|
||||
if (!company) return reply.status(500).send({ error: { message: 'Store not configured', statusCode: 500 } })
|
||||
|
||||
const html = renderEstimateEmailHtml(ticket as any, lineItemsResult.data as any[], { name: company.name, phone: company.phone, email: company.email, address: company.address as any })
|
||||
const text = renderEstimateEmailText(ticket as any, lineItemsResult.data as any[], { name: company.name, phone: company.phone, email: company.email, address: company.address as any })
|
||||
|
||||
await EmailService.send(app.db, {
|
||||
to: parsed.data.email,
|
||||
subject: `Repair Estimate — Ticket #${ticket.ticketNumber}`,
|
||||
html,
|
||||
text,
|
||||
})
|
||||
|
||||
request.log.info({ ticketId: id, email: parsed.data.email, userId: request.user.id }, 'Estimate email sent')
|
||||
return reply.send({ message: 'Estimate sent', sentTo: parsed.data.email })
|
||||
})
|
||||
|
||||
app.delete('/repair-tickets/:id', { preHandler: [app.authenticate, app.requirePermission('repairs.admin')] }, async (request, reply) => {
|
||||
const { id } = request.params as { id: string }
|
||||
const ticket = await RepairTicketService.delete(app.db, id)
|
||||
|
||||
@@ -7,7 +7,11 @@ import {
|
||||
ApplyDiscountSchema,
|
||||
CompleteTransactionSchema,
|
||||
} from '@lunarfront/shared/schemas'
|
||||
import { inArray } from 'drizzle-orm'
|
||||
import { TransactionService } from '../../services/transaction.service.js'
|
||||
import { appConfig } from '../../db/schema/stores.js'
|
||||
import { EmailService } from '../../services/email.service.js'
|
||||
import { renderReceiptEmailHtml, renderReceiptEmailText } from '../../utils/email-templates.js'
|
||||
|
||||
const FromRepairBodySchema = z.object({
|
||||
locationId: z.string().uuid().optional(),
|
||||
@@ -64,6 +68,45 @@ export const transactionRoutes: FastifyPluginAsync = async (app) => {
|
||||
return reply.send(receipt)
|
||||
})
|
||||
|
||||
app.post('/transactions/:id/email-receipt', { preHandler: [app.authenticate, app.requirePermission('pos.view')] }, async (request, reply) => {
|
||||
const { id } = request.params as { id: string }
|
||||
const parsed = z.object({ email: z.string().email() }).safeParse(request.body)
|
||||
if (!parsed.success) {
|
||||
return reply.status(400).send({ error: { message: 'Valid email is required', statusCode: 400 } })
|
||||
}
|
||||
|
||||
// Rate limit: max 5 emails per transaction per hour
|
||||
const rateKey = `email-receipt:${id}`
|
||||
const count = await app.redis.incr(rateKey)
|
||||
if (count === 1) await app.redis.expire(rateKey, 3600)
|
||||
if (count > 5) {
|
||||
return reply.status(429).send({ error: { message: 'Too many emails for this receipt. Try again later.', statusCode: 429 } })
|
||||
}
|
||||
|
||||
const receipt = await TransactionService.getReceipt(app.db, id)
|
||||
const storeName = receipt.company?.name ?? 'Store'
|
||||
|
||||
// Fetch receipt config
|
||||
const configRows = await app.db.select({ key: appConfig.key, value: appConfig.value })
|
||||
.from(appConfig)
|
||||
.where(inArray(appConfig.key, ['receipt_header', 'receipt_footer', 'receipt_return_policy', 'receipt_social']))
|
||||
const config: Record<string, string> = {}
|
||||
for (const row of configRows) if (row.value) config[row.key] = row.value
|
||||
|
||||
const html = renderReceiptEmailHtml(receipt as any, config)
|
||||
const text = renderReceiptEmailText(receipt as any, config)
|
||||
|
||||
await EmailService.send(app.db, {
|
||||
to: parsed.data.email,
|
||||
subject: `Your receipt from ${storeName} — ${receipt.transaction.transactionNumber}`,
|
||||
html,
|
||||
text,
|
||||
})
|
||||
|
||||
request.log.info({ transactionId: id, email: parsed.data.email, userId: request.user.id }, 'Receipt email sent')
|
||||
return reply.send({ message: 'Receipt sent', sentTo: parsed.data.email })
|
||||
})
|
||||
|
||||
app.post('/transactions/:id/line-items', { preHandler: [app.authenticate, app.requirePermission('pos.edit')] }, async (request, reply) => {
|
||||
const { id } = request.params as { id: string }
|
||||
const parsed = TransactionLineItemCreateSchema.safeParse(request.body)
|
||||
|
||||
@@ -87,6 +87,21 @@ class SmtpProvider implements EmailProvider {
|
||||
}
|
||||
}
|
||||
|
||||
class TestProvider implements EmailProvider {
|
||||
static lastEmail: SendOpts | null = null
|
||||
static emails: SendOpts[] = []
|
||||
|
||||
async send(opts: SendOpts): Promise<void> {
|
||||
TestProvider.lastEmail = opts
|
||||
TestProvider.emails.push(opts)
|
||||
}
|
||||
|
||||
static reset() {
|
||||
TestProvider.lastEmail = null
|
||||
TestProvider.emails = []
|
||||
}
|
||||
}
|
||||
|
||||
export const EmailService = {
|
||||
async send(db: PostgresJsDatabase<any>, opts: SendOpts): Promise<void> {
|
||||
const provider = await SettingsService.get(db, 'email.provider')
|
||||
@@ -99,8 +114,14 @@ export const EmailService = {
|
||||
return new SendGridProvider(db).send(opts)
|
||||
case 'smtp':
|
||||
return new SmtpProvider().send(opts)
|
||||
case 'test':
|
||||
return new TestProvider().send(opts)
|
||||
default:
|
||||
throw new Error('Email provider not configured. Set email.provider in app_settings.')
|
||||
}
|
||||
},
|
||||
|
||||
getTestEmails: () => TestProvider.emails,
|
||||
getLastTestEmail: () => TestProvider.lastEmail,
|
||||
resetTestEmails: () => TestProvider.reset(),
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
import { products, inventoryUnits } from '../db/schema/inventory.js'
|
||||
import { repairTickets, repairLineItems } from '../db/schema/repairs.js'
|
||||
import { companies, locations } from '../db/schema/stores.js'
|
||||
import { accounts } from '../db/schema/accounts.js'
|
||||
import { NotFoundError, ValidationError, ConflictError } from '../lib/errors.js'
|
||||
import { TaxService } from './tax.service.js'
|
||||
import type {
|
||||
@@ -473,8 +474,16 @@ export const TransactionService = {
|
||||
location = loc ?? null
|
||||
}
|
||||
|
||||
// Resolve customer email from linked account
|
||||
let customerEmail: string | null = null
|
||||
if (txn.accountId) {
|
||||
const [acct] = await db.select({ email: accounts.email }).from(accounts).where(eq(accounts.id, txn.accountId)).limit(1)
|
||||
customerEmail = acct?.email ?? null
|
||||
}
|
||||
|
||||
return {
|
||||
transaction: txn,
|
||||
customerEmail,
|
||||
company: company
|
||||
? {
|
||||
name: company.name,
|
||||
|
||||
319
packages/backend/src/utils/email-templates.ts
Normal file
319
packages/backend/src/utils/email-templates.ts
Normal file
@@ -0,0 +1,319 @@
|
||||
/**
|
||||
* Server-side HTML email template renderers for receipts and repair estimates.
|
||||
* Uses inline CSS for email-client compatibility.
|
||||
*/
|
||||
|
||||
interface Address {
|
||||
street?: string
|
||||
city?: string
|
||||
state?: string
|
||||
zip?: string
|
||||
}
|
||||
|
||||
interface CompanyInfo {
|
||||
name: string
|
||||
phone?: string | null
|
||||
email?: string | null
|
||||
address?: Address | null
|
||||
}
|
||||
|
||||
interface ReceiptLineItem {
|
||||
description: string
|
||||
qty: number
|
||||
unitPrice: string
|
||||
taxAmount: string
|
||||
lineTotal: string
|
||||
discountAmount?: string | null
|
||||
}
|
||||
|
||||
interface ReceiptTransaction {
|
||||
transactionNumber: string
|
||||
subtotal: string
|
||||
discountTotal: string
|
||||
taxTotal: string
|
||||
total: string
|
||||
paymentMethod: string | null
|
||||
amountTendered: string | null
|
||||
changeGiven: string | null
|
||||
roundingAdjustment: string | null
|
||||
completedAt: string | null
|
||||
lineItems: ReceiptLineItem[]
|
||||
}
|
||||
|
||||
interface ReceiptConfig {
|
||||
receipt_header?: string
|
||||
receipt_footer?: string
|
||||
receipt_return_policy?: string
|
||||
receipt_social?: string
|
||||
}
|
||||
|
||||
interface ReceiptData {
|
||||
transaction: ReceiptTransaction
|
||||
company: CompanyInfo | null
|
||||
location: CompanyInfo | null
|
||||
}
|
||||
|
||||
interface RepairLineItem {
|
||||
itemType: string
|
||||
description: string
|
||||
qty: number
|
||||
unitPrice: string
|
||||
totalPrice: string
|
||||
}
|
||||
|
||||
interface RepairTicket {
|
||||
ticketNumber: string
|
||||
customerName: string
|
||||
customerPhone?: string | null
|
||||
itemDescription?: string | null
|
||||
serialNumber?: string | null
|
||||
problemDescription?: string | null
|
||||
estimatedCost?: string | null
|
||||
promisedDate?: string | null
|
||||
status: string
|
||||
}
|
||||
|
||||
// ── Shared layout ──────────────────────────────────────────────────────────
|
||||
|
||||
function wrapEmailLayout(storeName: string, bodyHtml: string): string {
|
||||
return `
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 480px; margin: 0 auto; padding: 40px 20px; color: #333;">
|
||||
<h2 style="color: #1a1a2e; margin: 0 0 24px 0; font-size: 20px;">${esc(storeName)}</h2>
|
||||
${bodyHtml}
|
||||
<hr style="border: none; border-top: 1px solid #eee; margin: 32px 0;" />
|
||||
<p style="color: #aaa; font-size: 11px; margin: 0;">Powered by LunarFront</p>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
function esc(s: string): string {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"')
|
||||
}
|
||||
|
||||
function formatAddress(addr?: Address | null): string {
|
||||
if (!addr) return ''
|
||||
const parts = [addr.street, [addr.city, addr.state].filter(Boolean).join(', '), addr.zip].filter(Boolean)
|
||||
return parts.join('<br />')
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string | null): string {
|
||||
if (!dateStr) return ''
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function formatDateOnly(dateStr: string | null): string {
|
||||
if (!dateStr) return ''
|
||||
const d = new Date(dateStr)
|
||||
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
}
|
||||
|
||||
const PAYMENT_LABELS: Record<string, string> = {
|
||||
cash: 'Cash',
|
||||
card_present: 'Card',
|
||||
card_keyed: 'Card (Keyed)',
|
||||
check: 'Check',
|
||||
store_credit: 'Store Credit',
|
||||
other: 'Other',
|
||||
}
|
||||
|
||||
const TYPE_LABELS: Record<string, string> = {
|
||||
labor: 'Labor',
|
||||
part: 'Part',
|
||||
flat_rate: 'Flat Rate',
|
||||
misc: 'Misc',
|
||||
consumable: 'Consumable',
|
||||
}
|
||||
|
||||
// ── Receipt email ──────────────────────────────────────────────────────────
|
||||
|
||||
export function renderReceiptEmailHtml(data: ReceiptData, config?: ReceiptConfig): string {
|
||||
const txn = data.transaction
|
||||
const storeName = data.company?.name ?? 'Store'
|
||||
|
||||
let companyBlock = ''
|
||||
if (data.company) {
|
||||
const addr = formatAddress(data.company.address)
|
||||
companyBlock = `
|
||||
<div style="font-size: 13px; color: #666; margin-bottom: 16px;">
|
||||
${addr ? `<div>${addr}</div>` : ''}
|
||||
${data.company.phone ? `<div>${esc(data.company.phone)}</div>` : ''}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
const headerText = config?.receipt_header ? `<p style="font-size: 13px; color: #555; margin: 0 0 16px 0;">${esc(config.receipt_header)}</p>` : ''
|
||||
|
||||
const lineRows = txn.lineItems.map(item => `
|
||||
<tr>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
|
||||
<td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.lineTotal}</td>
|
||||
</tr>
|
||||
`).join('')
|
||||
|
||||
const discountRow = parseFloat(txn.discountTotal) > 0
|
||||
? `<tr><td style="padding: 4px 0; font-size: 13px;">Discount</td><td style="padding: 4px 0; font-size: 13px; text-align: right; color: #e57373;">-$${txn.discountTotal}</td></tr>`
|
||||
: ''
|
||||
|
||||
const roundingRow = txn.roundingAdjustment && parseFloat(txn.roundingAdjustment) !== 0
|
||||
? `<tr><td style="padding: 4px 0; font-size: 13px;">Rounding</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.roundingAdjustment}</td></tr>`
|
||||
: ''
|
||||
|
||||
const paymentBlock = txn.paymentMethod ? `
|
||||
<div style="margin-top: 16px; font-size: 13px; color: #666;">
|
||||
<div>Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}</div>
|
||||
${txn.amountTendered && txn.paymentMethod === 'cash' ? `<div>Tendered: $${txn.amountTendered}</div>` : ''}
|
||||
${txn.changeGiven && parseFloat(txn.changeGiven) > 0 ? `<div>Change: $${txn.changeGiven}</div>` : ''}
|
||||
</div>
|
||||
` : ''
|
||||
|
||||
const footerText = config?.receipt_footer ? `<p style="font-size: 12px; color: #888; margin: 16px 0 0 0; text-align: center;">${esc(config.receipt_footer)}</p>` : ''
|
||||
const policyText = config?.receipt_return_policy ? `<p style="font-size: 11px; color: #999; margin: 8px 0 0 0; text-align: center;">${esc(config.receipt_return_policy)}</p>` : ''
|
||||
const socialText = config?.receipt_social ? `<p style="font-size: 11px; color: #999; margin: 4px 0 0 0; text-align: center;">${esc(config.receipt_social)}</p>` : ''
|
||||
|
||||
const body = `
|
||||
${companyBlock}
|
||||
${headerText}
|
||||
<div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
|
||||
<div style="font-size: 13px; color: #666;">
|
||||
<strong style="color: #333;">Receipt #${esc(txn.transactionNumber)}</strong><br />
|
||||
${formatDate(txn.completedAt)}
|
||||
</div>
|
||||
</div>
|
||||
<table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #eee;">
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Item</th>
|
||||
<th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${lineRows}
|
||||
</tbody>
|
||||
</table>
|
||||
<table style="width: 50%; margin-left: auto; border-collapse: collapse;">
|
||||
<tr><td style="padding: 4px 0; font-size: 13px;">Subtotal</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.subtotal}</td></tr>
|
||||
${discountRow}
|
||||
<tr><td style="padding: 4px 0; font-size: 13px;">Tax</td><td style="padding: 4px 0; font-size: 13px; text-align: right;">$${txn.taxTotal}</td></tr>
|
||||
${roundingRow}
|
||||
<tr style="border-top: 2px solid #333;"><td style="padding: 8px 0; font-size: 15px; font-weight: 700;">Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${txn.total}</td></tr>
|
||||
</table>
|
||||
${paymentBlock}
|
||||
${footerText}
|
||||
${policyText}
|
||||
${socialText}
|
||||
`
|
||||
|
||||
return wrapEmailLayout(storeName, body)
|
||||
}
|
||||
|
||||
export function renderReceiptEmailText(data: ReceiptData, config?: ReceiptConfig): string {
|
||||
const txn = data.transaction
|
||||
const storeName = data.company?.name ?? 'Store'
|
||||
const lines = [
|
||||
storeName,
|
||||
`Receipt #${txn.transactionNumber}`,
|
||||
formatDate(txn.completedAt),
|
||||
'',
|
||||
...txn.lineItems.map(i => `${i.description} x${i.qty} — $${i.lineTotal}`),
|
||||
'',
|
||||
`Subtotal: $${txn.subtotal}`,
|
||||
...(parseFloat(txn.discountTotal) > 0 ? [`Discount: -$${txn.discountTotal}`] : []),
|
||||
`Tax: $${txn.taxTotal}`,
|
||||
`Total: $${txn.total}`,
|
||||
'',
|
||||
...(txn.paymentMethod ? [`Paid by: ${PAYMENT_LABELS[txn.paymentMethod] ?? txn.paymentMethod}`] : []),
|
||||
...(config?.receipt_footer ? ['', config.receipt_footer] : []),
|
||||
]
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
// ── Repair estimate email ──────────────────────────────────────────────────
|
||||
|
||||
export function renderEstimateEmailHtml(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
|
||||
const storeName = company.name
|
||||
|
||||
const lineRows = lineItems.map(item => `
|
||||
<tr>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${TYPE_LABELS[item.itemType] ?? item.itemType}</td>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px;">${esc(item.description)}</td>
|
||||
<td style="padding: 6px 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: center;">${item.qty}</td>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.unitPrice}</td>
|
||||
<td style="padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; text-align: right;">$${item.totalPrice}</td>
|
||||
</tr>
|
||||
`).join('')
|
||||
|
||||
const estimatedTotal = ticket.estimatedCost
|
||||
? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${ticket.estimatedCost}</td></tr>`
|
||||
: ''
|
||||
|
||||
const lineItemTotal = lineItems.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0).toFixed(2)
|
||||
const lineItemTotalRow = !ticket.estimatedCost && lineItems.length > 0
|
||||
? `<tr style="border-top: 2px solid #333;"><td colspan="4" style="padding: 8px 0; font-size: 15px; font-weight: 700;">Estimated Total</td><td style="padding: 8px 0; font-size: 15px; font-weight: 700; text-align: right;">$${lineItemTotal}</td></tr>`
|
||||
: ''
|
||||
|
||||
const body = `
|
||||
<div style="background: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
|
||||
<div style="font-size: 13px; color: #666;">
|
||||
<strong style="color: #333;">Repair Estimate — Ticket #${esc(ticket.ticketNumber)}</strong><br />
|
||||
${esc(ticket.customerName)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 16px; font-size: 13px; color: #555;">
|
||||
${ticket.itemDescription ? `<div><strong>Item:</strong> ${esc(ticket.itemDescription)}${ticket.serialNumber ? ` (S/N: ${esc(ticket.serialNumber)})` : ''}</div>` : ''}
|
||||
${ticket.problemDescription ? `<div style="margin-top: 4px;"><strong>Issue:</strong> ${esc(ticket.problemDescription)}</div>` : ''}
|
||||
${ticket.promisedDate ? `<div style="margin-top: 4px;"><strong>Estimated completion:</strong> ${formatDateOnly(ticket.promisedDate)}</div>` : ''}
|
||||
</div>
|
||||
|
||||
${lineItems.length > 0 ? `
|
||||
<table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
|
||||
<thead>
|
||||
<tr style="border-bottom: 2px solid #eee;">
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Type</th>
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: left; color: #888; font-weight: 600;">Description</th>
|
||||
<th style="padding: 6px 8px; font-size: 12px; text-align: center; color: #888; font-weight: 600;">Qty</th>
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Price</th>
|
||||
<th style="padding: 6px 0; font-size: 12px; text-align: right; color: #888; font-weight: 600;">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${lineRows}
|
||||
${estimatedTotal}
|
||||
${lineItemTotalRow}
|
||||
</tbody>
|
||||
</table>
|
||||
` : `
|
||||
${ticket.estimatedCost ? `<div style="font-size: 15px; font-weight: 700; margin-bottom: 16px;">Estimated Cost: $${ticket.estimatedCost}</div>` : ''}
|
||||
`}
|
||||
|
||||
<p style="font-size: 12px; color: #888;">This is an estimate and the final cost may vary. Please contact us with any questions.</p>
|
||||
${company.phone ? `<p style="font-size: 12px; color: #888; margin-top: 4px;">Phone: ${esc(company.phone)}</p>` : ''}
|
||||
`
|
||||
|
||||
return wrapEmailLayout(storeName, body)
|
||||
}
|
||||
|
||||
export function renderEstimateEmailText(ticket: RepairTicket, lineItems: RepairLineItem[], company: CompanyInfo): string {
|
||||
const lines = [
|
||||
company.name,
|
||||
`Repair Estimate — Ticket #${ticket.ticketNumber}`,
|
||||
`Customer: ${ticket.customerName}`,
|
||||
'',
|
||||
...(ticket.itemDescription ? [`Item: ${ticket.itemDescription}${ticket.serialNumber ? ` (S/N: ${ticket.serialNumber})` : ''}`] : []),
|
||||
...(ticket.problemDescription ? [`Issue: ${ticket.problemDescription}`] : []),
|
||||
...(ticket.promisedDate ? [`Estimated completion: ${formatDateOnly(ticket.promisedDate)}`] : []),
|
||||
'',
|
||||
...lineItems.map(i => `${TYPE_LABELS[i.itemType] ?? i.itemType}: ${i.description} x${i.qty} — $${i.totalPrice}`),
|
||||
'',
|
||||
...(ticket.estimatedCost ? [`Estimated Total: $${ticket.estimatedCost}`] : []),
|
||||
'',
|
||||
'This is an estimate and the final cost may vary.',
|
||||
...(company.phone ? [`Phone: ${company.phone}`] : []),
|
||||
]
|
||||
return lines.join('\n')
|
||||
}
|
||||
Reference in New Issue
Block a user