WesternBid Shipping Calculator Widget

Shipping calculator widget with two integration modes:

• dist/calculator.es.js + dist/index.css for React apps.
• dist/calculator.iife.js for plain HTML sites via <script> (styles included in JS).

Local development

npm install
npm run dev

Build

npm run build

npm run build creates:

• dist/calculator.es.js
• dist/index.css
• dist/calculator.iife.js

Embed on any website (no React)

Use the standalone bundle and mount widget from window.WbShippingCalculatorWidget.

<div id="wb-shipping-calculator"></div>

<script src="https://cdn.jsdelivr.net/npm/westernbid-shipping-calculator-widget@latest/dist/calculator.iife.js"></script>
<script>
  const widget = window.WbShippingCalculatorWidget.mount({
    target: "#wb-shipping-calculator",
    proxyBaseUrl: "https://your-domain.com/api/wb",
    routes: {
      originCountries: "/origin-countries",
      destinationCountries: "/destination-countries",
      calculateRates: "/calculate-shipping"
    },
    language: "uk",
    onCalculationChange(result) {
      console.log(result.chargeableWeightKg, result.shippingRates);
    },
    onError(error) {
      console.error("Shipping widget error:", error);
    }
  });

  // Optional:
  // widget.update({ language: "en" });
  // widget.destroy();
</script>

Notes:

• Add scripts after the container element (or run mount on DOMContentLoaded).
• Global API aliases are available:
  • window.WbShippingCalculatorWidget.mount(...)
  • window.WbShippingCalculatorWidget.mountShippingCalculatorWidget(...)

React usage

import { ShippingCalculatorWidget } from "westernbid-shipping-calculator-widget";
import "westernbid-shipping-calculator-widget/dist/index.css";

export function ShippingBlock() {
  return (
    <ShippingCalculatorWidget
      proxyBaseUrl="https://your-domain.com/api/wb"
      routes={{
        originCountries: "/origin-countries",
        destinationCountries: "/destination-countries",
        calculateRates: "/calculate-shipping"
      }}
      language="uk"
      onCalculationChange={(result) => {
        console.log(result.chargeableWeightKg, result.shippingRates);
      }}
    />
  );
}

Widget options

• target: string | HTMLElement only for standalone mount API.
• proxyBaseUrl: string proxy base URL.
• routes?: { originCountries; destinationCountries; calculateRates?; calculateWeight? } proxy routes.
• language?: string adds lang query param to requests.
• defaultUseImperialSystem?: boolean default input mode.
• requestHeaders?: Record<string, string> extra request headers.
• rateItems?: Record<string, unknown>[] forwarded to Items in rates request body.
• onError?: (error: Error) => void callback for API errors.
• onSubmit?: (payload) => void callback before API call.
• onCalculationChange?: (result) => void callback with calculated result and normalized rates.

Required proxy routes

• originCountries endpoint returning countries list.
• destinationCountries endpoint returning countries list.
• calculateRates endpoint proxying POST /api/v1/rate/CalculateShipping.
• calculateWeight is still supported as fallback (deprecated).