)}
{/* Hero band — carrier brand chip, name, big price.
className keeps the 3-column layout on mobile (see Homepage.html's
blanket grid-flatten rule). */}
{(() => {
// Scale the headline price font down for long amounts so a
// 6-7 digit total ("$155,500" / "$1,550,000") doesn't blow out
// the price column and squeeze the carrier name on mobile.
// Common buckets:
// ≤6 chars ($3,075) → 26px (unchanged from before)
// 7 chars ($15,500) → 23px
// 8 chars ($155,500) → 20px
// 9+ chars ($1,550,000) → 18px
const priceStr = fmtMoney(total, ccy) || '—';
const priceFs = priceStr.length <= 6 ? 26
: priceStr.length === 7 ? 23
: priceStr.length === 8 ? 20
: 18;
return (
{priceStr}
{t('rate.allin')} {ccy}
);
})()}
{/* Quick stats strip. className + --rrc-stats-cols CSS variable keep
the dynamic 1–3 column count on mobile (page-level mobile rule
would otherwise flatten this to 1 column). */}
{/* Route line — port names + a small distance chip when the API
returned origin/destination port distance. Skipped for AIR since
the AIR header strip already shows the distance hint up top. */}
{(originPort || destPort) && (
{/* Distance hints — only render the row if at least one side
has a known distance. Each side is independent so a rate
with origin-distance but no dest-distance still shows. */}
{!isAirRate && (Number.isFinite(oDist) || Number.isFinite(dDist)) && (
);
})()}
{/* Always-visible pickup / delivery pending banner. Customer asked
for door service, but this carrier's live rate didn't include the
door leg — surface it on the collapsed card so the customer reads
"pending" without having to expand the breakdown. The detailed
note still appears inside the Pickup, delivery & drayage panel.
FCL door pickup commonly comes back as "Origin Drayage: Door to
PORT X" inside the breakdown rather than as r.hasPickup, so we
also scan the breakdown labels — without that, drayage-only rates
falsely show as pending. */}
{(() => {
const pickupFulfilled = isPickupFulfilled(r, breakdown);
const deliveryFulfilled = isDeliveryFulfilled(r, breakdown);
const pickupPending = wantsOriginDoor && !pickupFulfilled;
const deliveryPending = wantsDestDoor && !deliveryFulfilled;
if (!pickupPending && !deliveryPending) return null;
const labels = [];
if (pickupPending) labels.push(t('rate.lbl.pickup_pending'));
if (deliveryPending) labels.push(t('rate.lbl.delivery_pending'));
return (
);
})()}
{/* Always-visible port-to-port info pill. When the customer asked
for port-to-port at BOTH ends (no door pickup, no door delivery),
confirm what the rate covers so they're not surprised they need
to handle the inland legs themselves. Informational blue tone
(not warning) — this is the expected outcome of their request. */}
{(() => {
// Only show when neither end asked for door service AND we don't
// already have a pickup/delivery pending banner above (mutually
// exclusive — they only co-occur when transport tokens are mixed).
if (wantsOriginDoor || wantsDestDoor) return null;
// Skip if origin transport is unknown — the prop may not have been
// passed (e.g. homepage hero, which doesn't forward it yet).
if (!originTransport && !destinationTransport) return null;
const isP2P = (originTransport === 'customer_deliver' || !originTransport)
&& (destinationTransport === 'customer_pickup' || !destinationTransport);
if (!isP2P) return null;
return (
);
}
// ────────────────────────────────────────────────────────────────────────
// NoRatesGlass — premium custom-quote fallback shown when the Walio rates
// API returns zero rates. Ported from the homepage hero so the landings
// (international-moving, vehicle-shipping) and future blog calculators
// get the same polished "we're calculating your custom rate" surface
// instead of a plain warning banner.
//
// Props (all optional — the component degrades gracefully when missing):
// summary — { mode, modeIcon, modeName, unit, weight, ready,
// fromLabel, toLabel, fromPlace, toPlace }
// lead — { name, email, phone, company } from the lead form
// onEdit — back / edit-search button handler (header)
// onChangeService — "Start new search" / "Iniciar nueva búsqueda" CTA
// onClose — close button handler (header)
// compact — when true, drops the header (back/edit/close) for
// consumers that already wrap the component in
// their own chrome (e.g. the landing calculator).
// ────────────────────────────────────────────────────────────────────────
// Frosted-glass border overlay — used for the outer card chrome.
function LiquidBorder({ radius = 20, alpha = [0.8, 0.3] }) {
const [a, b] = alpha;
return (
);
}
// Step indicator (mirrors the hero's). Used inside NoRatesGlass at step 6/6.
function StepDots({ step, total = 6, t }) {
const dots = Array.from({ length: total }, (_, i) => i + 1);
return (
{dots.map(n => {
const active = n === step;
const done = n < step;
return (
);
})}
{t('q.step_x_of_y', { n: step, total })}
);
}
// Single contact-line with icon chip + truncation. Used in the contact
// info section of NoRatesGlass.
function ContactRow({ icon, text, mono }) {
const Icon = window.Icon;
return (
{Icon && }
{text}
);
}
function NoRatesGlass({ summary, lead, onEdit, onChangeService, onClose, compact }) {
const { t } = useRateT();
const Icon = window.Icon;
const wrapRef = React.useRef(null);
const [wide, setWide] = useState(true);
const [narrowHeader, setNarrowHeader] = useState(false);
useEffect(() => {
if (!wrapRef.current || typeof ResizeObserver === 'undefined') return;
const ro = new ResizeObserver(([e]) => {
const w = e.contentRect.width;
setWide(w >= 640);
setNarrowHeader(w <= 820);
});
ro.observe(wrapRef.current);
return () => ro.disconnect();
}, []);
const s = summary || {};
const modeIcon = s.modeIcon || 'box';
const modeName = s.modeName || 'Quote';
const fromLbl = s.fromLabel || '—';
const toLbl = s.toLabel || '—';
const readyLbl = s.ready ? fmtShortDate(s.ready) : null;
const leadObj = lead || s.lead || {};
// Stable quote reference per mount: Q-YYYY-XXXX. Recomputing on every
// render would let the user see the ref flicker as state updates roll in.
const quoteRefRef = React.useRef(null);
if (quoteRefRef.current == null) {
quoteRefRef.current = `Q-${new Date().getFullYear()}-${
Math.random().toString(36).slice(2, 6).toUpperCase()
}`;
}
const quoteRef = quoteRefRef.current;
// Status rotation: 4 stages, ~1.2s each. Rotates while requestSent is false.
const STATUS_KEYS = [
'q.norates.status.analyzing',
'q.norates.status.negotiating',
'q.norates.status.checking',
'q.norates.status.finalizing',
];
const [statusIdx, setStatusIdx] = useState(0);
const [requestSent, setRequestSent] = useState(false);
useEffect(() => {
if (requestSent) return;
const id = setInterval(() => {
setStatusIdx(i => (i + 1) % STATUS_KEYS.length);
}, 1200);
return () => clearInterval(id);
}, [requestSent]);
// Hold the "processing" UI for ~4s for a premium feel, then resolve.
useEffect(() => {
const id = setTimeout(() => setRequestSent(true), 4000);
return () => clearTimeout(id);
}, []);
const chips = [];
if (modeName) chips.push(modeName);
if (s.unit) chips.push(s.unit);
if (s.weight) chips.push(`${s.weight} kg`);
if (readyLbl) chips.push(readyLbl);
chips.push(t('q.norates.chip.custom'));
return (
{/* Header — back arrow, mode chip, route, edit + close. Hidden in
compact mode for consumers that already wrap the card in their
own header (e.g. the landing calculator's "Quote ready · ABG-…
/ Modify" strip). */}
{!compact && (
{/* D. Metadata grid — 4 cols when wide, 2 cols when narrow.
className + --nrg-metadata-cols CSS variable keep the dynamic
count on mobile pages that ship a blanket grid-flatten rule. */}