{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shipping-label-printer", "title": "Shipping Label Printer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/shipping-label-printer/ShippingLabelPrinter.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Barcode,\n Check,\n Copy,\n Download,\n FileCode2,\n Package,\n Printer,\n RefreshCw,\n Scale,\n ShieldCheck,\n Truck,\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 { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\n\nexport type CarrierId = 'fedex' | 'ups' | 'usps' | 'dhl'\n\nexport interface CarrierOption {\n id: CarrierId\n name: string\n code: string\n serviceBanner: string\n rate: number\n transitDays: string\n badge: string\n badgeVariant: 'default' | 'secondary' | 'outline' | 'success'\n trackingNumber: string\n barcodeString: string\n routingZip: string\n routingZone: string\n hubCode: string\n}\n\nexport interface ShippingLabelPrinterProps {\n className?: string\n initialOrderRef?: string\n initialCarrier?: CarrierId\n onPrint?: () => void\n onDownloadZpl?: (zpl: string) => void\n}\n\nconst CARRIERS: Record = {\n fedex: {\n id: 'fedex',\n name: 'FedEx Express Priority',\n code: 'FEDEX',\n serviceBanner: 'FEDEX 2DAY AIR · DELIVER BY 10:30 AM',\n rate: 24.5,\n transitDays: 'Next Business Day (10:30 AM)',\n badge: 'Fastest',\n badgeVariant: 'default',\n trackingNumber: '#TRK-9284-1029-4810-US',\n barcodeString: '*4209110192841029481029*',\n routingZip: 'PRIORITY 91101',\n routingZone: 'ZONE 8 · ROUTE W-04',\n hubCode: 'MEM (Memphis SuperHub)',\n },\n ups: {\n id: 'ups',\n name: 'UPS Ground',\n code: 'UPS',\n serviceBanner: 'UPS GROUND · GUARANTEED TRACKED',\n rate: 11.2,\n transitDays: '2-3 Business Days',\n badge: 'Best Value',\n badgeVariant: 'secondary',\n trackingNumber: '#1Z-9999-9992-8410-2948',\n barcodeString: '*420911011Z99999992841029*',\n routingZip: 'GROUND 91101',\n routingZone: 'ZONE 4 · ROUTE CA-08',\n hubCode: 'ONT (Ontario West Hub)',\n },\n usps: {\n id: 'usps',\n name: 'USPS Priority Mail',\n code: 'USPS',\n serviceBanner: 'USPS PRIORITY MAIL 2-DAY · COMMERCIAL BASE',\n rate: 9.85,\n transitDays: '1-3 Business Days',\n badge: 'Standard',\n badgeVariant: 'outline',\n trackingNumber: '#9400-1118-9922-3849-1029',\n barcodeString: '*4209110194001118992238*',\n routingZip: 'PRIORITY 91101',\n routingZone: 'ZONE 8 · ROUTE P-12',\n hubCode: 'LAX (Los Angeles P&DC)',\n },\n dhl: {\n id: 'dhl',\n name: 'DHL Express',\n code: 'DHL',\n serviceBanner: 'DHL EXPRESS WORLDWIDE · TIME DEFINITE',\n rate: 38.0,\n transitDays: 'Next Day by End of Day',\n badge: 'Express Air',\n badgeVariant: 'default',\n trackingNumber: '#DHL-92841-102948-US',\n barcodeString: '*42091101DHL9284102948*',\n routingZip: 'EXPRESS 91101',\n routingZone: 'ZONE INTL · GATEWAY LAX',\n hubCode: 'CVG (Cincinnati Hub)',\n },\n}\n\nexport function ShippingLabelPrinter({\n className,\n initialOrderRef = '#ORD-92841',\n initialCarrier = 'fedex',\n onPrint,\n onDownloadZpl,\n}: ShippingLabelPrinterProps) {\n const [selectedCarrier, setSelectedCarrier] = React.useState(initialCarrier)\n const [weightLbs, setWeightLbs] = React.useState(4)\n const [weightOz, setWeightOz] = React.useState(8)\n const [dimLength, setDimLength] = React.useState(14)\n const [dimWidth, setDimWidth] = React.useState(10)\n const [dimHeight, setDimHeight] = React.useState(6)\n const [requireSignature, setRequireSignature] = React.useState(true)\n const [declaredValue, setDeclaredValue] = React.useState('300.00')\n const [includeInsurance] = React.useState(true)\n\n const [isScaleSyncing, setIsScaleSyncing] = React.useState(false)\n const [copiedOrder, setCopiedOrder] = React.useState(false)\n const [copiedTracking, setCopiedTracking] = React.useState(false)\n const [copiedZpl, setCopiedZpl] = React.useState(false)\n const [isPrinted, setIsPrinted] = React.useState(false)\n\n const activeCarrier = CARRIERS[selectedCarrier] || CARRIERS.fedex\n const signatureFee = requireSignature ? 5.5 : 0\n const insuranceFee = includeInsurance ? 3.2 : 0\n const totalShippingCost = activeCarrier.rate + signatureFee + insuranceFee\n const dimWeightLbs = ((dimLength * dimWidth * dimHeight) / 139).toFixed(2)\n\n const generateZplCode = React.useCallback((): string => {\n const c = activeCarrier\n return `^XA\n^FO50,30^A0N,40,40^FD${c.code}^FS\n^FO220,30^A0N,22,22^FDWT: ${weightLbs} LBS ${weightOz} OZ^FS\n^FO220,60^A0N,22,22^FDDIM: ${dimLength}x${dimWidth}x${dimHeight} IN^FS\n^FO50,95^GB700,3,3^FS\n^FO50,110^A0N,26,26^FD${c.serviceBanner}^FS\n^FO50,150^GB700,3,3^FS\n^FO50,165^A0N,20,20^FDSHIP FROM:^FS\n^FO50,190^A0N,20,20^FDACME LOGISTICS FULFILLMENT DC #4^FS\n^FO50,215^A0N,20,20^FD100 ENTERPRISE WAY, SUITE 200^FS\n^FO50,240^A0N,20,20^FDNEWARK NJ 07102-4100^FS\n^FO50,270^GB700,3,3^FS\n^FO50,285^A0N,22,22^FDSHIP TO:^FS\n^FO50,315^A0N,26,26^FDALEXANDRA CHEN (555) 019-2831^FS\n^FO50,345^A0N,26,26^FD742 EVERGREEN TERRACE, APT 4B^FS\n^FO50,375^A0N,26,26^FDPASADENA CA 91101-2104^FS\n^FO50,415^GB700,70,4^FS\n^FO70,435^A0N,40,40^FD${c.routingZip}^FS\n^FO50,500^GB700,3,3^FS\n${requireSignature ? '^FO50,515^A0N,22,22^FD*** DIRECT SIGNATURE REQUIRED UPON DELIVERY ***^FS\\n^FO50,545^GB700,3,3^FS\\n' : ''}\n^FO100,570^BY3,3,90^BCN,90,Y,N,N^FD>${c.barcodeString}^FS\n^FO50,710^A0N,28,28^FDTRACKING: ${c.trackingNumber}^FS\n^FO50,760^GB700,2,2^FS\n^FO50,775^A0N,18,18^FDELECTRONIC POSTAGE PAID - ZPL II 203 DPI - 1 OF 1^FS\n^XZ`\n }, [activeCarrier, weightLbs, weightOz, dimLength, dimWidth, dimHeight, requireSignature])\n\n const handlePrint = () => {\n onPrint?.()\n setIsPrinted(true)\n setTimeout(() => {\n setIsPrinted(false)\n }, 3000)\n if (typeof window !== 'undefined') {\n window.print()\n }\n }\n\n const handleDownloadZpl = () => {\n const zpl = generateZplCode()\n onDownloadZpl?.(zpl)\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(zpl)\n }\n setCopiedZpl(true)\n setTimeout(() => {\n setCopiedZpl(false)\n }, 2500)\n }\n\n const handleSyncScale = () => {\n setIsScaleSyncing(true)\n setTimeout(() => {\n setWeightLbs(4)\n setWeightOz(8)\n setIsScaleSyncing(false)\n }, 600)\n }\n\n const copyOrderRef = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(initialOrderRef)\n setCopiedOrder(true)\n setTimeout(() => {\n setCopiedOrder(false)\n }, 2000)\n }\n }\n\n const copyTracking = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(activeCarrier.trackingNumber)\n setCopiedTracking(true)\n setTimeout(() => {\n setCopiedTracking(false)\n }, 2000)\n }\n }\n\n return (\n
\n {/* Header Control Bar */}\n
\n
\n
\n \n \n Dispatch Station #04\n \n
\n \n \n \n \n Zebra ZD421 Ready · 203 DPI\n
\n
\n\n
\n

\n Shipping Label Creation & Dispatch\n

\n \n {initialOrderRef}\n {copiedOrder ? (\n \n ) : (\n \n )}\n \n
\n

\n Multi-carrier rate rating, automated scale synchronization, and instant 4×6 thermal direct label generation.\n

\n
\n\n {/* Action Buttons */}\n
\n \n {copiedZpl ? (\n \n ) : (\n \n )}\n {copiedZpl ? 'Copied ZPL II' : 'Download ZPL / PDF'}\n \n\n \n
\n
\n\n {/* 2-Column Shipping Station Grid */}\n
\n {/* Left Column: Carrier & Package Inputs (7 cols on lg) */}\n
\n {/* 1. Carrier Selector Radio Cards */}\n \n \n
\n
\n \n Carrier & Service Rate Selection\n
\n \n Live API Rates\n \n
\n \n Select optimal carrier routing based on transit time guarantee and negotiated rates\n \n \n\n \n setSelectedCarrier(val as CarrierId)}\n className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\"\n >\n {Object.values(CARRIERS).map((carrier) => (\n \n
\n
\n \n
\n
\n {carrier.name}\n
\n

