{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "wholesale-b2b-quick-order", "title": "Wholesale B2b Quick Order", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/wholesale-b2b-quick-order/WholesaleB2bQuickOrder.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { useState, useMemo, useCallback } from 'react'\nimport {\n AlertCircle,\n Bookmark,\n Building2,\n CheckCircle2,\n Download,\n FileSpreadsheet,\n Minus,\n Package,\n Plus,\n RefreshCw,\n Send,\n Layers,\n Trash2,\n TrendingDown,\n Truck,\n Upload,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Textarea } from '@/components/ui/textarea'\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 WholesaleB2bQuickOrderProps {\n poNumber?: string\n accountName?: string\n accountTier?: string\n tierDiscountPercent?: number\n paymentTerms?: string\n freeFreightThreshold?: number\n initialProducts?: WholesaleProduct[]\n className?: string\n onSubmitOrder?: (payload: {\n poNumber: string\n items: WholesaleProduct[]\n subtotal: number\n totalUnits: number\n totalCases: number\n savings: number\n }) => void\n onSaveTemplate?: (items: WholesaleProduct[]) => void\n onExportCsv?: (items: WholesaleProduct[]) => void\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 formatCurrency = (val: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(val)\n}\n\nconst formatNumber = (val: number) => {\n return new Intl.NumberFormat('en-US').format(val)\n}\n\nexport function WholesaleB2bQuickOrder({\n poNumber = 'PO-2026-8841B',\n accountName = 'Northwind Retailers',\n accountTier = 'Tier 3 Wholesale Partner',\n tierDiscountPercent = 35,\n paymentTerms = 'Net 30 Invoicing',\n freeFreightThreshold = 10000,\n initialProducts,\n className,\n onSubmitOrder,\n onSaveTemplate,\n onExportCsv,\n}: WholesaleB2bQuickOrderProps) {\n const [products, setProducts] = useState(() =>\n initialProducts\n ? JSON.parse(JSON.stringify(initialProducts))\n : JSON.parse(JSON.stringify(DEFAULT_WHOLESALE_PRODUCTS)),\n )\n\n const [poRef] = useState(poNumber)\n const [showCsvBox, setShowCsvBox] = useState(false)\n const [csvPasteText, setCsvPasteText] = useState('')\n const [pasteFeedback, setPasteFeedback] = useState<{ type: 'success' | 'error'; message: string } | null>(null)\n const [templateSaved, setTemplateSaved] = useState(false)\n const [orderSubmitted, setOrderSubmitted] = useState(false)\n const [isSubmitting, setIsSubmitting] = useState(false)\n\n // Computations\n const totalCases = useMemo(() => products.reduce((acc, p) => acc + (Number(p.cases) || 0), 0), [products])\n const totalUnits = useMemo(\n () => products.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack, 0),\n [products],\n )\n const wholesaleSubtotal = useMemo(\n () => products.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.wholesaleUnitPrice, 0),\n [products],\n )\n const msrpTotal = useMemo(\n () => products.reduce((acc, p) => acc + (Number(p.cases) || 0) * p.casePack * p.msrpUnitPrice, 0),\n [products],\n )\n const totalSavings = useMemo(() => Math.max(0, msrpTotal - wholesaleSubtotal), [msrpTotal, wholesaleSubtotal])\n const savingsPercent = useMemo(() => {\n if (msrpTotal <= 0) return tierDiscountPercent\n return Math.round((totalSavings / msrpTotal) * 100)\n }, [msrpTotal, totalSavings, tierDiscountPercent])\n\n const isFreeFreight = wholesaleSubtotal >= freeFreightThreshold\n const freightAmount = isFreeFreight ? 0 : 250\n const grandTotal = wholesaleSubtotal + freightAmount\n\n const nextTierTarget = 50000\n const nextTierRemaining = Math.max(0, nextTierTarget - wholesaleSubtotal)\n const tierProgressPercent = Math.min(100, Math.round((wholesaleSubtotal / nextTierTarget) * 100))\n\n // Actions\n const updateCases = useCallback((id: string, delta: number) => {\n setProducts((prev) =>\n prev.map((p) => {\n if (p.id === id) {\n const current = Number(p.cases) || 0\n const next = Math.max(0, Math.min(p.availableCases, current + delta))\n return { ...p, cases: next }\n }\n return p\n }),\n )\n }, [])\n\n const setCases = useCallback((id: string, val: string | number) => {\n setProducts((prev) =>\n prev.map((p) => {\n if (p.id === id) {\n const parsed = parseInt(String(val), 10)\n const next = isNaN(parsed) || parsed < 0 ? 0 : Math.min(p.availableCases, parsed)\n return { ...p, cases: next }\n }\n return p\n }),\n )\n }, [])\n\n const clearLine = useCallback((id: string) => {\n setProducts((prev) => prev.map((p) => (p.id === id ? { ...p, cases: 0 } : p)))\n }, [])\n\n const resetAllCases = useCallback(() => {\n setProducts((prev) => prev.map((p) => ({ ...p, cases: 0 })))\n setPasteFeedback(null)\n }, [])\n\n const restoreDefaultCases = useCallback(() => {\n setProducts(JSON.parse(JSON.stringify(DEFAULT_WHOLESALE_PRODUCTS)))\n setPasteFeedback(null)\n }, [])\n\n const applyCsvPaste = useCallback(() => {\n setPasteFeedback(null)\n if (!csvPasteText.trim()) {\n setPasteFeedback({\n type: 'error',\n message: 'Please paste SKU and case quantity rows to parse.',\n })\n return\n }\n\n const lines = csvPasteText.split(/\\r?\\n/)\n let updatedCount = 0\n const unknownSkus: string[] = []\n\n setProducts((prev) => {\n const cloned = prev.map((p) => ({ ...p }))\n for (const rawLine of lines) {\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) {\n const skuQuery = parts[0].toUpperCase()\n const qty = parseInt(parts[1], 10)\n\n if (!isNaN(qty)) {\n const product = cloned.find(\n (p) => p.sku.toUpperCase() === skuQuery || p.sku.toUpperCase().includes(skuQuery),\n )\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 }\n }\n return cloned\n })\n\n if (updatedCount > 0) {\n setPasteFeedback({\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 setPasteFeedback({\n type: 'error',\n message: 'No matching catalog SKUs found. Verify format: SKU-84920, 10',\n })\n }\n }, [csvPasteText])\n\n const loadSampleCsv = useCallback(() => {\n const sample = `SKU-84920, 8\\nSKU-49102, 5\\nSKU-77215, 4\\nSKU-10934, 12\\nSKU-63821, 6`\n setCsvPasteText(sample)\n\n // Parse sample directly\n const lines = sample.split(/\\r?\\n/)\n setProducts((prev) => {\n const cloned = prev.map((p) => ({ ...p }))\n let count = 0\n for (const rawLine of lines) {\n const parts = rawLine.split(/[,;\\t]+/).map((s) => s.trim())\n if (parts.length >= 2) {\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)) {\n product.cases = Math.max(0, Math.min(product.availableCases, qty))\n count++\n }\n }\n }\n return cloned\n })\n setPasteFeedback({\n type: 'success',\n message: 'Sample manifest loaded and applied to matrix (5 SKUs updated).',\n })\n }, [])\n\n const handleSaveTemplate = useCallback(() => {\n setTemplateSaved(true)\n onSaveTemplate?.(products)\n setTimeout(() => {\n setTemplateSaved(false)\n }, 4000)\n }, [products, onSaveTemplate])\n\n const handleSubmitOrder = useCallback(() => {\n if (totalCases === 0) return\n setIsSubmitting(true)\n setTimeout(() => {\n setIsSubmitting(false)\n setOrderSubmitted(true)\n onSubmitOrder?.({\n poNumber: poRef,\n items: products.filter((p) => p.cases > 0),\n subtotal: wholesaleSubtotal,\n totalUnits,\n totalCases,\n savings: totalSavings,\n })\n }, 600)\n }, [totalCases, poRef, products, wholesaleSubtotal, totalUnits, totalSavings, onSubmitOrder])\n\n const handleExportCsv = useCallback(() => {\n onExportCsv?.(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', `${poRef}-order-matrix.csv`)\n document.body.appendChild(downloadLink)\n downloadLink.click()\n document.body.removeChild(downloadLink)\n }, [products, onExportCsv, poRef])\n\n return (\n \n {/* Header & Account Info */}\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 {/* Header Action Buttons */}\n
\n setShowCsvBox(!showCsvBox)}\n >\n \n {showCsvBox ? 'Hide CSV Paste' : 'Upload CSV Order'}\n \n \n
\n
\n \n\n \n {/* Account Terms & Partner Meta Strip */}\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 {/* Volume Tier Margin Incentive Banner */}\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 {/* Template Saved Alert */}\n {templateSaved && (\n
\n
\n \n Order matrix saved as your primary template. You can re-populate this draft at any time.\n
\n setTemplateSaved(false)}\n >\n \n \n
\n )}\n\n {/* Order Submitted Success Alert */}\n {orderSubmitted && (\n
\n
\n
\n \n
\n

Purchase Order {poRef} Submitted Successfully!

\n

\n Your bulk order of{' '}\n \n {totalCases} cases ({totalUnits} units)\n {' '}\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 {/* Quick SKU & Quantity CSV Paste Box */}\n {showCsvBox && (\n \n \n
\n
\n \n \n Quick Paste SKU & Quantity Manifest\n \n
\n setShowCsvBox(false)}\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 setCsvPasteText(val)}\n placeholder={'SKU-84920, 8\\nSKU-49102, 5\\nSKU-77215, 4\\nSKU-10934, 12\\nSKU-63821, 6'}\n rows={4}\n className=\"font-mono text-xs\"\n />\n\n
\n
\n \n \n {csvPasteText && (\n setCsvPasteText('')}\n >\n Clear Input\n \n )}\n
\n
Supports comma, tab, and semicolon delimited lines
\n
\n\n {/* Parse Feedback Alert */}\n {pasteFeedback && (\n \n {pasteFeedback.type === 'success' ? (\n \n ) : (\n \n )}\n {pasteFeedback.message}\n \n )}\n \n \n )}\n\n {/* Bulk SKU Matrix Table Card */}\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
\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 {products.map((product) => (\n 0 && 'bg-primary/5 dark:bg-primary/5')}\n >\n {/* Product Thumbnail & Details */}\n \n
\n \n
\n
{product.name}
\n
\n {product.sku}\n ·\n {product.variant}\n
\n
\n
\n \n\n {/* Case Pack Multiplier */}\n \n
\n \n \n {product.casePack} units / case\n \n
\n \n\n {/* Pricing (MSRP vs Wholesale) */}\n \n
\n
\n {formatCurrency(product.wholesaleUnitPrice)}\n wholesale\n
\n
\n \n {formatCurrency(product.msrpUnitPrice)} MSRP\n \n \n -\n {Math.round(\n ((product.msrpUnitPrice - product.wholesaleUnitPrice) / product.msrpUnitPrice) * 100,\n )}\n %\n \n
\n
\n \n\n {/* Quantity Stepper Input */}\n \n
\n
\n updateCases(product.id, -1)}\n >\n \n \n setCases(product.id, e.target.value)}\n />\n = product.availableCases}\n onClick={() => 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 {/* Stock Status */}\n \n {product.availableCases > 50 ? (\n \n In Stock · {formatNumber(product.availableCases)} cases\n \n ) : (\n \n Low Stock · {product.availableCases} cases\n \n )}\n \n\n {/* Line Total */}\n \n
\n
\n {formatCurrency(product.cases * product.casePack * product.wholesaleUnitPrice)}\n
\n {product.cases > 0 ? (\n
\n Save{' '}\n {formatCurrency(\n product.cases * product.casePack * (product.msrpUnitPrice - product.wholesaleUnitPrice),\n )}\n
\n ) : (\n
0 units
\n )}\n
\n \n\n {/* Row Clear Action */}\n \n {product.cases > 0 && (\n clearLine(product.id)}\n >\n \n \n )}\n \n \n ))}\n \n
\n
\n \n \n\n {/* Sticky Order Summary Footer */}\n
\n
\n {/* Summary Totals Metrics */}\n
\n {/* Total Units */}\n
\n
Total Units
\n
\n {formatNumber(totalUnits)} Units\n
\n
{totalCases} Cases ordered
\n
\n\n {/* Wholesale Subtotal */}\n
\n
Wholesale Subtotal
\n
\n {formatCurrency(wholesaleSubtotal)}\n
\n
MSRP {formatCurrency(msrpTotal)}
\n
\n\n {/* Tier Savings */}\n
\n
Tier Volume Savings
\n
\n -{formatCurrency(totalSavings)}\n
\n
{savingsPercent}% Margin Savings
\n
\n\n {/* Freight & Terms */}\n
\n
Freight & Terms
\n
\n \n {isFreeFreight ? 'Free Freight (>$10k)' : '$250 Ground'}\n
\n
{paymentTerms}
\n
\n
\n\n {/* Submit & Secondary Actions */}\n
\n \n \n Export CSV\n \n\n \n {!isSubmitting ? : }\n {isSubmitting ? 'Processing PO...' : 'Submit Wholesale Purchase Order'}\n \n
\n
\n
\n \n )\n}\n\nexport default WholesaleB2bQuickOrder\n", "type": "registry:block", "target": "~/components/blocks/WholesaleB2bQuickOrder.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "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/input.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.", "categories": [ "commerce", "ecommerce" ] }