{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "wholesale-b2b-quick-order", "title": "Wholesale B2b Quick Order", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/wholesale-b2b-quick-order/wholesale-b2b-quick-order.component.ts", "content": "import {\n Component,\n DestroyRef,\n EventEmitter,\n Input,\n type OnInit,\n Output,\n computed,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport {\n AlertCircle,\n Bookmark,\n Building2,\n CheckCircle2,\n Download,\n FileSpreadsheet,\n Layers,\n LucideAngularModule,\n Minus,\n Package,\n Plus,\n RefreshCw,\n Send,\n Trash2,\n TrendingDown,\n Truck,\n Upload,\n X,\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface WholesaleProduct {\n id: string\n sku: string\n name: string\n variant: string\n casePack: number\n msrpUnitPrice: number\n wholesaleUnitPrice: number\n cases: number\n availableCases: number\n image: string\n category: string\n}\n\nexport interface WholesaleOrderPayload {\n poNumber: string\n items: WholesaleProduct[]\n subtotal: number\n totalUnits: number\n totalCases: number\n savings: number\n}\n\nexport interface WholesalePasteFeedback {\n type: 'success' | 'error'\n message: string\n}\n\nexport const DEFAULT_WHOLESALE_PRODUCTS: WholesaleProduct[] = [\n {\n id: 'prod-1',\n sku: 'SKU-84920',\n name: 'Pro Studio Headphones',\n variant: 'Matte Black · Pro Series',\n casePack: 12,\n msrpUnitPrice: 299.0,\n wholesaleUnitPrice: 194.35,\n cases: 4,\n availableCases: 450,\n image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&auto=format&fit=crop&q=80',\n category: 'Audio & Acoustics',\n },\n {\n id: 'prod-2',\n sku: 'SKU-49102',\n name: 'Aero Minimalist Runner',\n variant: 'Arctic White · US 10-12 Assorted',\n casePack: 10,\n msrpUnitPrice: 140.0,\n wholesaleUnitPrice: 91.0,\n cases: 3,\n availableCases: 180,\n image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=300&auto=format&fit=crop&q=80',\n category: 'Footwear',\n },\n {\n id: 'prod-3',\n sku: 'SKU-77215',\n name: 'Technical Shell Parka',\n variant: 'Mineral Gray · Waterproof 3L',\n casePack: 8,\n msrpUnitPrice: 220.0,\n wholesaleUnitPrice: 143.0,\n cases: 2,\n availableCases: 95,\n image: 'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=300&auto=format&fit=crop&q=80',\n category: 'Outerwear',\n },\n {\n id: 'prod-4',\n sku: 'SKU-10934',\n name: 'Braided USB-C Cable',\n variant: 'Space Gray · 2m 240W EPR',\n casePack: 24,\n msrpUnitPrice: 25.0,\n wholesaleUnitPrice: 16.25,\n cases: 2,\n availableCases: 620,\n image: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=300&auto=format&fit=crop&q=80',\n category: 'Hardware & Cables',\n },\n {\n id: 'prod-5',\n sku: 'SKU-63821',\n name: 'Leather Cardholder',\n variant: 'Saddle Brown · Full-Grain Veg-Tan',\n casePack: 20,\n msrpUnitPrice: 50.0,\n wholesaleUnitPrice: 32.5,\n cases: 1,\n availableCases: 24,\n image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=300&auto=format&fit=crop&q=80',\n category: 'Leather Goods',\n },\n]\n\nconst currencyFormatter = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n})\nconst numberFormatter = new Intl.NumberFormat('en-US')\n\nconst clone = (items: WholesaleProduct[]): WholesaleProduct[] => items.map((p) => ({ ...p }))\n\nconst SAMPLE_CSV = `SKU-84920, 8\\nSKU-49102, 5\\nSKU-77215, 4\\nSKU-10934, 12\\nSKU-63821, 6`\n\n/**\n * Angular port of the React WholesaleB2bQuickOrder block: a B2B bulk order matrix with\n * tier pricing, case pack multipliers, a CSV SKU paste box and a sticky order summary.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-wholesale-b2b-quick-order, [ui-wholesale-b2b-quick-order]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"wholesale-b2b-quick-order\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTextareaComponent,\n ],\n template: `\n \n
\n
\n
\n
\n
\n
\n \n {{ accountName }}\n ·\n {{ accountTier }}\n
\n \n \n {{ tierDiscountPercent }}% Off MSRP Wholesale Tier\n \n
\n

\n Wholesale & B2B Bulk Order Matrix\n

\n

\n Build your purchase order by entering case quantities below or pasting bulk SKU manifests with automated\n case multipliers.\n

\n
\n\n \n
\n \n \n {{ showCsvBox() ? 'Hide CSV Paste' : 'Upload CSV Order' }}\n \n \n \n Save Order Template\n \n
\n
\n
\n\n
\n \n
\n
\n
PO Reference
\n
{{ poRef() }}
\n
\n
\n
Payment Terms
\n
\n \n {{ paymentTerms }}\n
\n
\n
\n
Freight Status
\n
\n {{ isFreeFreight ? 'Free Ground Freight' : '$250 Standard Freight' }}\n
\n
\n
\n
Volume Tier Status
\n
\n Tier 3 ({{ tierDiscountPercent }}% Margin)\n
\n
\n
\n\n \n
\n
\n
\n \n
\n Tier 4 Milestone ($50,000):\n {{\n nextTierRemaining() > 0\n ? 'Add ' + formatCurrency(nextTierRemaining()) + ' more to unlock 42% Tier 4 Enterprise Margin.'\n : 'Tier 4 Enterprise Margin (42%) Unlocked!'\n }}\n
\n
\n
\n {{ tierProgressPercent() }}% to Tier 4\n
\n
\n
\n
\n
\n
\n
\n \n\n \n @if (templateSaved()) {\n \n
\n \n Order matrix saved as your primary template. You can re-populate this draft at any time.\n
\n \n \n \n \n }\n\n \n @if (orderSubmitted()) {\n
\n
\n
\n \n
\n

Purchase Order {{ poRef() }} Submitted Successfully!

\n

\n Your bulk order of\n {{ totalCases() }} cases ({{ totalUnits() }} units)\n totaling {{ formatCurrency(grandTotal) }} has been queued for\n warehouse dispatch under {{ paymentTerms }}.\n

\n
\n
\n
\n \n \n Download PO PDF\n \n \n
\n
\n
\n }\n\n \n @if (showCsvBox()) {\n
\n
\n
\n
\n \n

Quick Paste SKU & Quantity Manifest

\n
\n \n \n \n
\n

\n Paste CSV rows with SKU identifier and case quantity (one item per line, e.g.\n SKU-84920, 10) to auto-populate matrix.\n

\n
\n\n
\n \n\n
\n
\n \n \n @if (csvPasteText()) {\n \n Clear Input\n \n }\n
\n
Supports comma, tab, and semicolon delimited lines
\n
\n\n \n @if (pasteFeedback(); as feedback) {\n \n @if (feedback.type === 'success') {\n \n } @else {\n \n }\n {{ feedback.message }}\n
\n }\n
\n \n }\n\n \n
\n
\n
\n
\n

Bulk SKU Order Matrix

\n

\n {{ products().length }} wholesale catalog items available with active case multipliers.\n

\n
\n
\n \n \n Reset Defaults\n \n \n \n Zero All\n \n
\n
\n
\n\n
\n
\n
\n \n \n Product & SKU Identifier\n Case Multiplier\n Unit Price\n Case Quantity\n Availability\n Line Total\n \n Actions\n \n \n \n \n @for (product of products(); track product.id) {\n 0 && 'bg-primary/5 dark:bg-primary/5')\"\n >\n \n \n
\n \n
\n
{{ product.name }}
\n
\n {{ product.sku }}\n ·\n {{ product.variant }}\n
\n
\n
\n \n\n \n \n
\n \n {{ product.casePack }} units / case\n
\n \n\n \n \n
\n
\n {{ formatCurrency(product.wholesaleUnitPrice)\n }} wholesale\n
\n
\n {{ formatCurrency(product.msrpUnitPrice) }} MSRP\n -{{ discountPercent(product) }}%\n
\n
\n \n\n \n \n
\n
\n \n \n \n \n = product.availableCases\"\n (click)=\"updateCases(product.id, 1)\"\n >\n \n \n
\n
\n {{ product.cases }} {{ product.cases === 1 ? 'case' : 'cases' }} =\n {{ product.cases * product.casePack }} units\n
\n
\n \n\n \n \n @if (product.availableCases > 50) {\n \n In Stock · {{ formatNumber(product.availableCases) }} cases\n \n } @else {\n \n Low Stock · {{ product.availableCases }} cases\n \n }\n \n\n \n \n
\n
\n {{ formatCurrency(product.cases * product.casePack * product.wholesaleUnitPrice) }}\n
\n @if (product.cases > 0) {\n
\n Save\n {{\n formatCurrency(\n product.cases * product.casePack * (product.msrpUnitPrice - product.wholesaleUnitPrice)\n )\n }}\n
\n } @else {\n
0 units
\n }\n
\n \n\n \n \n @if (product.cases > 0) {\n \n \n \n }\n \n \n }\n \n
\n
\n
\n
\n\n \n \n
\n \n
\n \n
\n
Total Units
\n
\n {{ formatNumber(totalUnits()) }} Units\n
\n
{{ totalCases() }} Cases ordered
\n
\n\n \n
\n
Wholesale Subtotal
\n
\n {{ formatCurrency(wholesaleSubtotal()) }}\n
\n
MSRP {{ formatCurrency(msrpTotal()) }}
\n
\n\n \n
\n
Tier Volume Savings
\n
\n -{{ formatCurrency(totalSavings()) }}\n
\n
{{ savingsPercent }}% Margin Savings
\n
\n\n \n
\n
Freight & Terms
\n
\n \n {{ isFreeFreight ? 'Free Freight (>$10k)' : '$250 Ground' }}\n
\n
{{ paymentTerms }}
\n
\n
\n\n \n
\n \n \n Export CSV\n \n\n \n @if (!isSubmitting()) {\n \n } @else {\n \n }\n {{ isSubmitting() ? 'Processing PO...' : 'Submit Wholesale Purchase Order' }}\n \n
\n
\n \n `,\n})\nexport class UiWholesaleB2bQuickOrderComponent implements OnInit {\n @Input() poNumber = 'PO-2026-8841B'\n @Input() accountName = 'Northwind Retailers'\n @Input() accountTier = 'Tier 3 Wholesale Partner'\n @Input() tierDiscountPercent = 35\n @Input() paymentTerms = 'Net 30 Invoicing'\n @Input() freeFreightThreshold = 10000\n @Input() initialProducts?: WholesaleProduct[]\n @Input('class') className?: string\n\n @Output() submitOrder = new EventEmitter()\n @Output() saveTemplate = new EventEmitter()\n @Output() exportCsv = new EventEmitter()\n\n protected readonly AlertCircle = AlertCircle\n protected readonly Bookmark = Bookmark\n protected readonly Building2 = Building2\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly Layers = Layers\n protected readonly Minus = Minus\n protected readonly Package = Package\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly Send = Send\n protected readonly Trash2 = Trash2\n protected readonly TrendingDown = TrendingDown\n protected readonly Truck = Truck\n protected readonly Upload = Upload\n protected readonly X = X\n protected readonly cn = cn\n\n readonly csvPlaceholder = SAMPLE_CSV\n\n readonly products = signal(clone(DEFAULT_WHOLESALE_PRODUCTS))\n readonly poRef = signal('PO-2026-8841B')\n readonly showCsvBox = signal(false)\n readonly csvPasteText = signal('')\n readonly pasteFeedback = signal(null)\n readonly templateSaved = signal(false)\n readonly orderSubmitted = signal(false)\n readonly isSubmitting = signal(false)\n\n private readonly timers = new Set>()\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n for (const t of this.timers) clearTimeout(t)\n this.timers.clear()\n })\n }\n\n /** React seeds its state once from the props; inputs are set by now. */\n ngOnInit(): void {\n this.products.set(clone(this.initialProducts ?? DEFAULT_WHOLESALE_PRODUCTS))\n this.poRef.set(this.poNumber)\n }\n\n get hostClass(): string {\n return cn('block bg-background text-foreground w-full space-y-6', this.className)\n }\n\n // Computations\n readonly totalCases = computed(() => this.products().reduce((acc, p) => acc + (Number(p.cases) || 0), 0))\n readonly totalUnits = computed(() => this.products().reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack, 0))\n readonly wholesaleSubtotal = computed(() =>\n this.products().reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.wholesaleUnitPrice, 0),\n )\n readonly msrpTotal = computed(() =>\n this.products().reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.msrpUnitPrice, 0),\n )\n readonly totalSavings = computed(() => Math.max(0, this.msrpTotal() - this.wholesaleSubtotal()))\n\n get savingsPercent(): number {\n if (this.msrpTotal() <= 0) return this.tierDiscountPercent\n return Math.round((this.totalSavings() / this.msrpTotal()) * 100)\n }\n\n get isFreeFreight(): boolean {\n return this.wholesaleSubtotal() >= this.freeFreightThreshold\n }\n\n get grandTotal(): number {\n return this.wholesaleSubtotal() + (this.isFreeFreight ? 0 : 250)\n }\n\n private readonly nextTierTarget = 50000\n readonly nextTierRemaining = computed(() => Math.max(0, this.nextTierTarget - this.wholesaleSubtotal()))\n readonly tierProgressPercent = computed(() =>\n Math.min(100, Math.round((this.wholesaleSubtotal() / this.nextTierTarget) * 100)),\n )\n\n formatCurrency(val: number): string {\n return currencyFormatter.format(val)\n }\n\n formatNumber(val: number): string {\n return numberFormatter.format(val)\n }\n\n discountPercent(p: WholesaleProduct): number {\n return Math.round(((p.msrpUnitPrice - p.wholesaleUnitPrice) / p.msrpUnitPrice) * 100)\n }\n\n // Actions\n updateCases(id: string, delta: number): void {\n this.products.update((prev) =>\n prev.map((p) => {\n if (p.id !== id) return p\n const current = Number(p.cases) || 0\n return { ...p, cases: Math.max(0, Math.min(p.availableCases, current + delta)) }\n }),\n )\n }\n\n setCases(id: string, val: string | number): void {\n this.products.update((prev) =>\n prev.map((p) => {\n if (p.id !== id) return p\n const parsed = parseInt(String(val), 10)\n return { ...p, cases: isNaN(parsed) || parsed < 0 ? 0 : Math.min(p.availableCases, parsed) }\n }),\n )\n }\n\n clearLine(id: string): void {\n this.products.update((prev) => prev.map((p) => (p.id === id ? { ...p, cases: 0 } : p)))\n }\n\n resetAllCases(): void {\n this.products.update((prev) => prev.map((p) => ({ ...p, cases: 0 })))\n this.pasteFeedback.set(null)\n }\n\n restoreDefaultCases(): void {\n this.products.set(clone(DEFAULT_WHOLESALE_PRODUCTS))\n this.pasteFeedback.set(null)\n }\n\n applyCsvPaste(): void {\n this.pasteFeedback.set(null)\n const text = this.csvPasteText()\n if (!text.trim()) {\n this.pasteFeedback.set({ type: 'error', message: 'Please paste SKU and case quantity rows to parse.' })\n return\n }\n\n let updatedCount = 0\n const unknownSkus: string[] = []\n const cloned = clone(this.products())\n for (const rawLine of text.split(/\\r?\\n/)) {\n const line = rawLine.trim()\n if (!line || line.startsWith('#') || line.toLowerCase().startsWith('sku')) continue\n\n const parts = line.split(/[,;\\t]+/).map((s) => s.trim())\n if (parts.length < 2) continue\n const skuQuery = parts[0]!.toUpperCase()\n const qty = parseInt(parts[1]!, 10)\n if (isNaN(qty)) continue\n\n const product = cloned.find((p) => p.sku.toUpperCase() === skuQuery || p.sku.toUpperCase().includes(skuQuery))\n if (product) {\n product.cases = Math.max(0, Math.min(product.availableCases, qty))\n updatedCount++\n } else {\n unknownSkus.push(parts[0]!)\n }\n }\n this.products.set(cloned)\n\n if (updatedCount > 0) {\n this.pasteFeedback.set({\n type: 'success',\n message: `Successfully updated ${updatedCount} SKU line items in bulk matrix.${\n unknownSkus.length > 0\n ? ` Note: ${unknownSkus.length} SKU(s) not found in catalog (${unknownSkus.slice(0, 3).join(', ')}).`\n : ''\n }`,\n })\n } else {\n this.pasteFeedback.set({\n type: 'error',\n message: 'No matching catalog SKUs found. Verify format: SKU-84920, 10',\n })\n }\n }\n\n loadSampleCsv(): void {\n this.csvPasteText.set(SAMPLE_CSV)\n const cloned = clone(this.products())\n for (const rawLine of SAMPLE_CSV.split(/\\r?\\n/)) {\n const parts = rawLine.split(/[,;\\t]+/).map((s) => s.trim())\n if (parts.length < 2) continue\n const skuQuery = parts[0]!.toUpperCase()\n const qty = parseInt(parts[1]!, 10)\n const product = cloned.find((p) => p.sku.toUpperCase() === skuQuery)\n if (product && !isNaN(qty)) product.cases = Math.max(0, Math.min(product.availableCases, qty))\n }\n this.products.set(cloned)\n this.pasteFeedback.set({\n type: 'success',\n message: 'Sample manifest loaded and applied to matrix (5 SKUs updated).',\n })\n }\n\n handleSaveTemplate(): void {\n this.templateSaved.set(true)\n this.saveTemplate.emit(this.products())\n this.later(() => this.templateSaved.set(false), 4000)\n }\n\n handleSubmitOrder(): void {\n if (this.totalCases() === 0) return\n this.isSubmitting.set(true)\n this.later(() => {\n this.isSubmitting.set(false)\n this.orderSubmitted.set(true)\n this.submitOrder.emit({\n poNumber: this.poRef(),\n items: this.products().filter((p) => p.cases > 0),\n subtotal: this.wholesaleSubtotal(),\n totalUnits: this.totalUnits(),\n totalCases: this.totalCases(),\n savings: this.totalSavings(),\n })\n }, 600)\n }\n\n handleExportCsv(): void {\n const products = this.products()\n this.exportCsv.emit(products)\n const header =\n 'SKU,Product Name,Variant,Case Pack Multiplier,Cases Ordered,Total Units,Wholesale Unit Price,Line Total\\n'\n const rows = products\n .filter((p) => p.cases > 0)\n .map(\n (p) =>\n `\"${p.sku}\",\"${p.name}\",\"${p.variant}\",${p.casePack},${p.cases},${p.cases * p.casePack},${p.wholesaleUnitPrice},${(p.cases * p.casePack * p.wholesaleUnitPrice).toFixed(2)}`,\n )\n .join('\\n')\n const csvContent = 'data:text/csv;charset=utf-8,' + encodeURIComponent(header + rows)\n const downloadLink = document.createElement('a')\n downloadLink.setAttribute('href', csvContent)\n downloadLink.setAttribute('download', `${this.poRef()}-order-matrix.csv`)\n document.body.appendChild(downloadLink)\n downloadLink.click()\n document.body.removeChild(downloadLink)\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timers.delete(t)\n fn()\n }, ms)\n this.timers.add(t)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/wholesale-b2b-quick-order/wholesale-b2b-quick-order.component.ts" }, { "path": "packages/registry-angular/blocks/wholesale-b2b-quick-order/index.ts", "content": "export {\n UiWholesaleB2bQuickOrderComponent,\n DEFAULT_WHOLESALE_PRODUCTS,\n type WholesaleOrderPayload,\n type WholesalePasteFeedback,\n type WholesaleProduct,\n} from './wholesale-b2b-quick-order.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/wholesale-b2b-quick-order/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/input.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.", "categories": [ "commerce", "ecommerce" ] }