{carrier.transitDays}

\n
\n
\n \n {carrier.badge}\n \n
\n\n
\n {carrier.code} Commercial Rate\n \n ${carrier.rate.toFixed(2)}\n \n
\n \n ))}\n \n \n \n\n {/* 2. Package Weight & Scale Sync */}\n \n \n
\n
\n \n Package Weight & Digital Scale\n
\n \n USB COM3\n \n
\n \n Live gross weight measurement captured via certified USB benchtop parcel scale\n \n \n\n \n {/* Scale Telemetry Banner */}\n
\n
\n
\n \n
\n
\n
\n Fairbanks SC-200 Bench Scale\n \n
\n

\n Live Auto-Sync Active • Certified NIST Class III\n

\n
\n
\n\n
\n \n 4 lbs 8.0 oz (2.04 kg)\n \n \n \n {isScaleSyncing ? 'Syncing...' : 'Re-weigh'}\n \n
\n
\n\n {/* Weight & Dimensions Form Inputs */}\n
\n {/* Weight Inputs */}\n
\n \n
\n
\n setWeightLbs(Number(e.target.value))}\n className=\"pr-8 font-mono text-xs\"\n />\n \n lbs\n \n
\n
\n setWeightOz(Number(e.target.value))}\n className=\"pr-8 font-mono text-xs\"\n />\n \n oz\n \n
\n
\n
\n\n {/* Package Dimensions */}\n
\n
\n \n {dimWeightLbs} lbs Dim Wt\n
\n
\n
\n setDimLength(Number(e.target.value))}\n className=\"pr-6 font-mono text-xs\"\n />\n \n L\n \n
\n
\n setDimWidth(Number(e.target.value))}\n className=\"pr-6 font-mono text-xs\"\n />\n \n W\n \n
\n
\n setDimHeight(Number(e.target.value))}\n className=\"pr-6 font-mono text-xs\"\n />\n \n H\n \n
\n
\n
\n
\n \n \n\n {/* 3. Value-Added Services & Declared Value */}\n \n \n
\n
\n \n Delivery Access & Insurance Options\n
\n \n Carrier Accessorials\n \n
\n \n\n \n {/* Signature on Delivery Switch */}\n
\n
\n
\n Direct Signature Required\n \n +$5.50\n \n
\n

