Compare commits
No commits in common. "7bc84cea75eb479b639354e3eb3d8b30a23254fb" and "1861e10d6d7c222a229e946510c0085b611c8b25" have entirely different histories.
7bc84cea75
...
1861e10d6d
@ -1,11 +0,0 @@
|
||||
{
|
||||
"order": [
|
||||
"latex",
|
||||
"birthday",
|
||||
"mylar-bouquets",
|
||||
"graduation",
|
||||
"letters-and-numbers",
|
||||
"other"
|
||||
],
|
||||
"hidden": []
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"mothers-day": {
|
||||
"windowStart": "04-10"
|
||||
},
|
||||
"graduation": {
|
||||
"windowStart": "04-01"
|
||||
}
|
||||
}
|
||||
@ -7,7 +7,6 @@ import type { CatalogItem, ModifierList } from '@/data/mock-catalog'
|
||||
import type { ItemOverride } from '@/lib/overrides'
|
||||
import { DEFAULT_HOURS, minsToTime, timeToMins } from '@/lib/hours-config'
|
||||
import type { HoursConfig, DayHours } from '@/lib/hours-config'
|
||||
import AdminColorFilter from '@/components/AdminColorFilter'
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
@ -43,11 +42,7 @@ function CategoryDisplayEditor({ items }: { items: AdminItem[] }) {
|
||||
const catalogCats = useMemo(() => {
|
||||
const seen = new Map<string, string>()
|
||||
items.forEach((item) => {
|
||||
const cats = item.categories ?? [item.category]
|
||||
const labels = item.categoryLabels ?? [item.categoryLabel]
|
||||
cats.forEach((slug, i) => {
|
||||
if (!seen.has(slug)) seen.set(slug, labels[i] ?? slug)
|
||||
})
|
||||
if (!seen.has(item.category)) seen.set(item.category, item.categoryLabel)
|
||||
})
|
||||
return Array.from(seen.entries()).map(([key, label]) => ({ key, label }))
|
||||
}, [items])
|
||||
@ -728,12 +723,9 @@ function ItemEditor({
|
||||
}) {
|
||||
const ov = item._override
|
||||
|
||||
const [hidden, setHidden] = useState(ov.hidden ?? false)
|
||||
const [featured, setFeatured] = useState(ov.featured ?? item.featured ?? false)
|
||||
// Multi-category selection: stores category names (labels). Initialise from new override or fall back to Square assignment.
|
||||
const [selectedCatNames, setSelectedCatNames] = useState<string[]>(
|
||||
ov.categoriesOverride ?? item.categoryLabels ?? [item.categoryLabel]
|
||||
)
|
||||
const [hidden, setHidden] = useState(ov.hidden ?? false)
|
||||
const [catOverride, setCatOverride] = useState(ov.categoryOverride ?? '')
|
||||
const [catLabel, setCatLabel] = useState(ov.categoryLabelOverride ?? '')
|
||||
const [sortOrder, setSortOrder] = useState(String(ov.sortOrder ?? ''))
|
||||
const [showColors, setShowColors] = useState<boolean | null>(
|
||||
ov.showColors != null ? ov.showColors : null
|
||||
@ -761,16 +753,7 @@ function ItemEditor({
|
||||
const [chromeSurcharge, setChromeSurcharge] = useState<string>(
|
||||
ov.chromeSurchargePerColor ? String(ov.chromeSurchargePerColor / 100) : ''
|
||||
)
|
||||
const [disabledColors, setDisabledColors] = useState<string[]>(ov.disabledColors ?? [])
|
||||
const [showColorFilter, setShowColorFilter] = useState(false)
|
||||
const [quantityUnit, setQuantityUnit] = useState<string>(ov.quantityUnit ?? '')
|
||||
const [requiresDelivery, setRequiresDelivery] = useState(ov.requiresDelivery ?? false)
|
||||
const [deliveryBase, setDeliveryBase] = useState<string>(
|
||||
ov.deliveryBaseOverride != null ? String(ov.deliveryBaseOverride / 100) : ''
|
||||
)
|
||||
const [deliveryPerMile, setDeliveryPerMile] = useState<string>(
|
||||
ov.deliveryPerMileOverride != null ? String(ov.deliveryPerMileOverride / 100) : ''
|
||||
)
|
||||
|
||||
// Create category
|
||||
const [newCatName, setNewCatName] = useState('')
|
||||
@ -794,12 +777,11 @@ function ItemEditor({
|
||||
setError('')
|
||||
const patch: Partial<ItemOverride> = {
|
||||
hidden,
|
||||
featured,
|
||||
hiddenVariationIds: hiddenVars,
|
||||
hiddenModifierIds: hiddenMods,
|
||||
}
|
||||
// Always save categoriesOverride (replaces old single-field overrides)
|
||||
patch.categoriesOverride = selectedCatNames
|
||||
if (catOverride) patch.categoryOverride = catOverride
|
||||
if (catLabel) patch.categoryLabelOverride = catLabel
|
||||
if (sortOrder !== '') patch.sortOrder = Number(sortOrder)
|
||||
if (showColors !== null) patch.showColors = showColors
|
||||
if (descOverride) patch.descriptionOverride = descOverride
|
||||
@ -807,12 +789,8 @@ function ItemEditor({
|
||||
if (colorMin !== '') patch.colorMin = Number(colorMin)
|
||||
if (colorMax !== '') patch.colorMax = Number(colorMax)
|
||||
if (chromeSurcharge !== '') patch.chromeSurchargePerColor = Math.round(Number(chromeSurcharge) * 100)
|
||||
patch.disabledColors = disabledColors.length ? disabledColors : undefined
|
||||
if (quantityUnit.trim()) patch.quantityUnit = quantityUnit.trim()
|
||||
else patch.quantityUnit = undefined
|
||||
patch.requiresDelivery = requiresDelivery || undefined
|
||||
patch.deliveryBaseOverride = deliveryBase !== '' ? Math.round(Number(deliveryBase) * 100) : null
|
||||
patch.deliveryPerMileOverride = deliveryPerMile !== '' ? Math.round(Number(deliveryPerMile) * 100) : null
|
||||
|
||||
const res = await fetch(`${BASE}/api/admin/items/${item.id}`, {
|
||||
method: 'PATCH',
|
||||
@ -834,8 +812,8 @@ function ItemEditor({
|
||||
const res = await fetch(`${BASE}/api/admin/items/${item.id}`, { method: 'DELETE' })
|
||||
if (res.ok) {
|
||||
setHidden(false)
|
||||
setFeatured(item.featured ?? false)
|
||||
setSelectedCatNames(item.categoryLabels ?? [item.categoryLabel])
|
||||
setCatOverride('')
|
||||
setCatLabel('')
|
||||
setSortOrder('')
|
||||
setShowColors(null)
|
||||
setHiddenMods([])
|
||||
@ -844,9 +822,6 @@ function ItemEditor({
|
||||
setColorMin('')
|
||||
setColorMax('')
|
||||
setChromeSurcharge('')
|
||||
setRequiresDelivery(false)
|
||||
setDeliveryBase('')
|
||||
setDeliveryPerMile('')
|
||||
onSaved(item.id, {})
|
||||
}
|
||||
}
|
||||
@ -869,13 +844,15 @@ function ItemEditor({
|
||||
if (!newCatName.trim()) return
|
||||
setCreatingCat(true)
|
||||
const cat = await onCreateCategory(newCatName.trim())
|
||||
// Auto-select the newly created category
|
||||
if (cat.id) setSelectedCatNames((prev) => [...prev, cat.name])
|
||||
setCatOverride(cat.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''))
|
||||
setCatLabel(cat.name)
|
||||
setNewCatName('')
|
||||
setShowNewCat(false)
|
||||
setCreatingCat(false)
|
||||
}
|
||||
|
||||
const catSlug = (name: string) => name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
|
||||
return (
|
||||
<div style={{ padding: '1rem', borderTop: '1px solid #eee', backgroundColor: '#fafafa' }}>
|
||||
<div className="columns is-multiline">
|
||||
@ -883,8 +860,8 @@ function ItemEditor({
|
||||
{/* Left column */}
|
||||
<div className="column is-half">
|
||||
|
||||
{/* Visibility toggles */}
|
||||
<div className="field" style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap' }}>
|
||||
{/* Hidden toggle */}
|
||||
<div className="field">
|
||||
<label className="checkbox" style={{ fontWeight: 600 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
@ -894,87 +871,29 @@ function ItemEditor({
|
||||
/>
|
||||
Hidden from storefront
|
||||
</label>
|
||||
<label className="checkbox" style={{ fontWeight: 600, color: '#11b3be' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={featured}
|
||||
onChange={(e) => setFeatured(e.target.checked)}
|
||||
style={{ marginRight: 6, accentColor: '#11b3be' }}
|
||||
/>
|
||||
⭐ Featured
|
||||
</label>
|
||||
<label className="checkbox" style={{ fontWeight: 600, color: '#c0392b' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={requiresDelivery}
|
||||
onChange={(e) => setRequiresDelivery(e.target.checked)}
|
||||
style={{ marginRight: 6, accentColor: '#c0392b' }}
|
||||
/>
|
||||
🚗 Requires delivery
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{requiresDelivery && (
|
||||
<div className="field" style={{ background: '#fff8f8', border: '1px solid #f5c6c6', borderRadius: 6, padding: '0.6rem 0.8rem', marginBottom: '0.75rem' }}>
|
||||
<p className="is-size-7 has-text-grey" style={{ marginBottom: '0.4rem' }}>
|
||||
Custom delivery rates for this item (leave blank to use global tier defaults)
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<div>
|
||||
<label className="label is-small" style={{ marginBottom: 2 }}>Base charge ($)</label>
|
||||
<input
|
||||
className="input is-small"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="e.g. 75.00"
|
||||
value={deliveryBase}
|
||||
onChange={(e) => setDeliveryBase(e.target.value)}
|
||||
style={{ width: 110 }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="label is-small" style={{ marginBottom: 2 }}>Per mile ($)</label>
|
||||
<input
|
||||
className="input is-small"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="e.g. 4.00"
|
||||
value={deliveryPerMile}
|
||||
onChange={(e) => setDeliveryPerMile(e.target.value)}
|
||||
style={{ width: 110 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category — multi-select checkboxes */}
|
||||
{/* Category */}
|
||||
<div className="field">
|
||||
<label className="label is-small">Categories <span className="has-text-grey-light" style={{ fontWeight: 'normal' }}>(item appears in all checked tabs)</span></label>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, maxHeight: 160, overflowY: 'auto', border: '1px solid #e8e8e8', borderRadius: 6, padding: '6px 8px' }}>
|
||||
{categories.map((c) => (
|
||||
<label key={c.id} className="checkbox" style={{ fontSize: '0.85rem' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedCatNames.includes(c.name)}
|
||||
onChange={(e) => {
|
||||
setSelectedCatNames((prev) =>
|
||||
e.target.checked ? [...prev, c.name] : prev.filter((n) => n !== c.name)
|
||||
)
|
||||
}}
|
||||
style={{ marginRight: 6 }}
|
||||
/>
|
||||
{c.name}
|
||||
{(item.categoryLabels ?? [item.categoryLabel]).includes(c.name) && (
|
||||
<span className="has-text-grey-light" style={{ fontSize: '0.72rem', marginLeft: 6 }}>Square</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
{categories.length === 0 && (
|
||||
<p className="is-size-7 has-text-grey">No categories found — refresh from Square.</p>
|
||||
)}
|
||||
<label className="label is-small">Category</label>
|
||||
<div className="control">
|
||||
<div className="select is-small is-fullwidth">
|
||||
<select
|
||||
value={catOverride || item._rawCategory}
|
||||
onChange={(e) => {
|
||||
const selected = categories.find((c) => catSlug(c.name) === e.target.value)
|
||||
setCatOverride(e.target.value)
|
||||
setCatLabel(selected?.name ?? e.target.value)
|
||||
}}
|
||||
>
|
||||
<option value={item._rawCategory}>{item._rawCategoryLabel} (Square default)</option>
|
||||
{categories
|
||||
.filter((c) => catSlug(c.name) !== item._rawCategory)
|
||||
.map((c) => (
|
||||
<option key={c.id} value={catSlug(c.name)}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="button is-ghost is-small"
|
||||
@ -982,7 +901,7 @@ function ItemEditor({
|
||||
onClick={() => setShowNewCat(!showNewCat)}
|
||||
type="button"
|
||||
>
|
||||
+ Create new category in Square
|
||||
+ Create new category
|
||||
</button>
|
||||
{showNewCat && (
|
||||
<div className="field has-addons" style={{ marginTop: 6 }}>
|
||||
@ -1258,37 +1177,9 @@ function ItemEditor({
|
||||
Each chrome color selected adds this amount. Leave blank (or 0) to use a flat "Chrome" Square variation instead.
|
||||
{item.chromeSurchargePerColor > 0 && ` Current: $${(item.chromeSurchargePerColor / 100).toFixed(2)}/color.`}
|
||||
</p>
|
||||
|
||||
{/* Color availability */}
|
||||
<div style={{ marginTop: '0.75rem' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="button is-small is-light"
|
||||
onClick={() => setShowColorFilter(true)}
|
||||
>
|
||||
🎨 Manage available colors
|
||||
{disabledColors.length > 0 && (
|
||||
<span style={{
|
||||
marginLeft: 6, background: '#c07000', color: '#fff',
|
||||
borderRadius: 999, fontSize: '0.68rem', fontWeight: 'bold',
|
||||
padding: '1px 7px',
|
||||
}}>
|
||||
{disabledColors.length} hidden
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showColorFilter && (
|
||||
<AdminColorFilter
|
||||
disabledColors={disabledColors}
|
||||
onSave={setDisabledColors}
|
||||
onClose={() => setShowColorFilter(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Quantity unit */}
|
||||
<div className="field" style={{ marginTop: '1rem' }}>
|
||||
<label className="label is-small">Quantity unit</label>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { setOverride, clearOverride } from '@/lib/overrides'
|
||||
import { invalidateCatalogCache } from '@/lib/catalog-cache'
|
||||
import type { ItemOverride } from '@/lib/overrides'
|
||||
|
||||
export async function PATCH(
|
||||
@ -10,7 +9,6 @@ export async function PATCH(
|
||||
try {
|
||||
const patch: Partial<ItemOverride> = await request.json()
|
||||
setOverride(params.id, patch)
|
||||
invalidateCatalogCache() // shop picks up override changes on next request
|
||||
return NextResponse.json({ ok: true })
|
||||
} catch (err) {
|
||||
console.error('[admin/items/patch] error:', err)
|
||||
@ -25,7 +23,6 @@ export async function DELETE(
|
||||
) {
|
||||
try {
|
||||
clearOverride(params.id)
|
||||
invalidateCatalogCache() // shop picks up reset on next request
|
||||
return NextResponse.json({ ok: true })
|
||||
} catch (err) {
|
||||
console.error('[admin/items/delete] error:', err)
|
||||
|
||||
@ -3,8 +3,6 @@ import { getCatalog } from '@/lib/catalog-cache'
|
||||
import { readOverrides } from '@/lib/overrides'
|
||||
import type { CatalogItem } from '@/data/mock-catalog'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
function applyOverrides(items: CatalogItem[]): CatalogItem[] {
|
||||
const overrides = readOverrides()
|
||||
|
||||
@ -14,39 +12,13 @@ function applyOverrides(items: CatalogItem[]): CatalogItem[] {
|
||||
if (!ov) return item
|
||||
return {
|
||||
...item,
|
||||
featured: ov.featured ?? item.featured,
|
||||
// categoriesOverride (array of names) takes precedence over the old single-field overrides
|
||||
...(ov.categoriesOverride?.length
|
||||
? (() => {
|
||||
const toSlug = (n: string) => n.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
const cats = ov.categoriesOverride!.map(toSlug)
|
||||
return {
|
||||
categories: cats,
|
||||
categoryLabels: ov.categoriesOverride!,
|
||||
category: cats[0],
|
||||
categoryLabel: ov.categoriesOverride![0],
|
||||
}
|
||||
})()
|
||||
: {
|
||||
category: ov.categoryOverride ?? item.category,
|
||||
categoryLabel: ov.categoryLabelOverride ?? item.categoryLabel,
|
||||
categories: ov.categoryOverride
|
||||
? [ov.categoryOverride, ...(item.categories ?? [item.category]).slice(1)]
|
||||
: (item.categories ?? [item.category]),
|
||||
categoryLabels: ov.categoryLabelOverride
|
||||
? [ov.categoryLabelOverride, ...(item.categoryLabels ?? [item.categoryLabel]).slice(1)]
|
||||
: (item.categoryLabels ?? [item.categoryLabel]),
|
||||
}
|
||||
),
|
||||
category: ov.categoryOverride ?? item.category,
|
||||
categoryLabel: ov.categoryLabelOverride ?? item.categoryLabel,
|
||||
showColors: ov.showColors != null ? ov.showColors : item.showColors,
|
||||
colorMin: ov.colorMin ?? item.colorMin,
|
||||
colorMax: ov.colorMax !== undefined ? ov.colorMax : item.colorMax,
|
||||
chromeSurchargePerColor: ov.chromeSurchargePerColor ?? item.chromeSurchargePerColor,
|
||||
disabledColors: ov.disabledColors?.length ? ov.disabledColors : item.disabledColors,
|
||||
quantityUnit: ov.quantityUnit ?? item.quantityUnit,
|
||||
requiresDelivery: ov.requiresDelivery != null ? ov.requiresDelivery : item.requiresDelivery,
|
||||
deliveryBaseOverride: ov.deliveryBaseOverride !== undefined ? ov.deliveryBaseOverride : item.deliveryBaseOverride,
|
||||
deliveryPerMileOverride: ov.deliveryPerMileOverride !== undefined ? ov.deliveryPerMileOverride : item.deliveryPerMileOverride,
|
||||
quantityUnit: ov.quantityUnit ?? item.quantityUnit,
|
||||
description: ov.descriptionOverride ?? item.description,
|
||||
variations: item.variations
|
||||
.filter((v) => !(ov.hiddenVariationIds ?? []).includes(v.id)),
|
||||
@ -60,8 +32,6 @@ function applyOverrides(items: CatalogItem[]): CatalogItem[] {
|
||||
})
|
||||
.filter((item) => !(overrides[item.id]?.hidden))
|
||||
.sort((a, b) => {
|
||||
const featDiff = (b.featured ? 1 : 0) - (a.featured ? 1 : 0)
|
||||
if (featDiff !== 0) return featDiff
|
||||
const aOrder = overrides[a.id]?.sortOrder ?? 0
|
||||
const bOrder = overrides[b.id]?.sortOrder ?? 0
|
||||
return aOrder - bOrder
|
||||
|
||||
@ -331,16 +331,6 @@ export async function POST(req: NextRequest) {
|
||||
console.error('[checkout] CRITICAL: calendar write failed — voiding pre-auth to avoid charge without booking:', {
|
||||
orderId: order.id, paymentId: payment.id, error: calendarWriteError,
|
||||
})
|
||||
void (async () => {
|
||||
try {
|
||||
const { sendAdminErrorAlert } = await import('@/lib/notify')
|
||||
await sendAdminErrorAlert({
|
||||
subject: 'Calendar write failed — order not booked',
|
||||
message: `Calendar write failed for order ${order.id}. Pre-auth ${payment.id} is being voided. Customer: ${customerName} (${customerEmail}).`,
|
||||
context: { orderId: order.id, paymentId: payment.id, error: String(calendarWriteError) },
|
||||
})
|
||||
} catch { /* best effort */ }
|
||||
})()
|
||||
try {
|
||||
await cancelSquarePayment(payment.id!)
|
||||
console.log('[checkout] Pre-auth voided successfully:', payment.id)
|
||||
@ -457,20 +447,6 @@ export async function POST(req: NextRequest) {
|
||||
const userMessage = CARD_MESSAGES[code]
|
||||
?? 'Something went wrong with your payment. Please try again or contact us for help.'
|
||||
|
||||
// Email admin for unexpected server errors (not card declines the customer can self-resolve)
|
||||
if (!CARD_MESSAGES[code]) {
|
||||
void (async () => {
|
||||
try {
|
||||
const { sendAdminErrorAlert } = await import('@/lib/notify')
|
||||
await sendAdminErrorAlert({
|
||||
subject: 'Checkout error',
|
||||
message: err instanceof Error ? err.message : String(err),
|
||||
context: { code: code || '(none)', customerEmail, customerName },
|
||||
})
|
||||
} catch { /* best effort */ }
|
||||
})()
|
||||
}
|
||||
|
||||
return NextResponse.json({ error: userMessage }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,10 +3,9 @@ import { geocode, calcDelivery, inferTier } from '@/lib/delivery'
|
||||
import { readDeliveryRates } from '@/lib/delivery-rates'
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const { address, itemNames, rateOverride } = await request.json() as {
|
||||
address: string
|
||||
itemNames: string[]
|
||||
rateOverride?: { base: number; perMile: number }
|
||||
const { address, itemNames } = await request.json() as {
|
||||
address: string
|
||||
itemNames: string[]
|
||||
}
|
||||
|
||||
if (!address?.trim()) {
|
||||
@ -20,16 +19,6 @@ export async function POST(request: Request) {
|
||||
|
||||
const tier = inferTier(itemNames ?? [])
|
||||
const rates = readDeliveryRates()
|
||||
|
||||
// Apply per-item rate override if provided (overrides just base and perMile for the inferred tier)
|
||||
if (rateOverride) {
|
||||
rates[tier] = {
|
||||
...rates[tier],
|
||||
base: rateOverride.base,
|
||||
perMile: rateOverride.perMile,
|
||||
}
|
||||
}
|
||||
|
||||
const quote = await calcDelivery(coords.lat, coords.lng, tier, rates)
|
||||
|
||||
if (quote.miles > 40) {
|
||||
|
||||
@ -1,223 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { BASE } from '@/lib/basepath'
|
||||
import { useLockBodyScroll } from '@/lib/useLockBodyScroll'
|
||||
|
||||
interface ColorEntry {
|
||||
name: string
|
||||
hex: string
|
||||
metallic?: boolean
|
||||
pearlType?: string
|
||||
chromeType?: string
|
||||
image?: string
|
||||
}
|
||||
|
||||
interface ColorFamily {
|
||||
family: string
|
||||
colors: ColorEntry[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
disabledColors: string[]
|
||||
onSave: (disabled: string[]) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function AdminColorFilter({ disabledColors, onSave, onClose }: Props) {
|
||||
useLockBodyScroll()
|
||||
const [families, setFamilies] = useState<ColorFamily[]>([])
|
||||
const [disabled, setDisabled] = useState<Set<string>>(() => new Set(disabledColors))
|
||||
const [openFamily, setOpenFamily] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetch(BASE + '/colors.json')
|
||||
.then((r) => r.json())
|
||||
.then((data: ColorFamily[]) => setFamilies(data))
|
||||
}, [])
|
||||
|
||||
const toggle = (name: string) =>
|
||||
setDisabled((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.has(name) ? next.delete(name) : next.add(name)
|
||||
return next
|
||||
})
|
||||
|
||||
const disabledCount = disabled.size
|
||||
const totalColors = families.reduce((n, f) => n + f.colors.length, 0)
|
||||
|
||||
return (
|
||||
<div className="modal is-active" onClick={onClose}>
|
||||
<div
|
||||
className="modal-card"
|
||||
style={{ maxWidth: 680, width: '95vw' }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<header className="modal-card-head" style={{ background: '#11b3be', gap: '0.75rem' }}>
|
||||
<p className="modal-card-title has-text-white" style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
Available Colors
|
||||
</p>
|
||||
<button className="delete" aria-label="close" onClick={onClose} style={{ flexShrink: 0 }} />
|
||||
</header>
|
||||
|
||||
<section className="modal-card-body" style={{ maxHeight: '70vh', overflowY: 'auto', padding: '1rem 1.25rem' }}>
|
||||
<p className="is-size-7 has-text-grey" style={{ marginBottom: '0.75rem' }}>
|
||||
Click a color to hide it from customers ordering this item.{' '}
|
||||
{disabledCount > 0
|
||||
? <strong style={{ color: '#c07000' }}>{disabledCount} of {totalColors} hidden.</strong>
|
||||
: <span>All {totalColors} colors are currently shown.</span>}
|
||||
</p>
|
||||
|
||||
{families.map((family) => {
|
||||
const isOpen = openFamily === family.family
|
||||
const hiddenInFam = family.colors.filter((c) => disabled.has(c.name)).length
|
||||
|
||||
return (
|
||||
<div key={family.family} style={{ marginBottom: 6 }}>
|
||||
{/* Family header — same style as customer view */}
|
||||
<button
|
||||
onClick={() => setOpenFamily(isOpen ? null : family.family)}
|
||||
style={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
background: isOpen ? '#f0fafb' : '#fafafa',
|
||||
border: '1px solid ' + (isOpen ? '#b2e0e4' : '#e8e8e8'),
|
||||
borderRadius: isOpen ? '10px 10px 0 0' : '10px',
|
||||
padding: '0.55rem 0.9rem',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
transition: 'background 0.15s',
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
|
||||
{/* Preview dots */}
|
||||
<span style={{ display: 'flex', gap: 3, flexShrink: 0 }}>
|
||||
{family.colors.slice(0, 7).map((c) => (
|
||||
<span
|
||||
key={c.name}
|
||||
style={{
|
||||
width: 13,
|
||||
height: 13,
|
||||
borderRadius: '50%',
|
||||
background: c.image ? `url('/color/${c.image}') center/cover` : c.hex,
|
||||
backgroundSize: c.image ? '220%' : undefined,
|
||||
border: '1px solid rgba(0,0,0,0.12)',
|
||||
flexShrink: 0,
|
||||
display: 'inline-block',
|
||||
opacity: disabled.has(c.name) ? 0.25 : 1,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
<span style={{ fontWeight: 600, fontSize: '0.85rem', color: '#15384c' }}>
|
||||
{family.family}
|
||||
</span>
|
||||
</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
|
||||
{hiddenInFam > 0 && (
|
||||
<span style={{
|
||||
background: '#c07000', color: '#fff',
|
||||
borderRadius: 999, fontSize: '0.68rem', fontWeight: 'bold',
|
||||
padding: '2px 8px',
|
||||
}}>
|
||||
{hiddenInFam} hidden
|
||||
</span>
|
||||
)}
|
||||
<span style={{ fontSize: '0.75rem', color: '#888' }}>{isOpen ? '▲' : '▼'}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Expanded color grid — same balloon swatch layout as customer */}
|
||||
{isOpen && (
|
||||
<div style={{
|
||||
border: '1px solid #b2e0e4',
|
||||
borderTop: 'none',
|
||||
borderRadius: '0 0 10px 10px',
|
||||
padding: '0.75rem 0.9rem',
|
||||
background: '#f8fdfd',
|
||||
}}>
|
||||
<div className="swatch-container">
|
||||
{family.colors.map((color) => {
|
||||
const isDisabled = disabled.has(color.name)
|
||||
const imageSrc = color.image ? `/color/${color.image}` : null
|
||||
|
||||
return (
|
||||
<div
|
||||
key={color.name}
|
||||
className="swatch-wrapper"
|
||||
onClick={() => toggle(color.name)}
|
||||
title={isDisabled ? `Enable ${color.name}` : `Hide ${color.name}`}
|
||||
style={{ opacity: isDisabled ? 0.3 : 1, cursor: 'pointer' }}
|
||||
>
|
||||
<div className="color-swatch">
|
||||
{imageSrc ? (
|
||||
<div
|
||||
className="color-background finish-image"
|
||||
style={{ backgroundImage: `url('${imageSrc}')` }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="color-background"
|
||||
style={{ background: color.hex }}
|
||||
/>
|
||||
)}
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img className="color-shine" src="/color/images/shine.svg" alt="" aria-hidden="true" />
|
||||
</div>
|
||||
<span style={{
|
||||
fontSize: '0.6rem',
|
||||
textAlign: 'center',
|
||||
color: isDisabled ? '#c07000' : '#334854',
|
||||
fontWeight: isDisabled ? 700 : 400,
|
||||
lineHeight: 1.2,
|
||||
maxWidth: '100%',
|
||||
wordBreak: 'break-word',
|
||||
}}>
|
||||
{isDisabled ? '✕ ' : ''}{color.name}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</section>
|
||||
|
||||
<footer className="modal-card-foot" style={{ justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button
|
||||
className="button is-small"
|
||||
type="button"
|
||||
onClick={() => setDisabled(new Set())}
|
||||
>
|
||||
Enable all
|
||||
</button>
|
||||
<button
|
||||
className="button is-small is-warning"
|
||||
type="button"
|
||||
onClick={() => setDisabled(new Set(families.flatMap((f) => f.colors.map((c) => c.name))))}
|
||||
>
|
||||
Disable all
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="button is-small" type="button" onClick={onClose}>Cancel</button>
|
||||
<button
|
||||
className="button is-small is-info"
|
||||
type="button"
|
||||
onClick={() => { onSave(Array.from(disabled)); onClose() }}
|
||||
>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -53,13 +53,6 @@ const STEP_ORDER: Step[] = ['cart', 'delivery', 'info', 'payment']
|
||||
export default function CartDrawer() {
|
||||
const { entries, drawerOpen, closeDrawer, removeEntry, updateQuantity, clearCart, totalItems } = useCart()
|
||||
|
||||
useEffect(() => {
|
||||
if (!drawerOpen) return
|
||||
const prev = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => { document.body.style.overflow = prev }
|
||||
}, [drawerOpen])
|
||||
|
||||
const [editingEntry, setEditingEntry] = useState<CartEntry | null>(null)
|
||||
|
||||
const [step, setStep] = useState<Step>('cart')
|
||||
@ -67,26 +60,6 @@ export default function CartDrawer() {
|
||||
const [shortRef, setShortRef] = useState<string | null>(null)
|
||||
const [fulfillmentType, setFulfillmentType] = useState<'delivery' | 'pickup'>('pickup')
|
||||
|
||||
// If any item requires delivery, force delivery mode and suppress pickup option
|
||||
const cartRequiresDelivery = useMemo(
|
||||
() => entries.some((e) => e.product.requiresDelivery),
|
||||
[entries]
|
||||
)
|
||||
// Effective fulfillment type — pickup blocked when any item requires delivery
|
||||
const effectiveFulfillment = cartRequiresDelivery ? 'delivery' : fulfillmentType
|
||||
|
||||
// Merged delivery rate override: highest base + highest perMile across requires-delivery items
|
||||
const deliveryRateOverride = useMemo(() => {
|
||||
const overrideItems = entries.filter(
|
||||
(e) => e.product.requiresDelivery &&
|
||||
(e.product.deliveryBaseOverride != null || e.product.deliveryPerMileOverride != null)
|
||||
)
|
||||
if (!overrideItems.length) return undefined
|
||||
const base = Math.max(...overrideItems.map((e) => e.product.deliveryBaseOverride ?? 0))
|
||||
const perMile = Math.max(...overrideItems.map((e) => e.product.deliveryPerMileOverride ?? 0))
|
||||
return { base, perMile }
|
||||
}, [entries])
|
||||
|
||||
// Delivery step — persisted
|
||||
const [street, setStreet] = useStoredString('bpb_street', '')
|
||||
const [city, setCity] = useStoredString('bpb_city', '')
|
||||
@ -175,7 +148,7 @@ export default function CartDrawer() {
|
||||
|
||||
const CT_TAX_RATE = 0.0635
|
||||
const subtotal = entries.reduce((sum, e) => sum + entryUnitPrice(e) * e.quantity, 0)
|
||||
const deliveryTotal = effectiveFulfillment === 'delivery' ? (quote?.totalCents ?? 0) : 0
|
||||
const deliveryTotal = fulfillmentType === 'delivery' ? (quote?.totalCents ?? 0) : 0
|
||||
const taxCents = Math.round(subtotal * CT_TAX_RATE)
|
||||
const grandTotal = subtotal + deliveryTotal + taxCents
|
||||
|
||||
@ -198,13 +171,13 @@ export default function CartDrawer() {
|
||||
}),
|
||||
})),
|
||||
selectedColors: entries.flatMap((e) => e.selectedColors),
|
||||
deliverySlotISO: effectiveFulfillment === 'delivery' ? deliverySlot?.slotISO : undefined,
|
||||
driveMinutes: effectiveFulfillment === 'delivery' ? deliverySlot?.driveMinutes : undefined,
|
||||
deliveryAddress: effectiveFulfillment === 'delivery' ? (fullAddress || undefined) : undefined,
|
||||
deliveryTier: effectiveFulfillment === 'delivery' ? quote?.tier : undefined,
|
||||
deliveryNotes: effectiveFulfillment === 'delivery' && deliveryInstructions ? deliveryInstructions : undefined,
|
||||
deliveryCents: effectiveFulfillment === 'delivery' ? (quote?.totalCents ?? 0) : undefined,
|
||||
pickupSlotISO: effectiveFulfillment === 'pickup' ? pickupSlot?.slotISO : undefined,
|
||||
deliverySlotISO: fulfillmentType === 'delivery' ? deliverySlot?.slotISO : undefined,
|
||||
driveMinutes: fulfillmentType === 'delivery' ? deliverySlot?.driveMinutes : undefined,
|
||||
deliveryAddress: fulfillmentType === 'delivery' ? (fullAddress || undefined) : undefined,
|
||||
deliveryTier: fulfillmentType === 'delivery' ? quote?.tier : undefined,
|
||||
deliveryNotes: fulfillmentType === 'delivery' && deliveryInstructions ? deliveryInstructions : undefined,
|
||||
deliveryCents: fulfillmentType === 'delivery' ? (quote?.totalCents ?? 0) : undefined,
|
||||
pickupSlotISO: fulfillmentType === 'pickup' ? pickupSlot?.slotISO : undefined,
|
||||
customerFirstName: custFirst,
|
||||
customerLastName: custLast,
|
||||
customerEmail: custEmail,
|
||||
@ -212,7 +185,7 @@ export default function CartDrawer() {
|
||||
grandTotal,
|
||||
idempotencyKey: checkoutKey || undefined,
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}), [entries, effectiveFulfillment, deliverySlot, pickupSlot, fullAddress, quote, deliveryInstructions, custFirst, custLast, custEmail, custPhone, grandTotal, entryUnitPrice])
|
||||
}), [entries, fulfillmentType, deliverySlot, pickupSlot, fullAddress, quote, deliveryInstructions, custFirst, custLast, custEmail, custPhone, grandTotal, entryUnitPrice])
|
||||
|
||||
const handleSuccess = (id: string, ref: string) => {
|
||||
setOrderId(id)
|
||||
@ -244,11 +217,7 @@ export default function CartDrawer() {
|
||||
const res = await fetch(BASE + '/api/delivery-quote', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
address: fullAddress,
|
||||
itemNames: entries.map((e) => e.product.name),
|
||||
rateOverride: deliveryRateOverride,
|
||||
}),
|
||||
body: JSON.stringify({ address: fullAddress, itemNames: entries.map((e) => e.product.name) }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) { setQuoteErr(data.error ?? 'Could not calculate delivery.'); return }
|
||||
@ -337,37 +306,31 @@ export default function CartDrawer() {
|
||||
)}
|
||||
|
||||
{/* Fulfillment toggle */}
|
||||
{cartRequiresDelivery ? (
|
||||
<p style={{ fontSize: '0.8rem', color: '#555', marginBottom: '0.75rem', background: '#f5f5f5', padding: '7px 10px', borderRadius: 6 }}>
|
||||
🚗 One or more items require delivery & setup — pickup is not available for this order.
|
||||
</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', gap: '6px', marginBottom: '0.75rem' }}>
|
||||
{(['delivery', 'pickup'] as const).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => { setFulfillmentType(type); setPickupSlot(null); setPickupDate('') }}
|
||||
style={{
|
||||
flex: 1, padding: '7px 4px', fontSize: '0.82rem',
|
||||
borderRadius: '6px', cursor: 'pointer', fontFamily: 'inherit',
|
||||
border: `1px solid ${effectiveFulfillment === type ? '#11b3be' : '#d0d0d0'}`,
|
||||
background: effectiveFulfillment === type ? '#11b3be' : '#fff',
|
||||
color: effectiveFulfillment === type ? '#fff' : '#555',
|
||||
fontWeight: effectiveFulfillment === type ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
{type === 'delivery' ? '🚗 Delivery' : '🏪 Pick Up'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ display: 'flex', gap: '6px', marginBottom: '0.75rem' }}>
|
||||
{(['delivery', 'pickup'] as const).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => { setFulfillmentType(type); setPickupSlot(null); setPickupDate('') }}
|
||||
style={{
|
||||
flex: 1, padding: '7px 4px', fontSize: '0.82rem',
|
||||
borderRadius: '6px', cursor: 'pointer', fontFamily: 'inherit',
|
||||
border: `1px solid ${fulfillmentType === type ? '#11b3be' : '#d0d0d0'}`,
|
||||
background: fulfillmentType === type ? '#11b3be' : '#fff',
|
||||
color: fulfillmentType === type ? '#fff' : '#555',
|
||||
fontWeight: fulfillmentType === type ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
{type === 'delivery' ? '🚗 Delivery' : '🏪 Pick Up'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="button is-info is-fullwidth"
|
||||
onClick={() => setStep('delivery')}
|
||||
>
|
||||
{effectiveFulfillment === 'pickup' ? 'Choose Pickup Time →' : 'Continue to Delivery →'}
|
||||
{fulfillmentType === 'pickup' ? 'Choose Pickup Time →' : 'Continue to Delivery →'}
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
@ -521,14 +484,14 @@ export default function CartDrawer() {
|
||||
|
||||
const deliveryFooter = (
|
||||
<>
|
||||
{effectiveFulfillment === 'delivery' && (
|
||||
{fulfillmentType === 'delivery' && (
|
||||
<p style={{ fontSize: '0.72rem', color: '#999', marginBottom: '0.5rem' }}>
|
||||
Delivery fee is based on driving distance from our shop.
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
className="button is-info is-fullwidth"
|
||||
disabled={effectiveFulfillment === 'delivery' ? (!quote || !deliverySlot) : !pickupSlot}
|
||||
disabled={fulfillmentType === 'delivery' ? (!quote || !deliverySlot) : !pickupSlot}
|
||||
onClick={() => setStep('info')}
|
||||
>
|
||||
Continue to Your Info →
|
||||
@ -613,7 +576,7 @@ export default function CartDrawer() {
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||||
<span>Items</span><span>{fmt(subtotal)}</span>
|
||||
</div>
|
||||
{effectiveFulfillment === 'delivery' && quote && (
|
||||
{fulfillmentType === 'delivery' && quote && (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||||
<span>Delivery</span><span>{fmt(quote.totalCents)}</span>
|
||||
</div>
|
||||
@ -624,12 +587,12 @@ export default function CartDrawer() {
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', borderTop: '1px solid #ddd', paddingTop: '4px', marginTop: '4px' }}>
|
||||
<span>Estimated total</span><span>{fmt(grandTotal)}</span>
|
||||
</div>
|
||||
{effectiveFulfillment === 'delivery' && deliverySlot && (
|
||||
{fulfillmentType === 'delivery' && deliverySlot && (
|
||||
<p style={{ color: '#555', marginTop: '6px' }}>
|
||||
Delivery: {deliverySlot.date} at {deliverySlot.label}
|
||||
</p>
|
||||
)}
|
||||
{effectiveFulfillment === 'pickup' && pickupSlot && (
|
||||
{fulfillmentType === 'pickup' && pickupSlot && (
|
||||
<p style={{ color: '#555', marginTop: '6px' }}>
|
||||
Pickup: {pickupSlot.date} at {pickupSlot.label}
|
||||
</p>
|
||||
@ -686,7 +649,7 @@ export default function CartDrawer() {
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||||
<span>Items</span><span>{fmt(subtotal)}</span>
|
||||
</div>
|
||||
{effectiveFulfillment === 'delivery' && quote && (
|
||||
{fulfillmentType === 'delivery' && quote && (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
|
||||
<span>Delivery</span><span>{fmt(quote.totalCents)}</span>
|
||||
</div>
|
||||
@ -697,12 +660,12 @@ export default function CartDrawer() {
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 'bold', borderTop: '1px solid #ddd', paddingTop: '4px', marginTop: '4px' }}>
|
||||
<span>Total</span><span>{fmt(grandTotal)}</span>
|
||||
</div>
|
||||
{effectiveFulfillment === 'delivery' && deliverySlot && (
|
||||
{fulfillmentType === 'delivery' && deliverySlot && (
|
||||
<p style={{ color: '#555', marginTop: '6px' }}>
|
||||
Delivery: {deliverySlot.date} at {deliverySlot.label}
|
||||
</p>
|
||||
)}
|
||||
{effectiveFulfillment === 'pickup' && pickupSlot && (
|
||||
{fulfillmentType === 'pickup' && pickupSlot && (
|
||||
<p style={{ color: '#555', marginTop: '6px' }}>
|
||||
Pickup: {pickupSlot.date} at {pickupSlot.label}
|
||||
</p>
|
||||
@ -714,7 +677,7 @@ export default function CartDrawer() {
|
||||
|
||||
const bodyContent: Record<Step, React.ReactNode> = {
|
||||
cart: cartBody,
|
||||
delivery: effectiveFulfillment === 'pickup' ? pickupBody : deliveryBody,
|
||||
delivery: fulfillmentType === 'pickup' ? pickupBody : deliveryBody,
|
||||
info: infoBody,
|
||||
payment: paymentSummary, // PaymentForm rendered separately below, always mounted
|
||||
}
|
||||
@ -786,7 +749,7 @@ export default function CartDrawer() {
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||||
</svg>
|
||||
)}
|
||||
{step === 'delivery' && effectiveFulfillment === 'pickup' ? 'Pickup Time' : STEP_TITLES[step]}
|
||||
{step === 'delivery' && fulfillmentType === 'pickup' ? 'Pickup Time' : STEP_TITLES[step]}
|
||||
{step === 'cart' && totalItems > 0 && ` (${totalItems})`}
|
||||
</strong>
|
||||
{/* Step indicator dots */}
|
||||
@ -823,17 +786,17 @@ export default function CartDrawer() {
|
||||
</p>
|
||||
<p style={{ color: '#555', fontSize: '0.88rem', marginBottom: '1rem', lineHeight: 1.5 }}>
|
||||
Order <strong>#{shortRef}</strong> confirmed.{' '}
|
||||
{effectiveFulfillment === 'pickup'
|
||||
{fulfillmentType === 'pickup'
|
||||
? <>Your pickup is all set — see you at the shop! A confirmation will be sent to <strong>{custEmail}</strong>.</>
|
||||
: <>We’ll reach out to <strong>{custEmail}</strong> to confirm final delivery details.</>
|
||||
}
|
||||
</p>
|
||||
{effectiveFulfillment === 'delivery' && deliverySlot && (
|
||||
{fulfillmentType === 'delivery' && deliverySlot && (
|
||||
<p style={{ color: '#0d6e75', fontSize: '0.85rem', marginBottom: '1.5rem' }}>
|
||||
Delivery: {deliverySlot.date} at {deliverySlot.label}
|
||||
</p>
|
||||
)}
|
||||
{effectiveFulfillment === 'pickup' && pickupSlot && (
|
||||
{fulfillmentType === 'pickup' && pickupSlot && (
|
||||
<p style={{ color: '#0d6e75', fontSize: '0.85rem', marginBottom: '1.5rem' }}>
|
||||
Pickup: {pickupSlot.date} at {pickupSlot.label}
|
||||
</p>
|
||||
|
||||
@ -6,7 +6,6 @@ import { useCart } from '@/context/CartContext'
|
||||
import { BASE } from '@/lib/basepath'
|
||||
import type { CartEntry } from '@/context/CartContext'
|
||||
import { fmt } from '@/lib/format'
|
||||
import { useLockBodyScroll } from '@/lib/useLockBodyScroll'
|
||||
|
||||
interface ColorEntry {
|
||||
name: string
|
||||
@ -30,7 +29,6 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function ColorPicker({ product, maxColors, onClose, editingEntry }: Props) {
|
||||
useLockBodyScroll()
|
||||
const { addToCart, updateEntry } = useCart()
|
||||
const [families, setFamilies] = useState<ColorFamily[]>([])
|
||||
const [openFamily, setOpenFamily] = useState<string | null>(null)
|
||||
@ -53,18 +51,10 @@ export default function ColorPicker({ product, maxColors, onClose, editingEntry
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const disabled = new Set(product.disabledColors ?? [])
|
||||
fetch(BASE + '/colors.json')
|
||||
.then((r) => r.json())
|
||||
.then((data: ColorFamily[]) => {
|
||||
if (!disabled.size) { setFamilies(data); return }
|
||||
setFamilies(
|
||||
data
|
||||
.map((f) => ({ ...f, colors: f.colors.filter((c) => !disabled.has(c.name)) }))
|
||||
.filter((f) => f.colors.length > 0)
|
||||
)
|
||||
})
|
||||
}, [product.disabledColors])
|
||||
.then((data: ColorFamily[]) => setFamilies(data))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
|
||||
|
||||
@ -63,11 +63,7 @@ export default function FeaturedProducts() {
|
||||
const productCategories = useMemo(() => {
|
||||
const seen = new Map<string, string>()
|
||||
items.forEach((item) => {
|
||||
const cats = item.categories ?? [item.category]
|
||||
const labels = item.categoryLabels ?? [item.categoryLabel]
|
||||
cats.forEach((slug, i) => {
|
||||
if (!seen.has(slug)) seen.set(slug, labels[i] ?? slug)
|
||||
})
|
||||
if (!seen.has(item.category)) seen.set(item.category, item.categoryLabel)
|
||||
})
|
||||
const all = Array.from(seen.entries()).map(([key, label]) => ({ key, label }))
|
||||
const visible = all.filter((c) => !catHidden.includes(c.key))
|
||||
@ -82,15 +78,11 @@ export default function FeaturedProducts() {
|
||||
return visible
|
||||
}, [items, catOrder, catHidden])
|
||||
|
||||
const tabs = useMemo(() => {
|
||||
// Category slugs already represented by an occasion tab — hide them from the regular tabs
|
||||
const occasionSlugs = new Set(activeOccasions.map((o) => o.squareCategorySlug).filter(Boolean) as string[])
|
||||
return [
|
||||
...activeOccasions.map((o) => ({ key: o.key, label: `${o.emoji} ${o.label}`, occasion: true })),
|
||||
{ key: 'all', label: 'All', occasion: false },
|
||||
...productCategories.filter((c) => !occasionSlugs.has(c.key)).map((c) => ({ ...c, occasion: false })),
|
||||
]
|
||||
}, [activeOccasions, productCategories])
|
||||
const tabs = useMemo(() => [
|
||||
...activeOccasions.map((o) => ({ key: o.key, label: `${o.emoji} ${o.label}`, occasion: true })),
|
||||
{ key: 'all', label: 'All', occasion: false },
|
||||
...productCategories.map((c) => ({ ...c, occasion: false })),
|
||||
], [activeOccasions, productCategories])
|
||||
|
||||
const activeOccasion: ActiveOccasion | undefined = useMemo(
|
||||
() => activeOccasions.find((o) => o.key === category),
|
||||
@ -130,11 +122,11 @@ export default function FeaturedProducts() {
|
||||
|
||||
const filtered = (activeOccasion
|
||||
? activeOccasion.squareCategorySlug
|
||||
? items.filter((i) => (i.categories ?? [i.category]).includes(activeOccasion.squareCategorySlug!))
|
||||
? items.filter((i) => i.category === activeOccasion.squareCategorySlug)
|
||||
: items
|
||||
: category === 'all'
|
||||
? items
|
||||
: items.filter((i) => (i.categories ?? [i.category]).includes(category))
|
||||
: items.filter((i) => i.category === category)
|
||||
).filter((i) =>
|
||||
!q || i.name.toLowerCase().includes(q) || i.description.toLowerCase().includes(q)
|
||||
)
|
||||
@ -197,7 +189,7 @@ export default function FeaturedProducts() {
|
||||
placeholder="Search…"
|
||||
value={search}
|
||||
autoFocus
|
||||
onChange={(e) => { setSearch(e.target.value); if (e.target.value) setCategory('all') }}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onBlur={() => { if (!search) setSearchOpen(false) }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') { setSearch(''); setSearchOpen(false) } }}
|
||||
style={{ width: '160px' }}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { useLockBodyScroll } from '@/lib/useLockBodyScroll'
|
||||
|
||||
interface TourStep {
|
||||
target: string | null // CSS selector, or null = centered modal
|
||||
@ -63,7 +62,6 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function GuidedTour({ onDone, onStart }: Props) {
|
||||
useLockBodyScroll()
|
||||
const [step, setStep] = useState(0)
|
||||
const [targetRect, setTargetRect] = useState<DOMRect | null>(null)
|
||||
|
||||
|
||||
@ -55,15 +55,6 @@ export default function ProductCard({ item }: Props) {
|
||||
) : (
|
||||
<div className="no-image">🎈</div>
|
||||
)}
|
||||
{item.featured && !soldOut && (
|
||||
<span style={{
|
||||
position: 'absolute', top: 10, left: 10,
|
||||
background: '#11b3be', color: '#fff',
|
||||
fontWeight: 700, fontSize: '0.72rem', letterSpacing: '0.05em',
|
||||
padding: '3px 10px', borderRadius: 4,
|
||||
textTransform: 'uppercase',
|
||||
}}>Featured</span>
|
||||
)}
|
||||
{soldOut && (
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
@ -89,11 +80,6 @@ export default function ProductCard({ item }: Props) {
|
||||
Only {stock} left
|
||||
</p>
|
||||
)}
|
||||
{item.requiresDelivery && (
|
||||
<p style={{ fontSize: '0.78rem', color: '#555', fontWeight: 600, marginBottom: '0.35rem' }}>
|
||||
🚗 Delivery & setup required
|
||||
</p>
|
||||
)}
|
||||
<p className="is-size-7">{item.description}</p>
|
||||
|
||||
{item.tags.length > 0 && (
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useCart } from '@/context/CartContext'
|
||||
|
||||
export default function ScrollToTop() {
|
||||
const { drawerOpen } = useCart()
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
|
||||
setScrolled(scrollTop > 130)
|
||||
setVisible(scrollTop > 130)
|
||||
}
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
return () => window.removeEventListener('scroll', onScroll)
|
||||
}, [])
|
||||
|
||||
if (!scrolled || drawerOpen) return null
|
||||
if (!visible) return null
|
||||
|
||||
return (
|
||||
<button
|
||||
@ -26,7 +24,7 @@ export default function ScrollToTop() {
|
||||
position: 'fixed',
|
||||
bottom: '12px',
|
||||
right: '10px',
|
||||
zIndex: 98,
|
||||
zIndex: 99,
|
||||
border: '1px solid #363636',
|
||||
outline: 'none',
|
||||
background: '#94d601',
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
'use client'
|
||||
|
||||
import { useLockBodyScroll } from '@/lib/useLockBodyScroll'
|
||||
|
||||
interface Props {
|
||||
onTour: () => void
|
||||
onDismiss: () => void
|
||||
@ -15,7 +13,6 @@ const HOW_IT_WORKS = [
|
||||
]
|
||||
|
||||
export default function WelcomeModal({ onTour, onDismiss }: Props) {
|
||||
useLockBodyScroll()
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
|
||||
@ -28,9 +28,6 @@ export interface CatalogItem {
|
||||
description: string
|
||||
category: string
|
||||
categoryLabel: string
|
||||
/** All display categories this item belongs to (multi-category support). First entry matches category/categoryLabel. */
|
||||
categories: string[]
|
||||
categoryLabels: string[]
|
||||
/** Price in cents of the default variation. null = custom quote required. */
|
||||
price: number | null
|
||||
imageUrl: string | null
|
||||
@ -42,16 +39,9 @@ export interface CatalogItem {
|
||||
colorMin: number // minimum colors required when showColors=true (default 1)
|
||||
colorMax: number | null // maximum colors allowed (null = unlimited)
|
||||
chromeSurchargePerColor: number // extra cents per chrome color selected (0 = flat chrome variation instead)
|
||||
disabledColors?: string[] // color names hidden from the picker for this item
|
||||
variations: CatalogVariation[] // all enabled variations; first is the default
|
||||
/** Unit label for quantity, e.g. "ft". Omitted for plain count items. */
|
||||
quantityUnit?: string
|
||||
/** When true, this item cannot be picked up — delivery is required. */
|
||||
requiresDelivery?: boolean
|
||||
/** Per-item delivery base charge override in cents. null = use tier default. */
|
||||
deliveryBaseOverride?: number | null
|
||||
/** Per-item per-mile rate override in cents. null = use tier default. */
|
||||
deliveryPerMileOverride?: number | null
|
||||
}
|
||||
|
||||
export const MOCK_CATALOG: CatalogItem[] = (([
|
||||
@ -159,7 +149,5 @@ export const MOCK_CATALOG: CatalogItem[] = (([
|
||||
chromeSurchargePerColor: 0,
|
||||
imageUrls: item.imageUrl ? [item.imageUrl] : [],
|
||||
variations: item.price != null ? [{ id: item.id, name: 'Regular', priceCents: item.price, imageUrls: [], inventory: null }] : [],
|
||||
categories: [item.category],
|
||||
categoryLabels: [item.categoryLabel],
|
||||
...item,
|
||||
})) as CatalogItem[]
|
||||
|
||||
@ -53,12 +53,6 @@ export async function refreshCatalog(): Promise<{ items: CatalogItem[]; fetchedA
|
||||
return { items, fetchedAt: new Date() }
|
||||
}
|
||||
|
||||
/** Drop the in-process memory cache so the next request re-reads from disk.
|
||||
* Call this after writing overrides so the shop picks up changes immediately. */
|
||||
export function invalidateCatalogCache(): void {
|
||||
memCache = null
|
||||
}
|
||||
|
||||
// ── Get (from cache or fetch) ─────────────────────────────────────────────────
|
||||
|
||||
export async function getCatalog(): Promise<{ items: CatalogItem[]; fetchedAt: Date | null }> {
|
||||
|
||||
@ -368,21 +368,3 @@ export async function sendNewOrderAlert(params: {
|
||||
text: lines.join('\n'),
|
||||
})
|
||||
}
|
||||
|
||||
export async function sendAdminErrorAlert(params: {
|
||||
subject: string
|
||||
message: string
|
||||
context?: Record<string, unknown>
|
||||
}): Promise<void> {
|
||||
const to = 'admin@beachpartyballoons.com'
|
||||
const lines = [
|
||||
params.message,
|
||||
'',
|
||||
...(params.context
|
||||
? Object.entries(params.context).map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : String(v)}`)
|
||||
: []),
|
||||
'',
|
||||
`Time: ${new Date().toISOString()}`,
|
||||
]
|
||||
await send({ to, subject: `⚠️ ${params.subject}`, text: lines.join('\n') })
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import { atomicWriteJSON } from './file-utils'
|
||||
|
||||
export interface ItemOverride {
|
||||
hidden?: boolean
|
||||
featured?: boolean
|
||||
categoryOverride?: string
|
||||
categoryLabelOverride?: string
|
||||
sortOrder?: number
|
||||
@ -20,18 +19,8 @@ export interface ItemOverride {
|
||||
colorMax?: number
|
||||
/** Extra charge in cents added per chrome color selected (0 = no per-color surcharge). */
|
||||
chromeSurchargePerColor?: number
|
||||
/** Color names that are hidden from the customer picker for this item. */
|
||||
disabledColors?: string[]
|
||||
/** Unit label for the quantity field, e.g. "ft". When set, the quantity control shows "X ft". */
|
||||
quantityUnit?: string
|
||||
/** Override the full list of display categories (stores category NAMES/labels). Replaces categoryOverride + categoryLabelOverride. */
|
||||
categoriesOverride?: string[] | null
|
||||
/** When true, pickup is not offered — item must be delivered. */
|
||||
requiresDelivery?: boolean
|
||||
/** Override delivery base charge in cents for this item (replaces the tier default). */
|
||||
deliveryBaseOverride?: number | null
|
||||
/** Override per-mile rate in cents for this item (replaces the tier default). */
|
||||
deliveryPerMileOverride?: number | null
|
||||
}
|
||||
|
||||
export type OverridesMap = Record<string, ItemOverride>
|
||||
|
||||
@ -91,10 +91,9 @@ export async function getSquareCatalog(): Promise<CatalogItem[]> {
|
||||
const items = objects
|
||||
.filter((o) => o.type === 'ITEM')
|
||||
.filter((o) =>
|
||||
// If an "online" category exists in Square, only show items tagged with it.
|
||||
// If the category doesn't exist in this account, show all items.
|
||||
!onlineCategoryId ||
|
||||
(o.itemData?.categories ?? []).some((c: { id?: string }) => c.id === onlineCategoryId)
|
||||
onlineCategoryId
|
||||
? (o.itemData?.categories ?? []).some((c: { id?: string }) => c.id === onlineCategoryId)
|
||||
: false
|
||||
)
|
||||
.map((item) => {
|
||||
const data = item.itemData!
|
||||
@ -144,27 +143,23 @@ export async function getSquareCatalog(): Promise<CatalogItem[]> {
|
||||
.filter((ml): ml is ModifierList => ml !== null)
|
||||
|
||||
const itemCategories: { id?: string }[] = data.categories ?? []
|
||||
const hasCategory = (id: string | undefined) =>
|
||||
!!id && itemCategories.some((c) => c.id === id)
|
||||
|
||||
// Derive display categories from all Square categories that aren't 'online' or 'latex'
|
||||
// Derive display category from the first Square category that isn't 'online' or 'latex'
|
||||
const skipIds = new Set([onlineCategoryId, latexCategoryId].filter(Boolean) as string[])
|
||||
const displayCatNames = itemCategories
|
||||
const displayCatName = itemCategories
|
||||
.filter((c) => c.id && !skipIds.has(c.id))
|
||||
.map((c) => categoryNameMap.get(c.id!))
|
||||
.filter((n): n is string => !!n)
|
||||
const primaryCatName = displayCatNames[0] ?? 'Other'
|
||||
const toSlug = (n: string) => n.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
const categorySlug = toSlug(primaryCatName)
|
||||
const categorySlugs = displayCatNames.length ? displayCatNames.map(toSlug) : [categorySlug]
|
||||
const categoryLbls = displayCatNames.length ? displayCatNames : [primaryCatName]
|
||||
.find(Boolean) ?? 'Other'
|
||||
const categorySlug = displayCatName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
|
||||
|
||||
return {
|
||||
id: item.id!,
|
||||
name: data.name ?? 'Unnamed item',
|
||||
description: data.description ?? '',
|
||||
category: categorySlug,
|
||||
categoryLabel: primaryCatName,
|
||||
categories: categorySlugs,
|
||||
categoryLabels: categoryLbls,
|
||||
id: item.id!,
|
||||
name: data.name ?? 'Unnamed item',
|
||||
description: data.description ?? '',
|
||||
category: categorySlug,
|
||||
categoryLabel: displayCatName,
|
||||
price: priceAmount ? Number(priceAmount) : null,
|
||||
imageUrl,
|
||||
imageUrls,
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
|
||||
/** Locks body scroll while the calling component is mounted. */
|
||||
export function useLockBodyScroll() {
|
||||
useEffect(() => {
|
||||
const prev = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
return () => { document.body.style.overflow = prev }
|
||||
}, [])
|
||||
}
|
||||
@ -181,7 +181,7 @@
|
||||
"colors": [
|
||||
{
|
||||
"name": "Chrome Rose Gold",
|
||||
"hex": "#C17F87",
|
||||
"hex": "#B76E79",
|
||||
"metallic": true,
|
||||
"chromeType": "rosegold",
|
||||
"image": "images/chrome-rosegold.webp"
|
||||
|
||||
@ -130,7 +130,7 @@ function createColorSwatch(color) {
|
||||
|
||||
const swatch = document.createElement('div');
|
||||
swatch.classList.add('color-swatch');
|
||||
swatch.dataset.color = color.name;
|
||||
swatch.dataset.color = color.hex;
|
||||
swatch.style.color = color.hex;
|
||||
swatch.setAttribute('role', 'button');
|
||||
swatch.setAttribute('tabindex', '0');
|
||||
@ -171,9 +171,9 @@ function createColorSwatch(color) {
|
||||
colorName.textContent = color.name;
|
||||
|
||||
swatch.addEventListener('click', () => {
|
||||
const isSelected = selectedPalette.some(c => c.name === color.name);
|
||||
const isSelected = selectedPalette.some(c => c.hex === color.hex);
|
||||
if (isSelected) {
|
||||
selectedPalette = selectedPalette.filter(c => c.name !== color.name);
|
||||
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
||||
} else {
|
||||
selectedPalette.push(color);
|
||||
}
|
||||
@ -432,7 +432,7 @@ function renderSelectedPalette() {
|
||||
swatchWrapper.appendChild(colorName);
|
||||
|
||||
swatch.addEventListener('click', () => {
|
||||
selectedPalette = selectedPalette.filter(c => c.name !== color.name);
|
||||
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
|
||||
renderSelectedPalette();
|
||||
updateSwatchHighlights();
|
||||
});
|
||||
@ -460,7 +460,7 @@ function updateSwatchHighlights() {
|
||||
const color = swatch.dataset.color;
|
||||
const background = swatch.querySelector('.color-background');
|
||||
const nameEl = swatch.parentElement.querySelector('.color-name');
|
||||
const isSelected = selectedPalette.some(c => c.name === color);
|
||||
const isSelected = selectedPalette.some(c => c.hex === color);
|
||||
|
||||
if (isSelected) {
|
||||
background.classList.add('chosen');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user