Replace mailto with server-sent invoice request
On checkout error, customer can click "send us your order details" instead of opening their email app. Posts to /api/invoice-request which: - Emails shop@ with full order details, reply-to set to customer's address so replies go directly to them - Sends customer a confirmation email with order summary Falls back to the mailto link if the API call fails. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
8aaf2f1dcb
commit
92e9abdb84
45
estore/src/app/api/invoice-request/route.ts
Normal file
45
estore/src/app/api/invoice-request/route.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import type { EmailLineItem } from '@/lib/notify'
|
||||
|
||||
interface InvoiceRequestBody {
|
||||
customerName: string
|
||||
customerEmail: string
|
||||
customerPhone: string
|
||||
lineItems: EmailLineItem[]
|
||||
fulfillment: 'delivery' | 'pickup'
|
||||
slotISO?: string
|
||||
address?: string
|
||||
deliveryNotes?: string
|
||||
deliveryCents?: number
|
||||
grandTotal: number
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
let body: InvoiceRequestBody
|
||||
try {
|
||||
body = (await req.json()) as InvoiceRequestBody
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'Invalid request body' }, { status: 400 })
|
||||
}
|
||||
|
||||
const { customerName, customerEmail, customerPhone, lineItems, grandTotal } = body
|
||||
|
||||
if (
|
||||
typeof customerName !== 'string' || !customerName.trim() ||
|
||||
typeof customerEmail !== 'string' || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(customerEmail) ||
|
||||
typeof customerPhone !== 'string' || !customerPhone.trim() ||
|
||||
!Array.isArray(lineItems) || lineItems.length === 0 ||
|
||||
typeof grandTotal !== 'number'
|
||||
) {
|
||||
return NextResponse.json({ error: 'Missing or invalid required fields' }, { status: 400 })
|
||||
}
|
||||
|
||||
try {
|
||||
const { sendInvoiceRequest } = await import('@/lib/notify')
|
||||
await sendInvoiceRequest(body)
|
||||
return NextResponse.json({ success: true })
|
||||
} catch (err) {
|
||||
console.error('[invoice-request] Failed to send:', err)
|
||||
return NextResponse.json({ error: 'Failed to send — please email us directly.' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@ -147,6 +147,7 @@ export default function PaymentForm({ payload, onSuccess, onError, active }: Pro
|
||||
const [applePayReady, setApplePayReady] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [invoiceState, setInvoiceState] = useState<'idle' | 'sending' | 'sent' | 'failed'>('idle')
|
||||
|
||||
const cardRef = useRef<SquareCard | null>(null)
|
||||
const googlePayRef = useRef<SquareWalletMethod | null>(null)
|
||||
@ -331,6 +332,32 @@ export default function PaymentForm({ payload, onSuccess, onError, active }: Pro
|
||||
)
|
||||
}
|
||||
|
||||
async function handleSendInvoice() {
|
||||
setInvoiceState('sending')
|
||||
try {
|
||||
const res = await fetch(`${BASE}/api/invoice-request`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
customerName: `${payload.customerFirstName} ${payload.customerLastName}`.trim(),
|
||||
customerEmail: payload.customerEmail,
|
||||
customerPhone: payload.customerPhone,
|
||||
lineItems: payload.lineItems,
|
||||
fulfillment: payload.deliverySlotISO ? 'delivery' : 'pickup',
|
||||
slotISO: payload.deliverySlotISO ?? payload.pickupSlotISO,
|
||||
address: payload.deliveryAddress,
|
||||
deliveryNotes: payload.deliveryNotes,
|
||||
deliveryCents: payload.deliveryCents,
|
||||
grandTotal: payload.grandTotal,
|
||||
}),
|
||||
})
|
||||
if (!res.ok) throw new Error('send failed')
|
||||
setInvoiceState('sent')
|
||||
} catch {
|
||||
setInvoiceState('failed')
|
||||
}
|
||||
}
|
||||
|
||||
const hasWallet = googlePayReady || applePayReady
|
||||
|
||||
return (
|
||||
@ -392,14 +419,36 @@ export default function PaymentForm({ payload, onSuccess, onError, active }: Pro
|
||||
{error}
|
||||
</p>
|
||||
<p style={{ fontSize: '0.75rem', color: '#555', marginTop: '0.5rem', lineHeight: 1.5 }}>
|
||||
If this keeps happening, you can{' '}
|
||||
<a
|
||||
href={buildMailtoLink(payload)}
|
||||
style={{ color: '#0d6e75', textDecoration: 'underline' }}
|
||||
{invoiceState === 'sent' ? (
|
||||
<span style={{ color: '#1a7a40' }}>
|
||||
✓ Sent! Check your email at {payload.customerEmail} — we'll be in touch shortly.
|
||||
</span>
|
||||
) : invoiceState === 'failed' ? (
|
||||
<>
|
||||
Couldn't send automatically.{' '}
|
||||
<a href={buildMailtoLink(payload)} style={{ color: '#0d6e75', textDecoration: 'underline' }}>
|
||||
Email us directly
|
||||
</a>{' '}
|
||||
and we'll invoice you.
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
If this keeps happening,{' '}
|
||||
<button
|
||||
onClick={handleSendInvoice}
|
||||
disabled={invoiceState === 'sending'}
|
||||
style={{
|
||||
background: 'none', border: 'none', padding: 0,
|
||||
color: '#0d6e75', textDecoration: 'underline',
|
||||
cursor: invoiceState === 'sending' ? 'default' : 'pointer',
|
||||
fontSize: 'inherit',
|
||||
}}
|
||||
>
|
||||
email us your order details
|
||||
</a>
|
||||
{' '}and we'll send you an invoice.
|
||||
{invoiceState === 'sending' ? 'Sending…' : 'send us your order details'}
|
||||
</button>
|
||||
{' '}and we'll invoice you.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -107,6 +107,7 @@ async function send(params: {
|
||||
to: string
|
||||
subject: string
|
||||
text: string
|
||||
replyTo?: string
|
||||
attachments?: Array<{ filename: string; content: string; contentType: string }>
|
||||
}): Promise<void> {
|
||||
const from = process.env.ALERT_EMAIL_FROM ?? 'shop@beachpartyballoons.com'
|
||||
@ -122,6 +123,7 @@ async function send(params: {
|
||||
await transporter.sendMail({
|
||||
from,
|
||||
to: params.to,
|
||||
replyTo: params.replyTo,
|
||||
subject: params.subject,
|
||||
text: params.text,
|
||||
attachments: params.attachments,
|
||||
@ -453,6 +455,89 @@ export async function sendBookingRequest(params: {
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendInvoiceRequest(params: {
|
||||
customerName: string
|
||||
customerEmail: string
|
||||
customerPhone: string
|
||||
lineItems: EmailLineItem[]
|
||||
fulfillment: 'delivery' | 'pickup'
|
||||
slotISO?: string
|
||||
address?: string
|
||||
deliveryNotes?: string
|
||||
deliveryCents?: number
|
||||
grandTotal: number // cents
|
||||
}): Promise<void> {
|
||||
const to = process.env.ALERT_EMAIL_TO ?? 'info@beachpartyballoons.com'
|
||||
const from = process.env.ALERT_EMAIL_FROM ?? 'shop@beachpartyballoons.com'
|
||||
const firstName = params.customerName.split(' ')[0] || params.customerName
|
||||
|
||||
const fmtD = (iso: string) =>
|
||||
new Date(iso).toLocaleString('en-US', { timeZone: 'America/New_York', dateStyle: 'full', timeStyle: 'short' })
|
||||
const fmt$ = (c: number) => `$${(c / 100).toFixed(2)}`
|
||||
|
||||
const fulfillmentLines = [
|
||||
`Type: ${params.fulfillment === 'delivery' ? 'Delivery' : 'Pickup'}`,
|
||||
params.slotISO ? `Date/time: ${fmtD(params.slotISO)}` : null,
|
||||
params.address ? `Address: ${params.address}` : null,
|
||||
params.deliveryNotes ? `Notes: ${params.deliveryNotes}` : null,
|
||||
].filter((l): l is string => l !== null)
|
||||
|
||||
const itemsBlock = formatLineItems(params.lineItems)
|
||||
const itemSubtotal = params.lineItems.reduce((s: number, li: EmailLineItem) => s + li.priceCents * li.quantity, 0)
|
||||
const estTax = Math.round(itemSubtotal * 0.0635)
|
||||
|
||||
const priceLines = [
|
||||
`Items: ${fmt$(itemSubtotal)}`,
|
||||
params.deliveryCents ? `Delivery: ${fmt$(params.deliveryCents)}` : null,
|
||||
`Est. tax: ${fmt$(estTax)}`,
|
||||
`Total: ${fmt$(params.grandTotal)}`,
|
||||
].filter((l): l is string => l !== null)
|
||||
|
||||
// ── Alert email to shop (reply-to set to customer so you can reply directly) ─
|
||||
await send({
|
||||
to,
|
||||
replyTo: params.customerEmail,
|
||||
subject: `📋 Invoice request — ${params.customerName}`,
|
||||
text: [
|
||||
`Invoice request from ${params.customerName}`,
|
||||
`Reply to this email to contact the customer directly.`,
|
||||
'',
|
||||
`Customer: ${params.customerName}`,
|
||||
`Email: ${params.customerEmail}`,
|
||||
`Phone: ${params.customerPhone}`,
|
||||
'',
|
||||
...fulfillmentLines,
|
||||
'',
|
||||
itemsBlock,
|
||||
'',
|
||||
...priceLines,
|
||||
].join('\n'),
|
||||
})
|
||||
|
||||
// ── Confirmation to customer ──────────────────────────────────────────────────
|
||||
await send({
|
||||
to: params.customerEmail,
|
||||
replyTo: from,
|
||||
subject: `We received your request — Beach Party Balloons`,
|
||||
text: [
|
||||
`Hi ${firstName},`,
|
||||
'',
|
||||
`We got your order details and will send you an invoice shortly.`,
|
||||
'',
|
||||
itemsBlock,
|
||||
'',
|
||||
...fulfillmentLines,
|
||||
'',
|
||||
...priceLines,
|
||||
'',
|
||||
`Questions? Just reply to this email or call us any time.`,
|
||||
'',
|
||||
`— Beach Party Balloons`,
|
||||
`beachpartyballoons.com`,
|
||||
].join('\n'),
|
||||
})
|
||||
}
|
||||
|
||||
export async function sendAdminErrorAlert(params: {
|
||||
subject: string
|
||||
message: string
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user