feat: required delivery toggle with custom rates per item

Items can now be marked as "requires delivery" in admin — these items
cannot be picked up and must be delivered (and struck).

- Admin item editor: "Requires delivery" checkbox + custom base/per-mile
  rate fields that appear when the toggle is on
- ProductCard: "Delivery & setup required" note on the card
- CartDrawer: pickup toggle is hidden and replaced with an explanation
  when any cart item requires delivery; the quote call passes the
  item's custom rate override (highest base + highest per-mile wins
  when multiple requires-delivery items are in the cart)
- delivery-quote API: accepts optional rateOverride to apply per-item
  pricing on top of the inferred tier

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

estore/src/app/admin/page.tsx

@@ -762,6 +762,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('')
@@ -801,6 +808,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',
@@ -833,6 +843,9 @@ function ItemEditor({
       setColorMin('')
       setColorMax('')
       setChromeSurcharge('')
+      setRequiresDelivery(false)
+      setDeliveryBase('')
+      setDeliveryPerMile('')
       onSaved(item.id, {})
     }
   }
@@ -891,8 +904,53 @@ 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>
 
+          {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 */}
           <div className="field">
             <label className="label is-small">Category</label>

estore/src/app/api/catalog/route.ts

@@ -27,6 +27,9 @@ function applyOverrides(items: CatalogItem[]): CatalogItem[] {
         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,
         description:   ov.descriptionOverride   ?? item.description,
         variations:    item.variations
           .filter((v) => !(ov.hiddenVariationIds ?? []).includes(v.id)),

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 {
+  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) {

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,6 +337,11 @@ 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 &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
@@ -322,22 +351,23 @@ export default function CartDrawer() {
               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',
+                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>

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 && (

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[] = (([

estore/src/lib/overrides.ts

@@ -24,6 +24,12 @@ export interface ItemOverride {
   disabledColors?: string[]
   /** Unit label for the quantity field, e.g. "ft". When set, the quantity control shows "X ft". */
   quantityUnit?: string
+  /** 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>