{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "store-pickup-curbside", "title": "Store Pickup Curbside", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/store-pickup-curbside/StorePickupCurbside.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Bell,\n Car,\n Check,\n CheckCircle2,\n Clock,\n Eye,\n Layers,\n MapPin,\n MessageSquare,\n MoreHorizontal,\n Navigation,\n Package,\n PackageCheck,\n Phone,\n Plus,\n RefreshCw,\n Search,\n Send,\n Store,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { OrderDetailDialog } from './OrderDetailDialog'\nimport { StorePickupModals } from './StorePickupModals'\nimport type { OrderItem, OrderStatus, PickupMode, PickupOrder, StorePickupCurbsideProps } from './store-pickup-types'\nimport { INITIAL_ORDERS } from './store-pickup-data'\n\nexport type { OrderItem, OrderStatus, PickupMode, PickupOrder, StorePickupCurbsideProps }\n\nexport function StorePickupCurbside({\n storeName = 'Pasadena Flagship Store #02',\n storeCode = 'STORE-CA-02',\n initialModeFilter = 'all',\n className,\n}: StorePickupCurbsideProps) {\n const [orders, setOrders] = React.useState(INITIAL_ORDERS)\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedModeFilter, setSelectedModeFilter] = React.useState<'all' | 'curbside' | 'in_store'>(initialModeFilter)\n const [selectedStatusFilter, setSelectedStatusFilter] = React.useState<\n 'all' | 'arrived' | 'en_route' | 'ready_staging' | 'completed'\n >('all')\n\n // Modals\n const [checkInModalOpen, setCheckInModalOpen] = React.useState(false)\n const [inspectModalOpen, setInspectModalOpen] = React.useState(false)\n const [notifyModalOpen, setNotifyModalOpen] = React.useState(false)\n const [newOrderModalOpen, setNewOrderModalOpen] = React.useState(false)\n const [selectedOrder, setSelectedOrder] = React.useState(null)\n const [actionFeedbackToast, setActionFeedbackToast] = React.useState(null)\n\n // Toast feedback helper\n const triggerToast = React.useCallback((msg: string) => {\n setActionFeedbackToast(msg)\n setTimeout(() => {\n setActionFeedbackToast((current) => (current === msg ? null : current))\n }, 3500)\n }, [])\n\n // KPI calculations\n const readyInStagingCount = React.useMemo(() => orders.filter((o) => o.status !== 'completed').length, [orders])\n const arrivedCustomersCount = React.useMemo(() => orders.filter((o) => o.status === 'arrived').length, [orders])\n const enRouteCount = React.useMemo(() => orders.filter((o) => o.status === 'en_route').length, [orders])\n const completedCount = React.useMemo(() => orders.filter((o) => o.status === 'completed').length + 32, [orders])\n\n // Filtered orders list\n const filteredOrders = React.useMemo(() => {\n return orders.filter((order) => {\n const query = searchQuery.trim().toLowerCase()\n const matchesSearch =\n query === '' ||\n order.customerName.toLowerCase().includes(query) ||\n order.orderNumber.toLowerCase().includes(query) ||\n order.customerPhone.includes(query) ||\n order.stagingLocation.bin.toLowerCase().includes(query) ||\n (order.vehicleDetails?.makeModel.toLowerCase().includes(query) ?? false) ||\n (order.vehicleDetails?.plate.toLowerCase().includes(query) ?? false) ||\n order.items.some((i) => i.name.toLowerCase().includes(query))\n\n const matchesMode = selectedModeFilter === 'all' || order.pickupMode === selectedModeFilter\n const matchesStatus = selectedStatusFilter === 'all' || order.status === selectedStatusFilter\n\n return matchesSearch && matchesMode && matchesStatus\n })\n }, [orders, searchQuery, selectedModeFilter, selectedStatusFilter])\n\n const handleInspect = (order: PickupOrder) => {\n setSelectedOrder(order)\n setInspectModalOpen(true)\n }\n\n const handleNotify = (order: PickupOrder) => {\n setSelectedOrder(order)\n setNotifyModalOpen(true)\n }\n\n const handleSendNotification = (channel: 'sms' | 'push') => {\n if (!selectedOrder) return\n setNotifyModalOpen(false)\n triggerToast(`Sent arrival notification to ${selectedOrder.customerName} via ${channel.toUpperCase()}`)\n }\n\n const handleMarkDelivered = (orderId: string) => {\n setOrders((prev) =>\n prev.map((o) =>\n o.id === orderId\n ? {\n ...o,\n status: 'completed',\n statusLabel: 'Delivered & Handed Over',\n }\n : o,\n ),\n )\n const target = orders.find((o) => o.id === orderId)\n if (target) {\n triggerToast(`Order #${target.orderNumber} successfully delivered to ${target.customerName}!`)\n }\n setInspectModalOpen(false)\n }\n\n const handleConfirmArrival = (payload: {\n orderId: string\n spot: string\n vehicleModel: string\n plate: string\n hazards: boolean\n notes: string\n }) => {\n const target = orders.find((o) => o.id === payload.orderId)\n if (target) {\n setOrders((prev) =>\n prev.map((o) =>\n o.id === payload.orderId\n ? {\n ...o,\n status: 'arrived',\n pickupMode: 'curbside',\n spotNumber: parseInt(payload.spot, 10) || 4,\n waitMinutes: 1,\n statusLabel: 'Customer Arrived · Waiting 1m',\n vehicleDetails: {\n makeModel: payload.vehicleModel || 'Vehicle Unspecified',\n plate: payload.plate || 'N/A',\n hazardsFlashing: payload.hazards,\n },\n arrivedAt: 'Just now',\n }\n : o,\n ),\n )\n setCheckInModalOpen(false)\n triggerToast(`Customer ${target.customerName} checked into Spot #${payload.spot}! Runner alerted.`)\n }\n }\n\n const handleCreateNewOrder = (payload: {\n customerName: string\n customerPhone: string\n pickupMode: PickupMode\n spotNumber: string\n stagingAisle: string\n stagingBin: string\n itemSummary: string\n orderTotal: string\n }) => {\n const idNum = Math.floor(10000 + Math.random() * 90000)\n const newOrder: PickupOrder = {\n id: `order-${Date.now()}`,\n orderNumber: `BOPIS-${idNum}`,\n customerName: payload.customerName,\n customerPhone: payload.customerPhone || '(415) 555-0100',\n customerInitials: payload.customerName\n .split(' ')\n .map((n) => n[0])\n .join('')\n .toUpperCase()\n .slice(0, 2),\n pickupMode: payload.pickupMode,\n spotNumber: payload.pickupMode === 'curbside' ? parseInt(payload.spotNumber, 10) || 3 : undefined,\n pickupDeskBay: payload.pickupMode === 'in_store' ? 'Pickup Desk Bay 02' : undefined,\n vehicleDetails:\n payload.pickupMode === 'curbside'\n ? {\n makeModel: 'Customer Vehicle',\n plate: 'PENDING',\n hazardsFlashing: false,\n }\n : undefined,\n status: 'ready_staging',\n statusLabel: `Ready in ${payload.stagingAisle}`,\n stagingLocation: {\n zone: payload.stagingAisle,\n bin: payload.stagingBin,\n type: payload.pickupMode === 'in_store' ? 'locker' : 'shelf',\n },\n items: [\n {\n id: `item-${Date.now()}`,\n name: payload.itemSummary || 'Selected Retail Merchandise',\n sku: `SKU-${Math.floor(100 + Math.random() * 900)}`,\n quantity: 1,\n price: parseFloat(payload.orderTotal) || 99.0,\n staged: true,\n category: 'General',\n },\n ],\n orderTotal: parseFloat(payload.orderTotal) || 99.0,\n placedAt: '11:45 AM',\n readyAt: 'Just now',\n verificationCode: `${Math.floor(1000 + Math.random() * 9000)}`,\n assignedRunner: 'Pending Handoff',\n }\n\n setOrders((prev) => [newOrder, ...prev])\n setNewOrderModalOpen(false)\n triggerToast(`New Order #${newOrder.orderNumber} staged in ${newOrder.stagingLocation.bin}!`)\n }\n\n const handleRefresh = () => {\n triggerToast('Refreshed pickup staging queue & curbside telemetry')\n }\n\n return (\n
\n {/* Live Toast Notification Banner */}\n {actionFeedbackToast && (\n
\n
\n \n {actionFeedbackToast}\n
\n setActionFeedbackToast(null)}\n >\n \n \n
\n )}\n\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

