{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "price-drop-alert-card", "title": "Price Drop Alert Card", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/price-drop-alert-card/price-drop-alert-card.component.ts", "content": "import { Component, Input, OnDestroy, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n BellRing,\n Check,\n History,\n LucideAngularModule,\n Mail,\n RefreshCw,\n ShieldCheck,\n Smartphone,\n Tag,\n Trash2,\n TrendingDown,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\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 { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type PriceAlertChannel = 'email' | 'sms'\n\nexport interface TrackedProduct {\n id: string\n name: string\n variant: string\n category: string\n sku: string\n image: string\n currentPrice: number\n targetPrice: number\n lowest90d: number\n channel: PriceAlertChannel\n status: 'monitoring' | 'reached'\n active: boolean\n}\n\nconst initialTrackedProducts: TrackedProduct[] = [\n {\n id: 'prod-1',\n name: 'Pro Studio Wireless Headphones',\n variant: 'Space Black',\n category: 'Audio',\n sku: 'SKU-8842',\n image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&auto=format&fit=crop&q=80',\n currentPrice: 299.0,\n targetPrice: 280.0,\n lowest90d: 279.0,\n channel: 'email',\n status: 'monitoring',\n active: true,\n },\n {\n id: 'prod-2',\n name: 'Ergonomic Mechanical Keyboard',\n variant: 'RGB / Cherry MX Brown',\n category: 'Peripherals',\n sku: 'SKU-4109',\n image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=300&auto=format&fit=crop&q=80',\n currentPrice: 119.0,\n targetPrice: 120.0,\n lowest90d: 119.0,\n channel: 'sms',\n status: 'reached',\n active: true,\n },\n {\n id: 'prod-3',\n name: 'Ultra-Wide Curved Monitor 34\"',\n variant: 'WQHD 144Hz IPS',\n category: 'Displays',\n sku: 'SKU-9011',\n image: 'https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=300&auto=format&fit=crop&q=80',\n currentPrice: 679.0,\n targetPrice: 599.0,\n lowest90d: 629.0,\n channel: 'email',\n status: 'monitoring',\n active: true,\n },\n]\n\n/**\n * E-commerce wishlist price tracker: product hero, a 90-day price history SVG chart whose\n * amber threshold line follows the target slider, the alert configurator (delivery channel\n * radio, target price slider with quick presets, in-stock switch, confirmation banner) and\n * the active tracked items table. Angular port of the React `PriceDropAlertCard` block\n * (same markup, classes, copy and sample data).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-price-drop-alert-card, [ui-price-drop-alert-card]',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n host: {\n '[attr.data-slot]': '\"price-drop-alert-card\"',\n '[class]': 'hostClass',\n },\n template: `\n \n
\n
\n
\n

Price Drop Tracker

\n \n \n Live Sync\n \n
\n

\n Monitor historical market fluctuations, set custom discount thresholds, and receive real-time notifications.\n

\n
\n\n
\n \n \n {{ isRefreshing() ? 'Checking prices…' : 'Check All Prices' }}\n \n
\n
\n\n \n \n
\n \n
\n \n \n
\n \n Audio · SKU-8842\n \n
\n
\n \n Lowest in 90 Days\n \n
\n
\n
\n\n \n
\n
\n
\n Sony Acoustic Systems\n •\n Model WH-1000XM-Pro\n •\n \n ★ 4.8 (1,420 reviews)\n \n
\n\n

\n Pro Studio Wireless Headphones - Space Black\n

\n\n

\n Flagship hybrid active noise cancelling with beryllium dynamic drivers, 38-hour battery longevity,\n lossless LDAC codec support, and ultra-plush memory foam acoustic isolation cushions.\n

\n
\n\n \n
\n
\n
\n \n \\${{ currentPrice.toFixed(2) }}\n \n \n \\${{ msrpPrice.toFixed(2) }}\n \n
\n\n
\n \n \n Save $50.00 (-14.3%)\n \n\n \n \n 90-Day Low:\n \\${{ lowest90dPrice.toFixed(2) }}\n \n
\n
\n\n \n \n In Stock (14 left)\n \n •\n \n 30-Day Price Match Guarantee\n \n •\n Free 2-Day Priority Delivery\n
\n
\n \n \n \n\n \n \n \n
\n
\n \n \n 90-Day Price History & Target Threshold\n \n \n Retail price trajectory from May through August with real-time target price alert line.\n \n
\n\n \n
\n
\n High: \n $349.00\n
\n
\n Avg: \n $324.50\n
\n
\n 90d Low: \n $279.00\n
\n
\n
\n \n\n \n
\n \n \n \n \n \n \n \n\n \n \n \n $360\n \n\n \n \n $320\n \n\n \n \n $280\n \n\n \n \n $240\n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n Alert: \\${{ targetPrice().toFixed(0) }}.00\n \n \n\n \n \n \n \n\n \n \n \n \n 90d Low · $279\n \n\n \n\n \n \n \n \n Now · $299.00\n \n\n \n May 22\n Jun 15\n Jul 05\n Jul 26\n Aug 10\n \n Today\n \n \n
\n\n
\n
\n \n Amber dashed threshold line updates automatically as you move the target slider below.\n
\n Updated 4m ago\n
\n \n \n\n \n \n \n \n \n Configure Price Drop Alert\n \n \n Set your notification channel and custom trigger price. We check pricing every 15 minutes across verified\n retailers.\n \n \n\n \n \n
\n \n \n \n\n \n \n
\n\n \n\n \n
\n
\n
\n \n

\n Trigger an alert when the item price drops to or below this amount.\n

\n
\n\n \n
\n
\n Target:\n \n \\${{ targetPrice().toFixed(2) }}\n \n
\n
\n
\n\n \n
\n \n\n \n
\n $200.00 (Deep Deal)\n Target: \\${{ targetPrice().toFixed(2) }}\n $349.00 (MSRP)\n
\n
\n\n \n \n
\n \n
\n @if (targetPrice() < currentPrice) {\n Notify when price drops below \n \\${{ targetPrice().toFixed(2) }}\n — saves an extra \n \\${{ additionalSavings().toFixed(2) }}\n ({{ additionalSavingsPercent() }}% additional drop)\n } @else if (targetPrice() === currentPrice) {\n Matches current price \n \\${{ currentPrice.toFixed(2) }}\n — triggers on any new price movement\n } @else {\n \n Target is set above current price (\\${{ currentPrice.toFixed(2) }}). Alert triggers immediately.\n \n }\n
\n
\n\n \n
\n \n $289 (-$10)\n \n \n $279 (Low)\n \n \n $249 (-$50)\n \n
\n
\n \n\n \n\n \n \n
\n
\n \n \n
\n

\n Send instant high-priority alert if available stock falls below 5 units or if a limited lightning coupon\n goes live.\n

\n
\n\n \n \n\n \n @if (alertSaved()) {\n
\n
\n \n
\n
\n

\n Price Drop Alert Configured Successfully!\n

\n

\n We'll monitor Pro Studio Wireless Headphones every 15 minutes and\n dispatch an alert to\n {{ alertDestination() }}\n the moment the price reaches\n \\${{ targetPrice().toFixed(2) }} or lower.\n

\n
\n
\n }\n \n\n \n
\n \n Zero spam guarantee. You can pause or cancel alert subscriptions anytime.\n
\n\n \n \n \n\n \n \n \n
\n
\n Active Tracked Wishlist Items\n \n Real-time monitoring list currently linked to your notification profile.\n \n
\n \n {{ trackedProducts().length }} items active\n \n
\n \n\n \n
\n
\n \n \n Product\n Current Price\n Target Alert\n 90-Day Low\n Channel\n Status\n Actions\n \n \n \n @for (item of trackedProducts(); track item.id) {\n \n \n \n
\n \n
\n

\n {{ item.name }}\n

\n

\n {{ item.variant }} · {{ item.sku }}\n

\n
\n
\n \n\n \n \n \\${{ item.currentPrice.toFixed(2) }}\n \n\n \n \n \\${{ item.targetPrice.toFixed(2) }}\n \n\n \n \n \\${{ item.lowest90d.toFixed(2) }}\n \n\n \n \n \n @if (item.channel === 'email') {\n \n } @else {\n \n }\n {{ item.channel }}\n \n \n\n \n \n @if (item.status === 'reached') {\n \n Target Reached!\n \n } @else {\n \n Monitoring (-\\${{\n (item.currentPrice - item.targetPrice).toFixed(0)\n }})\n \n }\n \n\n \n \n
\n \n \n \n
\n \n \n }\n \n
\n
\n \n \n `,\n})\nexport class UiPriceDropAlertCardComponent implements OnDestroy {\n @Input('class') className?: string\n\n protected readonly cn = cn\n\n protected readonly BellRing = BellRing\n protected readonly Check = Check\n protected readonly History = History\n protected readonly Mail = Mail\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Smartphone = Smartphone\n protected readonly Tag = Tag\n protected readonly Trash2 = Trash2\n protected readonly TrendingDown = TrendingDown\n protected readonly Zap = Zap\n\n readonly currentPrice = 299.0\n readonly msrpPrice = 349.0\n readonly lowest90dPrice = 279.0\n\n readonly alertMethod = signal('email')\n readonly targetPrice = signal(280)\n readonly inStockNotification = signal(true)\n readonly alertSaved = signal(false)\n readonly isRefreshing = signal(false)\n readonly trackedProducts = signal(initialTrackedProducts.map((p) => ({ ...p })))\n\n // Dynamic savings calculations\n readonly additionalSavings = computed(() => Math.max(0, this.currentPrice - this.targetPrice()))\n readonly additionalSavingsPercent = computed(() =>\n this.currentPrice > 0 ? ((this.additionalSavings() / this.currentPrice) * 100).toFixed(1) : '0.0',\n )\n\n // Dynamic SVG Chart Target Line Calculation\n // Y range: $240 (y=150) to $360 (y=20), height=130, span=120\n readonly targetY = computed(() => {\n const clampedTarget = Math.max(240, Math.min(360, this.targetPrice()))\n return 150 - ((clampedTarget - 240) / 120) * 130\n })\n readonly targetTransform = computed(() => `translate(565, ${this.targetY()})`)\n\n readonly alertDestination = computed(() =>\n this.alertMethod() === 'email' ? 'customer@example.com' : '+1 (555) 019-2834',\n )\n\n private refreshTimer: ReturnType | undefined\n\n get hostClass(): string {\n return cn('mx-auto block w-full max-w-5xl space-y-6', this.className)\n }\n\n methodClass(method: PriceAlertChannel): string {\n return cn(\n 'flex cursor-pointer items-center gap-3 rounded-lg border p-3.5 transition-colors',\n this.alertMethod() === method\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40',\n )\n }\n\n setAlertMethod(value: string): void {\n this.alertMethod.set(value === 'sms' ? 'sms' : 'email')\n }\n\n onSliderChange(value: number[]): void {\n const next = value[0]\n if (next !== undefined) this.targetPrice.set(next)\n }\n\n handleSetAlert(): void {\n this.alertSaved.set(true)\n }\n\n handlePresetClick(price: number): void {\n this.targetPrice.set(price)\n }\n\n handleRemoveProduct(id: string): void {\n this.trackedProducts.update((prev) => prev.filter((p) => p.id !== id))\n }\n\n triggerRefresh(): void {\n this.isRefreshing.set(true)\n clearTimeout(this.refreshTimer)\n this.refreshTimer = setTimeout(() => {\n this.isRefreshing.set(false)\n }, 600)\n }\n\n ngOnDestroy(): void {\n clearTimeout(this.refreshTimer)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/price-drop-alert-card/price-drop-alert-card.component.ts" }, { "path": "packages/registry-angular/blocks/price-drop-alert-card/index.ts", "content": "export {\n UiPriceDropAlertCardComponent,\n type PriceAlertChannel,\n type TrackedProduct,\n} from './price-drop-alert-card.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/price-drop-alert-card/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/radio-group.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/slider.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json" ], "description": "E-commerce wishlist price tracker with 90-day price history chart, dynamic target price threshold slider, multi-channel alert configurator, and active tracked items table.", "categories": [ "commerce", "ecommerce" ] }