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:

Ready contact Quote Component Test Form

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

LIVE COMPONENT PREVIEW:

Ready Contact Quote — 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:

  1. Open browser DevTools → Network tab
  2. Click "Check Cache Parameters" to see current version
  3. Run npm run build in terminal to generate new version
  4. Refresh this page and check for new version numbers
  5. 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

Parent-supplied ZIP (VDP mode — F306320 AC-4 / AC-5)

Sets quote-request on the live component, as an OVE VDP would. Tick VDP Mode above and press Update Zipcode Component first, then change the ZIP here — the quote refreshes with no remount and no GO button. Clear it and the blue box stays put, showing “Enter a zip code to receive a delivery estimate.” in place of the price; enter a partial ZIP (e.g. 3032) and it does the same, since nothing was quoted.

LIVE ZIPCODE COMPONENT PREVIEW:

Ready Zipcode Quote — Event Log

Responsive Layout Test (F306320)

The widget stacks the quote under the ZIP entry when its container is squarish, and collapses to a single ~60px strip — quote to the right of the ZIP entry — at 800px and above. The switch is the component's wide-breakpoint prop (default 800), measured against the component's own width, so resizing the browser window proves nothing on its own: drag the container's bottom-right corner or use the presets.

One threshold, and the whole quote on a single line from it — logo, price, delivery estimate, vertical rule, disclaimer. The card is a flat 60px at every width from 800px up. That fit is bought with smaller type in the strip only (delivery 11px, disclaimer 8px, price 16px, against 16/10/24 in the stacked card), leaving comfortable slack at 800px. The logo is deliberately not scaled: at 30px it is what sets the strip's height, so shrinking it would take the card under 60px.

Container width:

RESIZABLE CONTAINER — drag the bottom-right corner

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).

LIVE COMPONENT PREVIEW:

Quote / Order — Event Log

✅ Interstate Integration Active