Store Pickup & Curbside Coordination

\n \n \n Live Staging Radar\n \n
\n
\n \n \n {storeName}\n \n {storeCode}\n \n {readyInStagingCount} Ready · {enRouteCount} En Route · {completedCount} Completed\n \n
\n
\n\n
\n setCheckInModalOpen(true)}\n >\n \n Customer \"I'm Here\" Check-In\n \n\n \n
\n
\n\n {/* 4 Fulfillment Health Cards */}\n
\n {/* Card 1: Ready in Staging */}\n \n \n \n Ready for Customer\n \n
\n \n
\n \n \n
8 Orders in Staging
\n
\n 6 Bins · 2 Secured Lockers\n \n 100% Pick Accuracy\n \n
\n \n \n\n {/* Card 2: Arrived in Curbside Bay (Amber Alert) */}\n \n \n \n Customers in Parking Bays\n \n
\n \n
\n \n \n
\n {arrivedCustomersCount} Customers Arrived\n
\n
\n Bay #4 (2m) · Bay #2 (4m)\n \n \n Action Required\n \n
\n \n \n\n {/* Card 3: Avg Fulfillment Time */}\n \n \n \n Avg Fulfillment Time\n \n
\n \n
\n \n \n
1m 45s
\n
\n Goal < 3m 00s (-18s vs target)\n \n Fastest: 52s\n \n
\n \n \n\n {/* Card 4: Today's Completed Pickups */}\n \n \n \n Today's Pickups\n \n
\n \n
\n \n \n
{completedCount} Orders
\n
\n $5,240 Fulfilled Volume\n \n 97.2% On-Time SLA\n \n
\n \n \n
\n\n {/* Active Pickup Orders Board / Table Card */}\n \n \n
\n
\n Active Pickup Orders Board\n \n Live queue of customers arriving curbside and checking in at in-store fulfillment stations.\n \n
\n
\n \n
\n
\n\n {/* Filter & Search Controls */}\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search customer, order #, spot, or items...\"\n className=\"h-8 pl-8 text-xs\"\n />\n {searchQuery && (\n setSearchQuery('')}\n >\n \n \n )}\n
\n\n
\n
\n Mode:\n setSelectedModeFilter(val)}\n >\n \n \n \n \n All Modes\n Curbside Bay\n In-Store Desk\n \n \n
\n\n
\n Status:\n \n setSelectedStatusFilter(val)\n }\n >\n \n \n \n \n All Statuses\n Customer Arrived\n En Route\n Ready in Staging\n Completed\n \n \n
\n
\n
\n \n\n \n
\n \n \n \n Customer & Contact\n Order & Items\n Pickup Mode & Bay\n Customer Status\n Staging Location\n Fulfillment Actions\n \n \n \n {filteredOrders.map((order) => (\n \n {/* Customer Name & Phone */}\n \n
\n \n \n {order.customerInitials}\n \n \n
\n
\n {order.customerName}\n
\n
\n \n {order.customerPhone}\n
\n
\n
\n \n\n {/* Order Number & Items Summary */}\n \n
\n
\n #{order.orderNumber}\n \n (${order.orderTotal.toFixed(2)})\n \n
\n `${i.quantity}x ${i.name}`).join(', ')}\n >\n {order.items.length} {order.items.length === 1 ? 'item' : 'items'}:{' '}\n {order.items.map((i) => i.name).join(', ')}\n
\n \n \n\n {/* Pickup Mode Badge */}\n \n
\n {order.pickupMode === 'curbside' ? (\n <>\n \n \n Curbside Spot #{order.spotNumber}\n \n {order.vehicleDetails && (\n
\n {order.vehicleDetails.makeModel}\n \n · {order.vehicleDetails.plate}\n \n
\n )}\n \n ) : (\n <>\n \n \n In-Store Desk\n \n
\n {order.pickupDeskBay || 'Front Pickup Counter'}\n
\n \n )}\n
\n \n\n {/* Customer Status */}\n \n
\n {order.status === 'arrived' ? (\n <>\n \n \n \n Customer Arrived · Waiting {order.waitMinutes || 2}m\n \n
\n Check-in: {order.arrivedAt || '11:40 AM'}\n {order.vehicleDetails?.hazardsFlashing && (\n · Hazards On\n )}\n
\n \n ) : order.status === 'en_route' ? (\n <>\n \n \n En Route · {order.etaMinutes} min ETA\n \n
\n {order.distanceMiles} miles away\n
\n \n ) : order.status === 'ready_staging' ? (\n <>\n \n \n Ready in Staging\n \n
Staged at {order.readyAt}
\n \n ) : (\n <>\n \n \n Delivered\n \n
Completed Handoff
\n \n )}\n
\n \n\n {/* Staging Location */}\n \n
\n
\n \n {order.stagingLocation.zone}\n {order.stagingLocation.bin}\n
\n {order.stagingLocation.lockerPin ? (\n
\n PIN Code:{' '}\n {order.stagingLocation.lockerPin}\n
\n ) : (\n
\n Type: {order.stagingLocation.type} staging\n
\n )}\n
\n \n\n {/* Fulfillment Actions */}\n \n
\n {order.status === 'arrived' ? (\n handleMarkDelivered(order.id)}\n >\n \n Mark Delivered\n \n ) : order.status !== 'completed' ? (\n handleNotify(order)}\n >\n \n Notify\n \n ) : (\n \n )}\n\n \n \n \n \n Actions\n \n \n \n Order #{order.orderNumber}\n \n handleInspect(order)}>\n \n Inspect Order Details\n \n handleNotify(order)}>\n \n Send SMS / Push Alert\n \n \n {order.status !== 'completed' && (\n handleMarkDelivered(order.id)}\n >\n \n Complete Handoff\n \n )}\n \n \n
\n \n \n ))}\n\n {filteredOrders.length === 0 && (\n \n \n No pickup orders match your search or filter criteria.\n \n \n )}\n \n
\n
\n \n \n
\n Showing {filteredOrders.length} of{' '}\n {orders.length} active pickup orders\n
\n
\n
\n \n Curbside Bays (Spots 1-6)\n
\n
\n \n In-Store Pickup Desk\n
\n
\n \n \n\n {/* Modal 1: Inspect Order Details Dialog */}\n \n\n {/* Action Modals (Check-In, Notify, New Order) */}\n \n
\n )\n}\n\nexport default StorePickupCurbside\n", "type": "registry:block", "target": "~/components/blocks/StorePickupCurbside.tsx" }, { "path": "packages/registry-react/blocks/store-pickup-curbside/OrderDetailDialog.tsx", "content": "'use client'\n\nimport { Car, Check, CheckCircle2, Layers } from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport type { PickupOrder } from './store-pickup-types'\n\nexport interface OrderDetailDialogProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n selectedOrder: PickupOrder | null\n onMarkDelivered: (orderId: string) => void\n}\n\nexport function OrderDetailDialog({ open, onOpenChange, selectedOrder, onMarkDelivered }: OrderDetailDialogProps) {\n return (\n \n \n {selectedOrder && (\n <>\n \n
\n
\n
\n Order #{selectedOrder.orderNumber}\n \n {selectedOrder.pickupMode === 'curbside'\n ? `Curbside Bay #${selectedOrder.spotNumber}`\n : 'In-Store Desk'}\n \n
\n \n Placed at {selectedOrder.placedAt} · Staged at {selectedOrder.readyAt}\n \n
\n
\n \n\n
\n {/* Customer & Contact Strip */}\n
\n
\n \n {selectedOrder.customerInitials}\n \n
\n
{selectedOrder.customerName}
\n
{selectedOrder.customerPhone}
\n
\n
\n
\n
Pickup Verification PIN
\n
\n {selectedOrder.verificationCode}\n
\n
\n
\n\n {/* Staging & Bay Location Details */}\n
\n
\n
\n \n Staging Bin Location\n
\n
\n {selectedOrder.stagingLocation.zone} ·{' '}\n {selectedOrder.stagingLocation.bin}\n
\n
\n {selectedOrder.stagingLocation.type} unit storage\n
\n
\n\n
\n
\n \n Vehicle & Bay\n
\n {selectedOrder.pickupMode === 'curbside' && selectedOrder.vehicleDetails ? (\n <>\n
\n Spot #{selectedOrder.spotNumber} · {selectedOrder.vehicleDetails.makeModel}\n
\n
\n Plate: {selectedOrder.vehicleDetails.plate}\n
\n \n ) : (\n <>\n
\n {selectedOrder.pickupDeskBay || 'Pickup Counter'}\n
\n
\n Locker PIN: {selectedOrder.stagingLocation.lockerPin || 'N/A'}\n
\n \n )}\n
\n
\n\n {/* Staged Items Checklist */}\n
\n
\n Order Items Checklist ({selectedOrder.items.length} items)\n Total: ${selectedOrder.orderTotal.toFixed(2)}\n
\n
\n {selectedOrder.items.map((item) => (\n
\n
\n \n
\n
{item.name}
\n
\n SKU: {item.sku} · Qty: {item.quantity}\n
\n
\n
\n
\n ${(item.price * item.quantity).toFixed(2)}\n
\n
\n ))}\n
\n
\n
\n\n \n \n {selectedOrder.status !== 'completed' && (\n onMarkDelivered(selectedOrder.id)}\n >\n \n Mark Delivered & Close\n \n )}\n \n \n )}\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/OrderDetailDialog.tsx" }, { "path": "packages/registry-react/blocks/store-pickup-curbside/StorePickupModals.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Bell, Car, CheckCircle2, MessageSquare, Send } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport type { PickupMode, PickupOrder } from './store-pickup-types'\n\ninterface StorePickupModalsProps {\n checkInModalOpen: boolean\n onCheckInModalOpenChange: (open: boolean) => void\n notifyModalOpen: boolean\n onNotifyModalOpenChange: (open: boolean) => void\n newOrderModalOpen: boolean\n onNewOrderModalOpenChange: (open: boolean) => void\n orders: PickupOrder[]\n selectedOrder: PickupOrder | null\n storeName: string\n onConfirmArrival: (payload: {\n orderId: string\n spot: string\n vehicleModel: string\n plate: string\n hazards: boolean\n notes: string\n }) => void\n onSendNotification: (channel: 'sms' | 'push') => void\n onCreateOrder: (payload: {\n customerName: string\n customerPhone: string\n pickupMode: PickupMode\n spotNumber: string\n stagingAisle: string\n stagingBin: string\n itemSummary: string\n orderTotal: string\n }) => void\n}\n\nexport function StorePickupModals({\n checkInModalOpen,\n onCheckInModalOpenChange,\n notifyModalOpen,\n onNotifyModalOpenChange,\n newOrderModalOpen,\n onNewOrderModalOpenChange,\n orders,\n selectedOrder,\n storeName,\n onConfirmArrival,\n onSendNotification,\n onCreateOrder,\n}: StorePickupModalsProps) {\n // Check-in state\n const [checkInOrderId, setCheckInOrderId] = React.useState('order-3')\n const [checkInSpot, setCheckInSpot] = React.useState('4')\n const [checkInVehicleModel, setCheckInVehicleModel] = React.useState('Silver Tesla Model 3')\n const [checkInPlate, setCheckInPlate] = React.useState('7XYZ892')\n const [checkInHazards, setCheckInHazards] = React.useState(true)\n const [checkInNotes, setCheckInNotes] = React.useState('Parked in bay 4, trunk unlocked for contactless placement.')\n\n // Notify state\n const [notifyChannel, setNotifyChannel] = React.useState<'sms' | 'push'>('sms')\n const [notifyMessageSent, setNotifyMessageSent] = React.useState(false)\n\n // New Order state\n const [newCustomerName, setNewCustomerName] = React.useState('')\n const [newCustomerPhone, setNewCustomerPhone] = React.useState('')\n const [newPickupMode, setNewPickupMode] = React.useState('curbside')\n const [newSpotNumber, setNewSpotNumber] = React.useState('3')\n const [newStagingAisle, setNewStagingAisle] = React.useState('Aisle 01')\n const [newStagingBin, setNewStagingBin] = React.useState('Bin A-12')\n const [newItemSummary, setNewItemSummary] = React.useState('')\n const [newOrderTotal, setNewOrderTotal] = React.useState('120.00')\n\n const handleCheckInSubmit = () => {\n onConfirmArrival({\n orderId: checkInOrderId,\n spot: checkInSpot,\n vehicleModel: checkInVehicleModel,\n plate: checkInPlate,\n hazards: checkInHazards,\n notes: checkInNotes,\n })\n }\n\n const handleSendNotification = () => {\n if (!selectedOrder) return\n setNotifyMessageSent(true)\n setTimeout(() => {\n onSendNotification(notifyChannel)\n setNotifyMessageSent(false)\n }, 1000)\n }\n\n const handleCreateOrder = () => {\n if (!newCustomerName) return\n onCreateOrder({\n customerName: newCustomerName,\n customerPhone: newCustomerPhone,\n pickupMode: newPickupMode,\n spotNumber: newSpotNumber,\n stagingAisle: newStagingAisle,\n stagingBin: newStagingBin,\n itemSummary: newItemSummary,\n orderTotal: newOrderTotal,\n })\n setNewCustomerName('')\n setNewCustomerPhone('')\n setNewItemSummary('')\n }\n\n return (\n <>\n {/* Modal 1: Customer \"I'm Here\" Parking Spot Check-in Dialog */}\n \n \n \n
\n
\n \n
\n
\n Customer Parking Arrival Check-In\n \n Check in customer arriving at the curbside pickup bay or simulate customer mobile app check-in.\n \n
\n
\n \n\n
\n {/* Select Order to Check In */}\n
\n \n \n
\n\n {/* Select Parking Spot */}\n
\n \n
\n {['1', '2', '3', '4', '5', '6'].map((spot) => (\n setCheckInSpot(spot)}\n >\n Bay\n #{spot}\n \n ))}\n
\n
\n\n {/* Vehicle Information */}\n
\n
\n \n setCheckInVehicleModel(e.target.value)}\n placeholder=\"e.g. Silver Tesla Model 3\"\n className=\"h-8 text-xs\"\n />\n
\n
\n \n setCheckInPlate(e.target.value)}\n placeholder=\"e.g. 7XYZ892\"\n className=\"h-8 font-mono text-xs uppercase\"\n />\n
\n
\n\n {/* Arrival Notes */}\n
\n \n setCheckInNotes(e.target.value)}\n placeholder=\"e.g. Trunk unlocked, hazard lights on\"\n className=\"h-8 text-xs\"\n />\n
\n\n {/* Hazard Lights Checkbox Simulation */}\n
\n setCheckInHazards(e.target.checked)}\n type=\"checkbox\"\n className=\"border-border text-primary focus:ring-primary size-4 rounded\"\n />\n \n
\n
\n\n \n \n \n \n \n \n Confirm Arrival & Alert Runner\n \n \n \n \n\n {/* Modal 2: Notify Customer Dialog */}\n \n \n {selectedOrder && (\n \n Notify Customer\n \n Send real-time pickup status alert to {selectedOrder.customerName} ({selectedOrder.customerPhone}).\n \n \n )}\n\n {selectedOrder && (\n
\n
\n \n
\n setNotifyChannel('sms')}\n >\n \n SMS Text Message\n \n setNotifyChannel('push')}\n >\n \n Mobile App Push\n \n
\n
\n\n
\n
\n Message Preview\n 160 chars\n
\n

