@burdenoff/microfe-movethewheels 2026.918.1 → 2026.920.2

package/src/movethewheels/components/ShippingQuoteResults.tsx

@@ -0,0 +1,259 @@
+/**
+ * ShippingQuoteResults
+ *
+ * Every courier option from every carrier for one pincode pair, cheapest first,
+ * with the cheapest and fastest called out. A carrier that failed is listed
+ * with its reason instead of silently missing from the comparison.
+ *
+ * Wide screens get a table. On a phone a table pushes the price — the one
+ * number people compare on — off-screen, so each courier is a card instead.
+ */
+
+import { AlertTriangle, Truck } from 'lucide-react';
+
+import { StatusBadge } from './StatusBadge';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './ui';
+
+import type {
+  OwnFleetEstimate,
+  ShippingQuote,
+  ShippingQuoteResult,
+} from '../hooks/useShippingCarriers';
+import { formatCurrency } from '../utils/formatters';
+
+interface ShippingQuoteResultsProps {
+  result: ShippingQuoteResult;
+  t: (key: string, fallback: string) => string;
+}
+
+const HIGHLIGHT = { bg: 'bg-status-success-bg-subtle', text: 'text-status-success-text' };
+const INFO = { bg: 'bg-status-info-bg-subtle', text: 'text-status-info-text' };
+
+function transit(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.estimatedDeliveryDays === null) return quote.estimatedDeliveryDate ?? '—';
+  const unit =
+    quote.estimatedDeliveryDays === 1
+      ? t('movethewheels.shipping.results.day', 'day')
+      : t('movethewheels.shipping.results.days', 'days');
+  const days = `${quote.estimatedDeliveryDays} ${unit}`;
+  return quote.estimatedDeliveryDate ? `${days} · ${quote.estimatedDeliveryDate}` : days;
+}
+
+function modeLabel(quote: ShippingQuote, t: ShippingQuoteResultsProps['t']): string {
+  if (quote.mode === 'AIR') return t('movethewheels.shipping.results.air', 'Air');
+  if (quote.mode === 'SURFACE') return t('movethewheels.shipping.results.surface', 'Surface');
+  return '—';
+}
+
+function QuoteBadges({ quote, t }: { quote: ShippingQuote; t: ShippingQuoteResultsProps['t'] }) {
+  return (
+    <>
+      {quote.isCheapest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.cheapest', 'Cheapest')}
+          customColors={HIGHLIGHT}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isFastest && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.fastest', 'Fastest')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+      {quote.isRecommended && (
+        <StatusBadge
+          status={t('movethewheels.shipping.results.recommended', 'Recommended')}
+          customColors={INFO}
+          size="sm"
+          showDot={false}
+        />
+      )}
+    </>
+  );
+}
+
+function OwnFleetCard({
+  estimate,
+  t,
+}: {
+  estimate: OwnFleetEstimate;
+  t: ShippingQuoteResultsProps['t'];
+}) {
+  const savings = estimate.savingsVsCheapestCourier;
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Truck size={18} aria-hidden="true" />
+          {t('movethewheels.shipping.ownFleet.title', 'Your own vehicle')}
+          <StatusBadge
+            status={t('movethewheels.shipping.ownFleet.estimate', 'Your estimate')}
+            customColors={INFO}
+            size="sm"
+            showDot={false}
+          />
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <p className="text-2xl font-semibold">{formatCurrency(estimate.cost, estimate.currency)}</p>
+        <p className="text-sm text-text-secondary">
+          {estimate.distanceKm} km × {formatCurrency(estimate.costPerKm, estimate.currency)}/km
+          {estimate.fixedCost > 0 && ` + ${formatCurrency(estimate.fixedCost, estimate.currency)}`}
+        </p>
+        {savings !== null && (
+          <p
+            className={`text-sm font-medium ${
+              estimate.isCheaperThanCouriers
+                ? 'text-status-success-text'
+                : 'text-status-warning-text'
+            }`}
+          >
+            {estimate.isCheaperThanCouriers
+              ? `${t('movethewheels.shipping.ownFleet.cheaper', 'Your own vehicle is cheaper than the cheapest courier by')} ${formatCurrency(savings, estimate.currency)}`
+              : savings === 0
+                ? t('movethewheels.shipping.ownFleet.same', 'Same cost as the cheapest courier')
+                : `${t('movethewheels.shipping.ownFleet.dearer', 'The cheapest courier is cheaper by')} ${formatCurrency(-savings, estimate.currency)}`}
+          </p>
+        )}
+        <p className="text-xs text-text-secondary">
+          {t(
+            'movethewheels.shipping.ownFleet.note',
+            'Based only on the distance and cost per km you entered — not a quote.'
+          )}
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ShippingQuoteResults({ result, t }: ShippingQuoteResultsProps) {
+  const failed = result.providers.filter((provider) => !provider.ok);
+
+  return (
+    <div className="space-y-4">
+      {failed.map((provider) => (
+        <div
+          key={provider.provider}
+          role="alert"
+          className="flex items-start gap-2 rounded-lg border border-status-warning-border bg-status-warning-bg-subtle px-4 py-3 text-sm text-status-warning-text"
+        >
+          <AlertTriangle size={18} className="mt-0.5 shrink-0" aria-hidden="true" />
+          <span>{provider.errorMessage}</span>
+        </div>
+      ))}
+
+      {result.ownFleet && <OwnFleetCard estimate={result.ownFleet} t={t} />}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t('movethewheels.shipping.results.title', 'Courier options')} ({result.quotes.length})
+          </CardTitle>
+          <p className="text-sm text-text-secondary">
+            {t('movethewheels.shipping.results.chargeableWeight', 'Charged on')}{' '}
+            {result.chargeableWeightKg} kg
+          </p>
+        </CardHeader>
+        <CardContent className="p-0">
+          {result.quotes.length === 0 ? (
+            <p className="px-6 pb-6 text-sm text-text-secondary">
+              {failed.length > 0
+                ? t(
+                    'movethewheels.shipping.results.allFailed',
+                    'No rates could be fetched — see the message above.'
+                  )
+                : t(
+                    'movethewheels.shipping.results.noServiceable',
+                    'No courier serves this pincode pair.'
+                  )}
+            </p>
+          ) : (
+            <>
+              <ul
+                className="divide-y md:hidden"
+                aria-label={t('movethewheels.shipping.results.title', 'Courier options')}
+              >
+                {result.quotes.map((quote) => (
+                  <li key={`${quote.provider}:${quote.courierId}`} className="space-y-2 px-4 py-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <span className="min-w-0 font-medium">{quote.courierName}</span>
+                      <span className="shrink-0 text-lg font-semibold">
+                        {formatCurrency(quote.price, quote.currency)}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <QuoteBadges quote={quote} t={t} />
+                    </div>
+                    <p className="text-sm text-text-secondary">
+                      {[
+                        modeLabel(quote, t),
+                        transit(quote, t),
+                        quote.rating === null ? null : `${quote.rating.toFixed(1)} ★`,
+                      ]
+                        .filter((part) => part !== '—' && part !== null)
+                        .join(' · ')}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+              <div className="hidden md:block">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.courier', 'Courier')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.mode', 'Mode')}</TableHead>
+                      <TableHead>
+                        {t('movethewheels.shipping.results.transit', 'Estimated delivery')}
+                      </TableHead>
+                      <TableHead>{t('movethewheels.shipping.results.rating', 'Rating')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('movethewheels.shipping.results.price', 'Price')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {result.quotes.map((quote) => (
+                      <TableRow key={`${quote.provider}:${quote.courierId}`}>
+                        <TableCell>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="font-medium">{quote.courierName}</span>
+                            <QuoteBadges quote={quote} t={t} />
+                          </div>
+                        </TableCell>
+                        <TableCell>{modeLabel(quote, t)}</TableCell>
+                        <TableCell>{transit(quote, t)}</TableCell>
+                        <TableCell>
+                          {quote.rating === null ? '—' : quote.rating.toFixed(1)}
+                        </TableCell>
+                        <TableCell className="text-right font-medium">
+                          {formatCurrency(quote.price, quote.currency)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/movethewheels/components/maps/leaflet-setup.ts

@@ -13,7 +13,14 @@ export const OSM_ATTRIBUTION =
   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 
 export type MapMarkerStatus =
-  'active' | 'in_transit' | 'idle' | 'delayed' | 'delivered' | 'origin' | 'destination' | 'default';
+  | 'active'
+  | 'in_transit'
+  | 'idle'
+  | 'delayed'
+  | 'delivered'
+  | 'origin'
+  | 'destination'
+  | 'default';
 
 /**
  * A coordinate is "real" only when it is finite and not the null-island (0,0)

package/src/movethewheels/hooks/useMultiModalShipments.ts

@@ -12,7 +12,12 @@ import { executeGraphQL } from '../utils/graphqlClient';
 
 export type TransportMode = 'ROAD' | 'AIR' | 'OCEAN' | 'RAIL';
 export type ShipmentLegStatus =
-  'PLANNED' | 'BOOKED' | 'IN_TRANSIT' | 'ARRIVED' | 'DELIVERED' | 'CANCELLED';
+  | 'PLANNED'
+  | 'BOOKED'
+  | 'IN_TRANSIT'
+  | 'ARRIVED'
+  | 'DELIVERED'
+  | 'CANCELLED';
 export type OceanContainerType = 'LCL' | 'FCL_20FT' | 'FCL_40FT' | 'FCL_40FT_HC';
 
 export interface FreightRateBreakdownLine {

package/src/movethewheels/hooks/useShippingCarriers.ts

@@ -0,0 +1,138 @@
+/**
+ * Shipping rate comparison — every carrier's price for one pincode pair, on top
+ * of wspace-movethewheels-svc's carrier module. The carrier accounts belong to
+ * the platform, so there is nothing for a workspace to configure.
+ */
+
+import { useCallback, useMemo } from 'react';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
+import { executeGraphQL } from '../utils/graphqlClient';
+
+export type CarrierProvider = 'SHIPROCKET';
+export type CarrierServiceMode = 'SURFACE' | 'AIR';
+
+export interface OwnFleetInput {
+  distanceKm: number;
+  costPerKm: number;
+  fixedCost?: number;
+}
+
+export interface OwnFleetEstimate {
+  distanceKm: number;
+  costPerKm: number;
+  fixedCost: number;
+  cost: number;
+  currency: string;
+  /** Cheapest courier price minus this estimate; positive = your own vehicle is cheaper. */
+  savingsVsCheapestCourier: number | null;
+  isCheaperThanCouriers: boolean;
+}
+
+export interface ShippingQuoteInput {
+  pickupPostcode: string;
+  deliveryPostcode: string;
+  weightKg: number;
+  lengthCm?: number;
+  widthCm?: number;
+  heightCm?: number;
+  cod?: boolean;
+  ownFleet?: OwnFleetInput;
+}
+
+export interface ShippingQuote {
+  provider: CarrierProvider;
+  courierId: string;
+  courierName: string;
+  price: number;
+  currency: string;
+  estimatedDeliveryDays: number | null;
+  estimatedDeliveryDate: string | null;
+  rating: number | null;
+  mode: CarrierServiceMode | null;
+  isRecommended: boolean;
+  isCheapest: boolean;
+  isFastest: boolean;
+}
+
+export interface CarrierOutcome {
+  provider: CarrierProvider;
+  ok: boolean;
+  quoteCount: number;
+  errorMessage: string | null;
+}
+
+export interface ShippingQuoteResult {
+  chargeableWeightKg: number;
+  ownFleet: OwnFleetEstimate | null;
+  quotes: ShippingQuote[];
+  providers: CarrierOutcome[];
+}
+
+const SHIPPING_QUOTES_QUERY = `
+  query ShippingQuotes($input: ShippingQuoteInput!) {
+    shippingQuotes(input: $input) {
+      chargeableWeightKg
+      ownFleet {
+        distanceKm
+        costPerKm
+        fixedCost
+        cost
+        currency
+        savingsVsCheapestCourier
+        isCheaperThanCouriers
+      }
+      quotes {
+        provider
+        courierId
+        courierName
+        price
+        currency
+        estimatedDeliveryDays
+        estimatedDeliveryDate
+        rating
+        mode
+        isRecommended
+        isCheapest
+        isFastest
+      }
+      providers {
+        provider
+        ok
+        quoteCount
+        errorMessage
+      }
+    }
+  }
+`;
+
+function useGraphqlOptions() {
+  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
+    useMoveTheWheels();
+  return useMemo(
+    () => ({
+      apiGatewayUrl,
+      authToken,
+      workspaceToken,
+      workspaceId,
+      tenantId,
+      actorId: currentUser?.id,
+    }),
+    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
+  );
+}
+
+/** Imperative: a comparison is something the operator asks for, not page-load data. */
+export function useShippingQuotes() {
+  const graphQLOptions = useGraphqlOptions();
+  return useCallback(
+    async (input: ShippingQuoteInput): Promise<ShippingQuoteResult> => {
+      const result = await executeGraphQL<{ shippingQuotes: ShippingQuoteResult }>(
+        graphQLOptions,
+        SHIPPING_QUOTES_QUERY,
+        { input }
+      );
+      return result.shippingQuotes;
+    },
+    [graphQLOptions]
+  );
+}