PBC Quotes Web Components - Self-Contained Demo

✅ Interstate Design System Integrated!
This page includes NO Interstate dependencies in the HTML. All Interstate styling and components are automatically loaded by your web components.

Checking Interstate CSS...

Checking Interstate Components...

Checking Cache Busting...

Key Benefits:

Host websites don't need to include Interstate CSS or JavaScript
Components work consistently across different websites
Automatic fallback styling if Interstate CDN is unavailable
Progressive enhancement with full Interstate features when available

🧪 Ready contact Quote Component Test Form

Test all props: Update the values below and click "Update Component" to test different prop values

Address: Address 2: City: State: Dropoff Zipcode: Name: Phone: Email: API Token: BFF URL: Quote ID: PartnerId: VIN: Pickup Zipcode: Is Operable:

LIVE COMPONENT PREVIEW:

Event Log

🚀 Cache Busting Test Center

Test automatic cache busting: Monitor how cache parameters ensure fresh component loading

📊 Current Cache Status

 Loading cache version... 

Scanning for cache parameters...

🧪 Test Actions

🎯 How to Test Cache Busting:

Open browser DevTools → Network tab
Click "Check Cache Parameters" to see current version
Run npm run build in terminal to generate new version
Refresh this page and check for new version numbers
Look for ?v=timestamp.hash parameters on JS files

📋 Cache Test Log

 Ready for cache busting tests... 

🧪 Ready Zipcode Quote Component Test Form

Test zipcode props: Update the values below and click "Update Zipcode Component" to test different prop values

BFF URL: API Token: PartnerId: VIN: Pickup Zipcode: Dropoff Zipcode: Is Operable:

LIVE ZIPCODE COMPONENT PREVIEW:

Event Log

🚚 Quote / Order Component Test Form (F255314)

Test all props: Update the values below and click "Update Component" to render the component with a different configuration. Uses the same API token as the components above so it loads on launch under Aspire (live BFF at https://localhost:7100).

BFF URL: API Token: Order Source: Customer ID: Contact Name: Contact Phone: Contact Email: Partner ID: Payer ID: Shipper ID: Item Ref: VIN: Year: Make: Model: Sub Model: Is Enclosed: Is Operable: Pickup Address: Pickup Address 2: Pickup City: Pickup State: Pickup Zipcode: Delivery Address: Delivery Address 2: Delivery City: Delivery State: Delivery Zipcode:

LIVE COMPONENT PREVIEW:

Event Log

✅ Interstate Integration Active