\n \"Hi {selectedOrder.customerName}, your Order #{selectedOrder.orderNumber} is ready at {storeName}!\n Pull into Curbside Spot #{selectedOrder.spotNumber || '1-6'} and tap 'I'm Here' for runner delivery.\"\n

\n
\n
\n )}\n\n \n \n \n \n \n \n \n \n\n {/* Modal 3: New Pickup Order Staging Dialog */}\n \n \n \n Stage New Pickup Order\n \n Register an incoming online BOPIS order into retail staging shelves or lockers.\n \n \n\n
\n
\n
\n \n setNewCustomerName(e.target.value)}\n placeholder=\"e.g. Alex Morgan\"\n className=\"h-8 text-xs\"\n />\n
\n
\n \n setNewCustomerPhone(e.target.value)}\n placeholder=\"e.g. (415) 555-0199\"\n className=\"h-8 font-mono text-xs\"\n />\n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n \n setNewStagingAisle(e.target.value)}\n placeholder=\"e.g. Aisle 01\"\n className=\"h-8 text-xs\"\n />\n
\n
\n \n setNewStagingBin(e.target.value)}\n placeholder=\"e.g. Bin B-05\"\n className=\"h-8 text-xs\"\n />\n
\n
\n\n
\n \n setNewItemSummary(e.target.value)}\n placeholder=\"e.g. Noise Cancelling Earbuds, Travel Case\"\n className=\"h-8 text-xs\"\n />\n
\n\n
\n \n setNewOrderTotal(e.target.value)}\n placeholder=\"120.00\"\n className=\"h-8 font-mono text-xs\"\n />\n
\n
\n\n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/StorePickupModals.tsx" }, { "path": "packages/registry-react/blocks/store-pickup-curbside/store-pickup-types.ts", "content": "export type PickupMode = 'curbside' | 'in_store'\nexport type OrderStatus = 'arrived' | 'en_route' | 'ready_staging' | 'completed'\n\nexport interface OrderItem {\n id: string\n name: string\n sku: string\n quantity: number\n price: number\n staged: boolean\n category: string\n}\n\nexport interface PickupOrder {\n id: string\n orderNumber: string\n customerName: string\n customerPhone: string\n customerInitials: string\n avatar?: string\n pickupMode: PickupMode\n spotNumber?: number\n vehicleDetails?: {\n makeModel: string\n plate: string\n hazardsFlashing?: boolean\n }\n pickupDeskBay?: string\n status: OrderStatus\n statusLabel: string\n etaMinutes?: number\n distanceMiles?: number\n waitMinutes?: number\n stagingLocation: {\n zone: string\n bin: string\n lockerPin?: string\n type: 'shelf' | 'locker' | 'bulky'\n }\n items: OrderItem[]\n orderTotal: number\n placedAt: string\n readyAt: string\n arrivedAt?: string\n verificationCode: string\n assignedRunner?: string\n}\n\nexport interface StorePickupCurbsideProps {\n storeName?: string\n storeCode?: string\n initialModeFilter?: 'all' | 'curbside' | 'in_store'\n className?: string\n}\n", "type": "registry:block", "target": "~/components/blocks/store-pickup-types.ts" }, { "path": "packages/registry-react/blocks/store-pickup-curbside/store-pickup-data.ts", "content": "import type { PickupOrder } from './store-pickup-types'\n\nexport const INITIAL_ORDERS: PickupOrder[] = [\n {\n id: 'order-1',\n orderNumber: 'BOPIS-84920',\n customerName: 'Elena Rostova',\n customerPhone: '(415) 555-0192',\n customerInitials: 'ER',\n pickupMode: 'curbside',\n spotNumber: 4,\n vehicleDetails: {\n makeModel: 'Silver Tesla Model 3',\n plate: '7XYZ892',\n hazardsFlashing: true,\n },\n status: 'arrived',\n statusLabel: 'Customer Arrived · Waiting 2m',\n waitMinutes: 2,\n stagingLocation: {\n zone: 'Aisle 02',\n bin: 'Bin B-14',\n type: 'shelf',\n },\n items: [\n {\n id: 'item-1',\n name: 'Studio Pro Wireless Headphones',\n sku: 'AUD-902-BLK',\n quantity: 1,\n price: 249.0,\n staged: true,\n category: 'Audio',\n },\n {\n id: 'item-2',\n name: 'Carbon Runner Wind Jacket',\n sku: 'APP-410-MED',\n quantity: 1,\n price: 100.0,\n staged: true,\n category: 'Apparel',\n },\n ],\n orderTotal: 349.0,\n placedAt: '11:20 AM',\n readyAt: '11:35 AM',\n arrivedAt: '11:42 AM',\n verificationCode: '4920',\n assignedRunner: 'Jordan Miller',\n },\n {\n id: 'order-2',\n orderNumber: 'BOPIS-84919',\n customerName: 'David Chen',\n customerPhone: '(415) 555-0841',\n customerInitials: 'DC',\n pickupMode: 'curbside',\n spotNumber: 2,\n vehicleDetails: {\n makeModel: 'Midnight Blue Rivian R1T',\n plate: '8ABC104',\n hazardsFlashing: true,\n },\n status: 'arrived',\n statusLabel: 'Customer Arrived · Waiting 4m',\n waitMinutes: 4,\n stagingLocation: {\n zone: 'Aisle 01',\n bin: 'Bin A-08',\n type: 'bulky',\n },\n items: [\n {\n id: 'item-3',\n name: '4K Ultra HD Smart Monitor 27\"',\n sku: 'DIS-270-4K',\n quantity: 1,\n price: 380.0,\n staged: true,\n category: 'Displays',\n },\n {\n id: 'item-4',\n name: 'Ergonomic Desk Stand',\n sku: 'ACC-110-SLV',\n quantity: 1,\n price: 110.0,\n staged: true,\n category: 'Accessories',\n },\n {\n id: 'item-5',\n name: '100W USB-C Thunderbolt Dock',\n sku: 'DOK-090-BLK',\n quantity: 1,\n price: 90.0,\n staged: true,\n category: 'Power',\n },\n ],\n orderTotal: 580.0,\n placedAt: '10:45 AM',\n readyAt: '11:10 AM',\n arrivedAt: '11:40 AM',\n verificationCode: '8419',\n assignedRunner: 'Marcus Lee',\n },\n {\n id: 'order-3',\n orderNumber: 'BOPIS-84918',\n customerName: 'Marcus Vance',\n customerPhone: '(415) 555-0329',\n customerInitials: 'MV',\n pickupMode: 'in_store',\n pickupDeskBay: 'Pickup Desk Bay 01',\n status: 'en_route',\n statusLabel: 'En Route · 6 min ETA',\n etaMinutes: 6,\n distanceMiles: 1.4,\n stagingLocation: {\n zone: 'Locker #12',\n bin: 'Bin L-12',\n lockerPin: '8491',\n type: 'locker',\n },\n items: [\n {\n id: 'item-6',\n name: 'Pro Max Mirrorless Camera Kit',\n sku: 'CAM-800-PRO',\n quantity: 1,\n price: 1299.0,\n staged: true,\n category: 'Photography',\n },\n ],\n orderTotal: 1299.0,\n placedAt: '11:05 AM',\n readyAt: '11:28 AM',\n verificationCode: '9182',\n assignedRunner: 'Staging Auto-Lock',\n },\n {\n id: 'order-4',\n orderNumber: 'BOPIS-84917',\n customerName: 'Aisha Patel',\n customerPhone: '(415) 555-0782',\n customerInitials: 'AP',\n pickupMode: 'in_store',\n pickupDeskBay: 'Pickup Desk Bay 03',\n status: 'ready_staging',\n statusLabel: 'Ready in Staging Locker #04',\n stagingLocation: {\n zone: 'Aisle 03',\n bin: 'Bin C-02',\n lockerPin: '3719',\n type: 'locker',\n },\n items: [\n {\n id: 'item-7',\n name: 'Organic Single-Origin Espresso Blend',\n sku: 'COF-012-ESP',\n quantity: 2,\n price: 38.0,\n staged: true,\n category: 'Beverage',\n },\n {\n id: 'item-8',\n name: 'Precision Gooseneck Pour-Over Kettle',\n sku: 'KET-044-SS',\n quantity: 1,\n price: 74.5,\n staged: true,\n category: 'Kitchen',\n },\n {\n id: 'item-9',\n name: 'Digital Barista Gram Scale',\n sku: 'SCL-019-DIG',\n quantity: 1,\n price: 30.0,\n staged: true,\n category: 'Kitchen',\n },\n ],\n orderTotal: 142.5,\n placedAt: '10:15 AM',\n readyAt: '10:50 AM',\n verificationCode: '1742',\n assignedRunner: 'Desk Associate',\n },\n {\n id: 'order-5',\n orderNumber: 'BOPIS-84916',\n customerName: 'Sarah Jenkins',\n customerPhone: '(415) 555-0453',\n customerInitials: 'SJ',\n pickupMode: 'curbside',\n spotNumber: 1,\n vehicleDetails: {\n makeModel: 'White Toyota RAV4',\n plate: '6MNO451',\n hazardsFlashing: false,\n },\n status: 'en_route',\n statusLabel: 'En Route · 12 min ETA',\n etaMinutes: 12,\n distanceMiles: 3.8,\n stagingLocation: {\n zone: 'Aisle 02',\n bin: 'Bin B-03',\n type: 'shelf',\n },\n items: [\n {\n id: 'item-10',\n name: 'Ultra Hydration 20L Trail Backpack',\n sku: 'OUT-220-BLU',\n quantity: 1,\n price: 130.0,\n staged: true,\n category: 'Outdoors',\n },\n {\n id: 'item-11',\n name: 'Carbon Composite Trekking Poles (Pair)',\n sku: 'OUT-771-CAR',\n quantity: 1,\n price: 80.0,\n staged: true,\n category: 'Outdoors',\n },\n ],\n orderTotal: 210.0,\n placedAt: '11:15 AM',\n readyAt: '11:38 AM',\n verificationCode: '9160',\n assignedRunner: 'Unassigned',\n },\n]\n", "type": "registry:block", "target": "~/components/blocks/store-pickup-data.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/table.json" ], "description": "Buy Online Pick Up in Store (BOPIS) & curbside pickup coordination board with customer arrival parking check-in, real-time staging bin tracking, runner fulfillment dispatch, and SLA monitoring.", "categories": [ "commerce", "app", "ecommerce", "logistics" ] }