Shipping courier selector
Overview
The Shipping couriers Selector automatically displays available shipping options with real-time rates when creating or editing shipments. This component integrates seamlessly within the shipment form to provide instant rate comparison from multiple courier providers.
How to Use
1️⃣ Initial State - Incomplete Information
When shipment information is incomplete, the selector displays:
Information message: "Please fill in sender/receiver addresses and package weight to see available courier options."
Disabled state with no interactive elements
Required information includes:
Service provider selection
Pickup address with postal code
Delivery address with city and postal code
Package weight, length, dimensions, quantity, and commodity
2️⃣ Loading State - Fetching Rates
Once all required fields are complete:
Loading spinner appears
Loading courier options... message displayed
The system queries each courier API at the same time
3️⃣ Active State - Available Options
When rates are successfully retrieved, the selector shows:
List of available courier services with logos
Real-time shipping costs in selected currency
Estimated delivery time (business days)
Most Affordable badge on cheapest option
Interactive cards for selection
4️⃣ Select Shipping couriers
Click on your preferred shipping option
Selected option will be highlighted with colored border
Selection persists while editing other form fields
Continue with shipment creation or update
Supported Couriers
Australia Post
Border Express
Allied Express
Blue Star
Bonds
XFM
And more...
Key Features
✅ Conditional Display: Only appears when required information is complete ✅ Real-time Rates: Live pricing from multiple carriers ✅ Smart Recommendations: Automatic identification of most affordable option ✅ Instant Updates: Rates refresh when shipment details change ✅ Error Handling: Clear messages for unavailable services
Last updated