fix: multi-category checkboxes in admin + requires-delivery toggle

- Category selector replaced with checkboxes — items can now be assigned to multiple categories directly in admin (not just Square). Each category shows a "Square" label if it came from the Square assignment. Saves as categoriesOverride[] (array of category names). - categoriesOverride takes precedence over old categoryOverride in the catalog route; old overrides still work as fallback. - Requires-delivery toggle and custom rate fields were already in the code but needed container rebuild to appear — no logic change. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat: required delivery toggle with custom rates per item
2026-04-18 09:44:00 -04:00 · 2026-04-18 09:31:29 -04:00
7 changed files with 227 additions and 88 deletions
--- a/estore/src/app/admin/page.tsx
+++ b/estore/src/app/admin/page.tsx
@ -728,10 +728,12 @@ function ItemEditor({
 }) {
  const ov = item._override

-  const [hidden,       setHidden]       = useState(ov.hidden   ?? false)
-  const [featured,     setFeatured]     = useState(ov.featured ?? item.featured ?? false)
-  const [catOverride,  setCatOverride]  = useState(ov.categoryOverride ?? '')
-  const [catLabel,     setCatLabel]     = useState(ov.categoryLabelOverride ?? '')
+  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 [sortOrder,    setSortOrder]    = useState(String(ov.sortOrder ?? ''))
  const [showColors,   setShowColors]   = useState<boolean | null>(
    ov.showColors != null ? ov.showColors : null
@ -762,6 +764,13 @@ function ItemEditor({
  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('')
@ -789,8 +798,8 @@ function ItemEditor({
      hiddenVariationIds: hiddenVars,
      hiddenModifierIds: hiddenMods,
    }
-    if (catOverride)  patch.categoryOverride      = catOverride
-    if (catLabel)     patch.categoryLabelOverride = catLabel
+    // Always save categoriesOverride (replaces old single-field overrides)
+    patch.categoriesOverride = selectedCatNames
    if (sortOrder !== '') patch.sortOrder = Number(sortOrder)
    if (showColors !== null) patch.showColors = showColors
    if (descOverride) patch.descriptionOverride = descOverride
@ -801,6 +810,9 @@ function ItemEditor({
    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',
@ -823,8 +835,7 @@ function ItemEditor({
    if (res.ok) {
      setHidden(false)
      setFeatured(item.featured ?? false)
-      setCatOverride('')
-      setCatLabel('')
+      setSelectedCatNames(item.categoryLabels ?? [item.categoryLabel])
      setSortOrder('')
      setShowColors(null)
      setHiddenMods([])
@ -833,6 +844,9 @@ function ItemEditor({
      setColorMin('')
      setColorMax('')
      setChromeSurcharge('')
+      setRequiresDelivery(false)
+      setDeliveryBase('')
+      setDeliveryPerMile('')
      onSaved(item.id, {})
    }
  }
@ -855,15 +869,13 @@ function ItemEditor({
    if (!newCatName.trim()) return
    setCreatingCat(true)
    const cat = await onCreateCategory(newCatName.trim())
-    setCatOverride(cat.name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''))
-    setCatLabel(cat.name)
+    // Auto-select the newly created category
+    if (cat.id) setSelectedCatNames((prev) => [...prev, 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">
@ -891,37 +903,86 @@ function ItemEditor({
              />
              ⭐ 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>

-          {/* Category */}
-          <div className="field">
-            <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>
+          {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 */}
+          <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>
+              )}
+            </div>
            <button
              className="button is-ghost is-small"
              style={{ padding: '0 2px', fontSize: '0.75rem', marginTop: 4 }}
              onClick={() => setShowNewCat(!showNewCat)}
              type="button"
            >
-              + Create new category
+              + Create new category in Square
            </button>
            {showNewCat && (
              <div className="field has-addons" style={{ marginTop: 6 }}>
--- a/estore/src/app/api/catalog/route.ts
+++ b/estore/src/app/api/catalog/route.ts
@ -13,20 +13,38 @@ function applyOverrides(items: CatalogItem[]): CatalogItem[] {
      return {
        ...item,
        featured:       ov.featured              ?? item.featured,
-        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]),
+        // 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]),
+            }
+        ),
        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,
+        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,
        description:   ov.descriptionOverride   ?? item.description,
        variations:    item.variations
          .filter((v) => !(ov.hiddenVariationIds ?? []).includes(v.id)),
--- a/estore/src/app/api/delivery-quote/route.ts
+++ b/estore/src/app/api/delivery-quote/route.ts
@ -3,9 +3,10 @@ import { geocode, calcDelivery, inferTier } from '@/lib/delivery'
 import { readDeliveryRates } from '@/lib/delivery-rates'

 export async function POST(request: Request) {
-  const { address, itemNames } = await request.json() as {
-    address:   string
-    itemNames: string[]
+  const { address, itemNames, rateOverride } = await request.json() as {
+    address:      string
+    itemNames:    string[]
+    rateOverride?: { base: number; perMile: number }
  }

  if (!address?.trim()) {
@ -19,6 +20,16 @@ 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) {
--- a/estore/src/components/CartDrawer.tsx
+++ b/estore/src/components/CartDrawer.tsx
@ -67,6 +67,26 @@ 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',   '')
@ -155,7 +175,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 = fulfillmentType === 'delivery' ? (quote?.totalCents ?? 0) : 0
+  const deliveryTotal = effectiveFulfillment === 'delivery' ? (quote?.totalCents ?? 0) : 0
  const taxCents      = Math.round(subtotal * CT_TAX_RATE)
  const grandTotal    = subtotal + deliveryTotal + taxCents

@ -178,13 +198,13 @@ export default function CartDrawer() {
      }),
    })),
    selectedColors:  entries.flatMap((e) => e.selectedColors),
-    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,
+    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,
    customerFirstName: custFirst,
    customerLastName:  custLast,
    customerEmail:     custEmail,
@ -192,7 +212,7 @@ export default function CartDrawer() {
    grandTotal,
    idempotencyKey:    checkoutKey || undefined,
  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [entries, fulfillmentType, deliverySlot, pickupSlot, fullAddress, quote, deliveryInstructions, custFirst, custLast, custEmail, custPhone, grandTotal, entryUnitPrice])
+  }), [entries, effectiveFulfillment, deliverySlot, pickupSlot, fullAddress, quote, deliveryInstructions, custFirst, custLast, custEmail, custPhone, grandTotal, entryUnitPrice])

  const handleSuccess = (id: string, ref: string) => {
    setOrderId(id)
@ -224,7 +244,11 @@ 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) }),
+        body:    JSON.stringify({
+          address:      fullAddress,
+          itemNames:    entries.map((e) => e.product.name),
+          rateOverride: deliveryRateOverride,
+        }),
      })
      const data = await res.json()
      if (!res.ok) { setQuoteErr(data.error ?? 'Could not calculate delivery.'); return }
@ -313,31 +337,37 @@ export default function CartDrawer() {
      )}

      {/* Fulfillment toggle */}
-      <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>
+      {cartRequiresDelivery ? (
+        <p style={{ fontSize: '0.8rem', color: '#555', marginBottom: '0.75rem', background: '#f5f5f5', padding: '7px 10px', borderRadius: 6 }}>
+          🚗 One or more items require delivery &amp; 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>
+      )}

      <button
        className="button is-info is-fullwidth"
        onClick={() => setStep('delivery')}
      >
-        {fulfillmentType === 'pickup' ? 'Choose Pickup Time →' : 'Continue to Delivery →'}
+        {effectiveFulfillment === 'pickup' ? 'Choose Pickup Time →' : 'Continue to Delivery →'}
      </button>
    </>
  )
@ -491,14 +521,14 @@ export default function CartDrawer() {

  const deliveryFooter = (
    <>
-      {fulfillmentType === 'delivery' && (
+      {effectiveFulfillment === '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={fulfillmentType === 'delivery' ? (!quote || !deliverySlot) : !pickupSlot}
+        disabled={effectiveFulfillment === 'delivery' ? (!quote || !deliverySlot) : !pickupSlot}
        onClick={() => setStep('info')}
      >
        Continue to Your Info →
@ -583,7 +613,7 @@ export default function CartDrawer() {
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
          <span>Items</span><span>{fmt(subtotal)}</span>
        </div>
-        {fulfillmentType === 'delivery' && quote && (
+        {effectiveFulfillment === 'delivery' && quote && (
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
            <span>Delivery</span><span>{fmt(quote.totalCents)}</span>
          </div>
@ -594,12 +624,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>
-        {fulfillmentType === 'delivery' && deliverySlot && (
+        {effectiveFulfillment === 'delivery' && deliverySlot && (
          <p style={{ color: '#555', marginTop: '6px' }}>
            Delivery: {deliverySlot.date} at {deliverySlot.label}
          </p>
        )}
-        {fulfillmentType === 'pickup' && pickupSlot && (
+        {effectiveFulfillment === 'pickup' && pickupSlot && (
          <p style={{ color: '#555', marginTop: '6px' }}>
            Pickup: {pickupSlot.date} at {pickupSlot.label}
          </p>
@ -656,7 +686,7 @@ export default function CartDrawer() {
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
        <span>Items</span><span>{fmt(subtotal)}</span>
      </div>
-      {fulfillmentType === 'delivery' && quote && (
+      {effectiveFulfillment === 'delivery' && quote && (
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
          <span>Delivery</span><span>{fmt(quote.totalCents)}</span>
        </div>
@ -667,12 +697,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>
-      {fulfillmentType === 'delivery' && deliverySlot && (
+      {effectiveFulfillment === 'delivery' && deliverySlot && (
        <p style={{ color: '#555', marginTop: '6px' }}>
          Delivery: {deliverySlot.date} at {deliverySlot.label}
        </p>
      )}
-      {fulfillmentType === 'pickup' && pickupSlot && (
+      {effectiveFulfillment === 'pickup' && pickupSlot && (
        <p style={{ color: '#555', marginTop: '6px' }}>
          Pickup: {pickupSlot.date} at {pickupSlot.label}
        </p>
@ -684,7 +714,7 @@ export default function CartDrawer() {

  const bodyContent: Record<Step, React.ReactNode> = {
    cart:     cartBody,
-    delivery: fulfillmentType === 'pickup' ? pickupBody : deliveryBody,
+    delivery: effectiveFulfillment === 'pickup' ? pickupBody : deliveryBody,
    info:     infoBody,
    payment:  paymentSummary,   // PaymentForm rendered separately below, always mounted
  }
@ -756,7 +786,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' && fulfillmentType === 'pickup' ? 'Pickup Time' : STEP_TITLES[step]}
+              {step === 'delivery' && effectiveFulfillment === 'pickup' ? 'Pickup Time' : STEP_TITLES[step]}
              {step === 'cart' && totalItems > 0 && ` (${totalItems})`}
            </strong>
            {/* Step indicator dots */}
@ -793,17 +823,17 @@ export default function CartDrawer() {
              </p>
              <p style={{ color: '#555', fontSize: '0.88rem', marginBottom: '1rem', lineHeight: 1.5 }}>
                Order <strong>#{shortRef}</strong> confirmed.{' '}
-                {fulfillmentType === 'pickup'
+                {effectiveFulfillment === 'pickup'
                  ? <>Your pickup is all set — see you at the shop! A confirmation will be sent to <strong>{custEmail}</strong>.</>
                  : <>We&rsquo;ll reach out to <strong>{custEmail}</strong> to confirm final delivery details.</>
                }
              </p>
-              {fulfillmentType === 'delivery' && deliverySlot && (
+              {effectiveFulfillment === 'delivery' && deliverySlot && (
                <p style={{ color: '#0d6e75', fontSize: '0.85rem', marginBottom: '1.5rem' }}>
                  Delivery: {deliverySlot.date} at {deliverySlot.label}
                </p>
              )}
-              {fulfillmentType === 'pickup' && pickupSlot && (
+              {effectiveFulfillment === 'pickup' && pickupSlot && (
                <p style={{ color: '#0d6e75', fontSize: '0.85rem', marginBottom: '1.5rem' }}>
                  Pickup: {pickupSlot.date} at {pickupSlot.label}
                </p>
--- a/estore/src/components/ProductCard.tsx
+++ b/estore/src/components/ProductCard.tsx
@ -89,6 +89,11 @@ 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 &amp; setup required
+            </p>
+          )}
          <p className="is-size-7">{item.description}</p>

          {item.tags.length > 0 && (
--- a/estore/src/data/mock-catalog.ts
+++ b/estore/src/data/mock-catalog.ts
@ -46,6 +46,12 @@ export interface CatalogItem {
  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[] = (([
--- a/estore/src/lib/overrides.ts
+++ b/estore/src/lib/overrides.ts
@ -24,6 +24,14 @@ export interface ItemOverride {
  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>