{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "store-pickup-curbside", "title": "Store Pickup Curbside", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/store-pickup-curbside/store-pickup-curbside.component.ts", "content": "import { Component, DestroyRef, Input, OnInit, computed, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Bell,\n Car,\n Check,\n CheckCircle2,\n Clock,\n Eye,\n Layers,\n LucideAngularModule,\n MapPin,\n MessageSquare,\n MoreHorizontal,\n Navigation,\n Package,\n PackageCheck,\n Phone,\n Plus,\n RefreshCw,\n Search,\n Store,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiOrderDetailDialogComponent } from './order-detail-dialog.component'\nimport { UiStorePickupModalsComponent } from './store-pickup-modals.component'\nimport { INITIAL_ORDERS } from './store-pickup-data'\nimport type {\n ConfirmArrivalPayload,\n CreateOrderPayload,\n NotifyChannel,\n OrderItem,\n OrderStatus,\n PickupMode,\n PickupModeFilter,\n PickupOrder,\n PickupStatusFilter,\n StorePickupCurbsideProps,\n} from './store-pickup-types'\n\nexport type {\n ConfirmArrivalPayload,\n CreateOrderPayload,\n NotifyChannel,\n OrderItem,\n OrderStatus,\n PickupMode,\n PickupModeFilter,\n PickupOrder,\n PickupStatusFilter,\n StorePickupCurbsideProps,\n}\n\n/**\n * Buy Online Pick Up in Store (BOPIS) & curbside pickup coordination board (React\n * `StorePickupCurbside` 1:1): fulfillment health cards, a searchable / filterable active\n * pickup orders table with per-row fulfillment actions, the order detail dialog and the\n * check-in / notify / new-order dialogs, plus an inline feedback toast.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-store-pickup-curbside, [ui-store-pickup-curbside]',\n standalone: true,\n // React renders the root
itself: keep this wrapper out of the layout.\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiOrderDetailDialogComponent,\n UiStorePickupModalsComponent,\n ],\n template: `\n
\n \n @if (actionFeedbackToast(); as toast) {\n \n
\n \n {{ toast }}\n
\n \n \n \n
\n }\n\n \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 \n \n Customer \"I'm Here\" Check-In\n \n\n \n
\n
\n\n \n
\n \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 100% Pick Accuracy\n
\n
\n
\n\n \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 \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 Fastest: 52s\n
\n
\n
\n\n \n
\n
\n

\n Today's Pickups\n

\n
\n \n
\n
\n
\n
{{ completedCount() }} Orders
\n
\n $5,240 Fulfilled Volume\n 97.2% On-Time SLA\n
\n
\n
\n
\n\n \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 Refresh\n \n
\n
\n\n \n
\n
\n \n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n\n
\n
\n Mode:\n \n \n \n All Modes\n Curbside Bay\n In-Store Desk\n \n \n
\n\n
\n Status:\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 @for (order of filteredOrders(); track order.id) {\n \n \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 \n \n
\n
\n #{{ order.orderNumber }}\n (\\${{ order.orderTotal.toFixed(2) }})\n
\n \n {{ order.items.length }} {{ order.items.length === 1 ? 'item' : 'items' }}:\n {{ itemNames(order) }}\n
\n
\n \n\n \n \n
\n @if (order.pickupMode === 'curbside') {\n \n \n Curbside Spot #{{ order.spotNumber }}\n \n @if (order.vehicleDetails; as vehicle) {\n
\n {{ vehicle.makeModel }}\n · {{ vehicle.plate }}\n
\n }\n } @else {\n \n \n In-Store Desk\n \n
\n {{ order.pickupDeskBay || 'Front Pickup Counter' }}\n
\n }\n
\n \n\n \n \n
\n @switch (order.status) {\n @case ('arrived') {\n \n \n \n Customer Arrived · Waiting {{ order.waitMinutes || 2 }}m\n \n
\n Check-in: {{ order.arrivedAt || '11:40 AM' }}\n @if (order.vehicleDetails?.hazardsFlashing) {\n · Hazards On\n }\n
\n }\n @case ('en_route') {\n \n \n En Route · {{ order.etaMinutes }} min ETA\n \n
\n {{ order.distanceMiles }} miles away\n
\n }\n @case ('ready_staging') {\n \n \n Ready in Staging\n \n
Staged at {{ order.readyAt }}
\n }\n @default {\n \n \n Delivered\n \n
Completed Handoff
\n }\n }\n
\n \n\n \n \n
\n
\n \n {{ order.stagingLocation.zone }}\n {{ order.stagingLocation.bin }}\n
\n @if (order.stagingLocation.lockerPin) {\n
\n PIN Code:\n {{ order.stagingLocation.lockerPin }}\n
\n } @else {\n
\n Type: {{ order.stagingLocation.type }} staging\n
\n }\n
\n \n\n \n \n
\n @if (order.status === 'arrived') {\n \n \n Mark Delivered\n \n } @else if (order.status !== 'completed') {\n \n \n Notify\n \n } @else {\n \n }\n\n \n \n \n Actions\n \n \n Order #{{ order.orderNumber }}\n \n \n \n Inspect Order Details\n \n \n \n Send SMS / Push Alert\n \n \n @if (order.status !== 'completed') {\n \n \n Complete Handoff\n \n }\n \n \n
\n \n \n }\n\n @if (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\n \n \n \n\n \n \n `,\n})\nexport class UiStorePickupCurbsideComponent implements OnInit {\n @Input() storeName = 'Pasadena Flagship Store #02'\n @Input() storeCode = 'STORE-CA-02'\n @Input() initialModeFilter: PickupModeFilter = 'all'\n @Input('class') className?: string\n\n readonly orders = signal(INITIAL_ORDERS)\n readonly searchQuery = signal('')\n readonly selectedModeFilter = signal('all')\n readonly selectedStatusFilter = signal('all')\n\n // Modals\n readonly checkInModalOpen = signal(false)\n readonly inspectModalOpen = signal(false)\n readonly notifyModalOpen = signal(false)\n readonly newOrderModalOpen = signal(false)\n readonly selectedOrder = signal(null)\n readonly actionFeedbackToast = signal(null)\n\n // KPI calculations\n readonly readyInStagingCount = computed(() => this.orders().filter((o) => o.status !== 'completed').length)\n readonly arrivedCustomersCount = computed(() => this.orders().filter((o) => o.status === 'arrived').length)\n readonly enRouteCount = computed(() => this.orders().filter((o) => o.status === 'en_route').length)\n readonly completedCount = computed(() => this.orders().filter((o) => o.status === 'completed').length + 32)\n\n // Filtered orders list\n readonly filteredOrders = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n const mode = this.selectedModeFilter()\n const status = this.selectedStatusFilter()\n return this.orders().filter((order) => {\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 = mode === 'all' || order.pickupMode === mode\n const matchesStatus = status === 'all' || order.status === status\n\n return matchesSearch && matchesMode && matchesStatus\n })\n })\n\n protected readonly Bell = Bell\n protected readonly Car = Car\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Eye = Eye\n protected readonly Layers = Layers\n protected readonly MapPin = MapPin\n protected readonly MessageSquare = MessageSquare\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Navigation = Navigation\n protected readonly Package = Package\n protected readonly PackageCheck = PackageCheck\n protected readonly Phone = Phone\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly Search = Search\n protected readonly Store = Store\n protected readonly X = X\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n ngOnInit(): void {\n // React: useState(initialModeFilter) -- the prop only seeds the filter.\n this.selectedModeFilter.set(this.initialModeFilter)\n }\n\n protected get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n protected rowClass(order: PickupOrder): string {\n return cn('transition-colors duration-150', order.status === 'arrived' && 'bg-warning/[0.04] bg-warning/[0.08]')\n }\n\n protected itemsTitle(order: PickupOrder): string {\n return order.items.map((i) => `${i.quantity}x ${i.name}`).join(', ')\n }\n\n protected itemNames(order: PickupOrder): string {\n return order.items.map((i) => i.name).join(', ')\n }\n\n protected setModeFilter(value: string): void {\n if (value === 'all' || value === 'curbside' || value === 'in_store') this.selectedModeFilter.set(value)\n }\n\n protected setStatusFilter(value: string): void {\n if (\n value === 'all' ||\n value === 'arrived' ||\n value === 'en_route' ||\n value === 'ready_staging' ||\n value === 'completed'\n )\n this.selectedStatusFilter.set(value)\n }\n\n /** Toast feedback helper: shows `msg` for 3.5s unless a newer message replaced it. */\n triggerToast(msg: string): void {\n this.actionFeedbackToast.set(msg)\n const t = setTimeout(() => {\n this.timers.delete(t)\n if (this.actionFeedbackToast() === msg) this.actionFeedbackToast.set(null)\n }, 3500)\n this.timers.add(t)\n }\n\n handleInspect(order: PickupOrder): void {\n this.selectedOrder.set(order)\n this.inspectModalOpen.set(true)\n }\n\n handleNotify(order: PickupOrder): void {\n this.selectedOrder.set(order)\n this.notifyModalOpen.set(true)\n }\n\n handleSendNotification(channel: NotifyChannel): void {\n const selected = this.selectedOrder()\n if (!selected) return\n this.notifyModalOpen.set(false)\n this.triggerToast(`Sent arrival notification to ${selected.customerName} via ${channel.toUpperCase()}`)\n }\n\n handleMarkDelivered(orderId: string): void {\n const target = this.orders().find((o) => o.id === orderId)\n this.orders.update((prev) =>\n prev.map((o) => (o.id === orderId ? { ...o, status: 'completed', statusLabel: 'Delivered & Handed Over' } : o)),\n )\n if (target) this.triggerToast(`Order #${target.orderNumber} successfully delivered to ${target.customerName}!`)\n this.inspectModalOpen.set(false)\n }\n\n handleConfirmArrival(payload: ConfirmArrivalPayload): void {\n const target = this.orders().find((o) => o.id === payload.orderId)\n if (!target) return\n this.orders.update((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 this.checkInModalOpen.set(false)\n this.triggerToast(`Customer ${target.customerName} checked into Spot #${payload.spot}! Runner alerted.`)\n }\n\n handleCreateNewOrder(payload: CreateOrderPayload): void {\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 this.orders.update((prev) => [newOrder, ...prev])\n this.newOrderModalOpen.set(false)\n this.triggerToast(`New Order #${newOrder.orderNumber} staged in ${newOrder.stagingLocation.bin}!`)\n }\n\n handleRefresh(): void {\n this.triggerToast('Refreshed pickup staging queue & curbside telemetry')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/store-pickup-curbside/store-pickup-curbside.component.ts" }, { "path": "packages/registry-angular/blocks/store-pickup-curbside/order-detail-dialog.component.ts", "content": "import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core'\nimport { Car, Check, CheckCircle2, Layers, LucideAngularModule } from 'lucide-angular'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport type { OrderItem, PickupOrder } from './store-pickup-types'\n\n/**\n * \"Inspect Order Details\" dialog of the store-pickup-curbside block (React `OrderDetailDialog`):\n * customer + verification PIN strip, staging bin and vehicle / bay cards, the staged items\n * checklist, and a \"Mark Delivered & Close\" action for orders not yet handed over.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-order-detail-dialog, [ui-order-detail-dialog]',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n ],\n template: `\n \n \n @if (selectedOrder; as order) {\n
\n
\n
\n
\n

Order #{{ order.orderNumber }}

\n \n {{ order.pickupMode === 'curbside' ? 'Curbside Bay #' + order.spotNumber : 'In-Store Desk' }}\n \n
\n

\n Placed at {{ order.placedAt }} · Staged at {{ order.readyAt }}\n

\n
\n
\n
\n\n
\n \n
\n
\n \n {{ order.customerInitials }}\n \n
\n
{{ order.customerName }}
\n
{{ order.customerPhone }}
\n
\n
\n
\n
Pickup Verification PIN
\n
\n {{ order.verificationCode }}\n
\n
\n
\n\n \n
\n
\n
\n \n Staging Bin Location\n
\n
\n {{ order.stagingLocation.zone }} ·\n {{ order.stagingLocation.bin }}\n
\n
\n {{ order.stagingLocation.type }} unit storage\n
\n
\n\n
\n
\n \n Vehicle & Bay\n
\n @if (order.pickupMode === 'curbside' && order.vehicleDetails) {\n
\n Spot #{{ order.spotNumber }} · {{ order.vehicleDetails.makeModel }}\n
\n
Plate: {{ order.vehicleDetails.plate }}
\n } @else {\n
{{ order.pickupDeskBay || 'Pickup Counter' }}
\n
\n Locker PIN: {{ order.stagingLocation.lockerPin || 'N/A' }}\n
\n }\n
\n
\n\n \n
\n
\n Order Items Checklist ({{ order.items.length }} items)\n Total: \\${{ order.orderTotal.toFixed(2) }}\n
\n
\n @for (item of order.items; track item.id) {\n
\n
\n \n
\n
{{ item.name }}
\n
\n SKU: {{ item.sku }} · Qty: {{ item.quantity }}\n
\n
\n
\n
\\${{ lineTotal(item) }}
\n
\n }\n
\n
\n
\n\n
\n \n @if (order.status !== 'completed') {\n \n \n Mark Delivered & Close\n \n }\n
\n }\n \n \n `,\n})\nexport class UiOrderDetailDialogComponent {\n @Input() open = false\n @Input() selectedOrder: PickupOrder | null = null\n @Output() openChange = new EventEmitter()\n @Output() markDelivered = new EventEmitter()\n\n protected readonly Car = Car\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Layers = Layers\n\n protected lineTotal(item: OrderItem): string {\n return (item.price * item.quantity).toFixed(2)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/store-pickup-curbside/order-detail-dialog.component.ts" }, { "path": "packages/registry-angular/blocks/store-pickup-curbside/store-pickup-modals.component.ts", "content": "import {\n Component,\n DestroyRef,\n EventEmitter,\n Input,\n Output,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { Bell, Car, CheckCircle2, LucideAngularModule, MessageSquare, Send } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiDialogCloseComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport type {\n ConfirmArrivalPayload,\n CreateOrderPayload,\n NotifyChannel,\n PickupMode,\n PickupOrder,\n} from './store-pickup-types'\n\n/**\n * The store-pickup-curbside action dialogs (React `StorePickupModals`): the customer\n * \"I'm Here\" parking check-in, the notify-customer (SMS / push) dialog and the\n * stage-new-pickup-order form. Each dialog keeps its own form state; the parent owns the\n * open flags and applies the emitted payloads to the order list.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-store-pickup-modals, [ui-store-pickup-modals]',\n standalone: true,\n host: { class: 'contents' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiDialogCloseComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n ],\n template: `\n \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 \n
\n \n \n \n \n @for (o of activeOrders(); track o.id) {\n \n {{ o.customerName }} · #{{ o.orderNumber }} ({{ o.items.length }} items)\n \n }\n \n \n
\n\n \n
\n \n
\n @for (spot of spots; track spot) {\n \n }\n
\n
\n\n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n \n
\n \n \n
\n\n \n
\n \n \n
\n
\n\n
\n \n \n \n Confirm Arrival & Alert Runner\n \n
\n \n \n\n \n \n \n @if (selectedOrder; as order) {\n
\n

Notify Customer

\n

\n Send real-time pickup status alert to {{ order.customerName }} ({{ order.customerPhone }}).\n

\n
\n\n
\n
\n \n
\n \n \n
\n
\n\n
\n
\n Message Preview\n 160 chars\n
\n

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

\n
\n
\n }\n\n
\n \n \n \n {{ notifyMessageSent() ? 'Notification Sent!' : 'Send Alert' }}\n \n
\n \n \n\n \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 \n
\n
\n \n \n
\n
\n\n
\n
\n \n \n \n \n Curbside Bay\n In-Store Desk\n \n \n
\n
\n \n \n \n \n @for (spot of spots; track spot) {\n Bay #{{ spot }}\n }\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n \n
\n\n
\n \n \n
\n
\n\n
\n \n \n
\n \n \n `,\n})\nexport class UiStorePickupModalsComponent {\n @Input() checkInModalOpen = false\n @Output() checkInModalOpenChange = new EventEmitter()\n @Input() notifyModalOpen = false\n @Output() notifyModalOpenChange = new EventEmitter()\n @Input() newOrderModalOpen = false\n @Output() newOrderModalOpenChange = new EventEmitter()\n @Input()\n set orders(value: PickupOrder[]) {\n this.activeOrders.set(value.filter((x) => x.status !== 'completed'))\n }\n @Input() selectedOrder: PickupOrder | null = null\n @Input() storeName = ''\n @Output() confirmArrival = new EventEmitter()\n @Output() sendNotification = new EventEmitter()\n @Output() createOrder = new EventEmitter()\n\n protected readonly Bell = Bell\n protected readonly Car = Car\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly MessageSquare = MessageSquare\n protected readonly Send = Send\n\n protected readonly spots = ['1', '2', '3', '4', '5', '6']\n /** Orders offered in the check-in select (everything not yet handed over). */\n protected readonly activeOrders = signal([])\n\n // Check-in state\n readonly checkInOrderId = signal('order-3')\n readonly checkInSpot = signal('4')\n readonly checkInVehicleModel = signal('Silver Tesla Model 3')\n readonly checkInPlate = signal('7XYZ892')\n readonly checkInHazards = signal(true)\n readonly checkInNotes = signal('Parked in bay 4, trunk unlocked for contactless placement.')\n\n // Notify state\n readonly notifyChannel = signal('sms')\n readonly notifyMessageSent = signal(false)\n\n // New Order state\n readonly newCustomerName = signal('')\n readonly newCustomerPhone = signal('')\n readonly newPickupMode = signal('curbside')\n readonly newSpotNumber = signal('3')\n readonly newStagingAisle = signal('Aisle 01')\n readonly newStagingBin = signal('Bin A-12')\n readonly newItemSummary = signal('')\n readonly newOrderTotal = signal('120.00')\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n protected spotClass(spot: string): string {\n return cn(\n 'flex flex-col items-center justify-center rounded-md border py-2 text-xs font-semibold transition-colors duration-150',\n this.checkInSpot() === spot\n ? 'border-success bg-success/10 text-success ring-success/30 text-success ring-2'\n : 'border-border bg-card text-muted-foreground hover:border-foreground/20 hover:text-foreground',\n )\n }\n\n protected channelClass(channel: NotifyChannel): string {\n return cn(\n 'flex items-center justify-center gap-1.5 rounded-md border py-2 text-xs font-semibold transition-colors',\n this.notifyChannel() === channel\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border bg-card text-muted-foreground',\n )\n }\n\n protected onHazardsChange(event: Event): void {\n this.checkInHazards.set((event.target as HTMLInputElement).checked)\n }\n\n protected setNewPickupMode(value: string): void {\n if (value === 'curbside' || value === 'in_store') this.newPickupMode.set(value)\n }\n\n handleCheckInSubmit(): void {\n this.confirmArrival.emit({\n orderId: this.checkInOrderId(),\n spot: this.checkInSpot(),\n vehicleModel: this.checkInVehicleModel(),\n plate: this.checkInPlate(),\n hazards: this.checkInHazards(),\n notes: this.checkInNotes(),\n })\n }\n\n handleSendNotification(): void {\n if (!this.selectedOrder) return\n this.notifyMessageSent.set(true)\n const channel = this.notifyChannel()\n const t = setTimeout(() => {\n this.timers.delete(t)\n this.sendNotification.emit(channel)\n this.notifyMessageSent.set(false)\n }, 1000)\n this.timers.add(t)\n }\n\n handleCreateOrder(): void {\n if (!this.newCustomerName()) return\n this.createOrder.emit({\n customerName: this.newCustomerName(),\n customerPhone: this.newCustomerPhone(),\n pickupMode: this.newPickupMode(),\n spotNumber: this.newSpotNumber(),\n stagingAisle: this.newStagingAisle(),\n stagingBin: this.newStagingBin(),\n itemSummary: this.newItemSummary(),\n orderTotal: this.newOrderTotal(),\n })\n this.newCustomerName.set('')\n this.newCustomerPhone.set('')\n this.newItemSummary.set('')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/store-pickup-curbside/store-pickup-modals.component.ts" }, { "path": "packages/registry-angular/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 type PickupModeFilter = 'all' | 'curbside' | 'in_store'\nexport type PickupStatusFilter = 'all' | 'arrived' | 'en_route' | 'ready_staging' | 'completed'\nexport type NotifyChannel = 'sms' | 'push'\n\n/** Inputs of `ui-store-pickup-curbside` (React `StorePickupCurbsideProps`). */\nexport interface StorePickupCurbsideProps {\n storeName?: string\n storeCode?: string\n initialModeFilter?: PickupModeFilter\n class?: string\n}\n\n/** Emitted by the check-in dialog's \"Confirm Arrival & Alert Runner\". */\nexport interface ConfirmArrivalPayload {\n orderId: string\n spot: string\n vehicleModel: string\n plate: string\n hazards: boolean\n notes: string\n}\n\n/** Emitted by the new-order dialog's \"Stage & Assign Bin\". */\nexport interface CreateOrderPayload {\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", "type": "registry:block", "target": "~/src/app/components/blocks/store-pickup-curbside/store-pickup-types.ts" }, { "path": "packages/registry-angular/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": "~/src/app/components/blocks/store-pickup-curbside/store-pickup-data.ts" }, { "path": "packages/registry-angular/blocks/store-pickup-curbside/index.ts", "content": "export {\n UiStorePickupCurbsideComponent,\n type ConfirmArrivalPayload,\n type CreateOrderPayload,\n type NotifyChannel,\n type OrderItem,\n type OrderStatus,\n type PickupMode,\n type PickupModeFilter,\n type PickupOrder,\n type PickupStatusFilter,\n type StorePickupCurbsideProps,\n} from './store-pickup-curbside.component'\nexport { UiOrderDetailDialogComponent } from './order-detail-dialog.component'\nexport { UiStorePickupModalsComponent } from './store-pickup-modals.component'\nexport { INITIAL_ORDERS } from './store-pickup-data'\n", "type": "registry:block", "target": "~/src/app/components/blocks/store-pickup-curbside/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/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" ] }