\n Carrier will obtain a physical in-person signature from recipient at doorstep. Cannot be left\n unattended.\n

\n
\n \n
\n\n {/* Declared Value / Cargo Insurance */}\n
\n
\n
\n Declared Insurance Value\n \n Full Loss Protection\n \n
\n

\n Coverage up to declared amount for transit loss, theft, or damage (+$3.20 premium)\n

\n
\n
\n \n $\n \n setDeclaredValue(e.target.value)}\n className=\"pl-6 text-right font-mono text-xs\"\n />\n
\n
\n\n {/* Package Items Summary Strip */}\n
\n
\n
\n \n Package Contents:\n Pro Studio Headphones X9, Braided Cable (2 items)\n
\n \n SKU-AUD-9821\n \n
\n
\n \n \n\n {/* 4. Pricing & Dispatch Cost Summary */}\n \n \n
\n Base Carrier Rate ({activeCarrier.name}):\n \n ${activeCarrier.rate.toFixed(2)}\n \n
\n
\n Direct Signature Confirmation:\n ${signatureFee.toFixed(2)}\n
\n
\n Declared Value Cargo Protection ($300.00):\n ${insuranceFee.toFixed(2)}\n
\n \n
\n Total Label & Dispatch Cost:\n \n ${totalShippingCost.toFixed(2)} USD\n \n
\n \n \n
\n\n {/* Right Column: 4x6 Thermal Printable Label Card (5 cols on lg) */}\n
\n \n \n
\n
\n \n 4×6 Thermal Label Preview\n
\n \n ZPL II 203 DPI\n \n
\n \n Direct thermal printable output formatted for 4\" × 6\" standard roll label stock\n \n \n\n \n {/* Thermal Label Canvas Container */}\n
\n {/* Top Thermal Stock Perforation Marker */}\n
\n ✂\n \n 4\" TEAR LINE\n
\n\n {/* REALISTIC 4x6 CARRIER SHIPPING LABEL MOCKUP */}\n
\n {/* Label Header: Carrier Code & Meta */}\n
\n
\n
\n {activeCarrier.code}\n
\n
PRIORITY DISPATCH
\n
\n\n
\n
\n WT: {weightLbs} LBS {weightOz} OZ\n
\n
\n DIM: {dimLength}x{dimWidth}x{dimHeight} IN\n
\n
DATE: 21AUG26
\n
\n
\n\n {/* Service Banner */}\n
\n {activeCarrier.serviceBanner}\n
\n\n {/* Origin & 2D MaxiCode Block */}\n
\n {/* Ship From Address */}\n
\n
SHIP FROM:
\n
ACME LOGISTICS DC #4
\n
100 ENTERPRISE WAY, STE 200
\n
NEWARK NJ 07102-4100
\n
REF: {initialOrderRef}
\n
\n\n {/* 2D MaxiCode / PDF417 Vector Barcode */}\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 {/* Destination Address Block */}\n
\n
SHIP TO:
\n
ALEXANDRA CHEN
\n
742 EVERGREEN TERRACE, APT 4B
\n
PASADENA CA 91101-2104
\n
TEL: (555) 019-2831
\n
\n\n {/* Large Bold Zip Code Routing Bar */}\n
\n
{activeCarrier.routingZip}
\n
\n {activeCarrier.routingZone} • {activeCarrier.hubCode}\n
\n
\n\n {/* Signature Required Strip */}\n {requireSignature && (\n
\n *** DIRECT SIGNATURE REQUIRED ***\n
\n )}\n\n {/* Large Code 128 Tracking Barcode */}\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 \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 {activeCarrier.barcodeString}\n
\n
\n\n {/* Tracking Number Line */}\n
\n
\n TRACKING #: {activeCarrier.trackingNumber}\n
\n
\n\n {/* Label Footer */}\n
\n POSTAGE PAID\n 4x6 THERMAL\n PKG 1 OF 1\n
\n
\n
\n\n {/* Print Actions & Quick Copy Toolbar */}\n
\n
\n Tracking:\n \n {activeCarrier.trackingNumber}\n {copiedTracking ? (\n \n ) : (\n \n )}\n \n
\n\n
\n \n \n
\n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ShippingLabelPrinter.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/radio-group.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/switch.json" ], "description": "Multi-carrier shipping label creator and dispatch station (USPS, FedEx, UPS, DHL) with live digital scale sync, package dimensional weight calculator, delivery options, and realistic 4x6 high-contrast thermal printable label preview.", "categories": [ "logistics", "app", "ecommerce" ] }