{label}
{options.map(opt => {
const active = value === opt.value;
return (
onChange(opt.value)}
style={{ textAlign: 'left',
padding: '8px 10px', borderRadius: 9,
background: active ? '#F0F5FF' : '#FFFFFF',
border: '1px solid ' + (active ? '#1E57D6' : 'rgba(16,24,40,0.1)'),
boxShadow: active
? '0 0 0 2px rgba(30,87,214,0.12), 0 1px 2px rgba(16,24,40,0.04)'
: '0 1px 2px rgba(16,24,40,0.04), inset 0 1px 0 rgba(255,255,255,0.9)',
cursor: 'pointer', fontFamily: 'inherit',
display: 'flex', alignItems: 'flex-start', gap: 8 }}>
{active &&
{opt.code}
{opt.title}
{opt.desc}
);
})}
);
}
function QuoteCalculator() {
// 'form' → 'lead' → 'price' (lead gates the rates API, matches the
// homepage hero pattern. 'price' is the terminal success state.)
const [stage, setStage] = useState('form');
const [mode, setMode] = useState('rooms'); // rooms | boxes | type
const [originText, setOriginText] = useState('');
const [destText, setDestText] = useState('');
const [originPlace, setOriginPlace] = useState(null);
const [destPlace, setDestPlace] = useState(null);
const [sizeRooms, setSizeRooms] = useState('1bed');
const [sizeBoxes, setSizeBoxes] = useState('md');
const [sizeType, setSizeType] = useState('lcl-md');
// Custom-rooms extrapolator (4+ bedrooms / large household moves). When
// `customRoomsActive` is true we ignore the standard sizeRooms preset
// and build a synthetic one from `customRoomCount` × 1bed baseline.
// Mode auto-flips to FCL once cargo exceeds 25 m³, with the right
// number of 40' HC containers picked (capacity ~67 m³ each).
const [customRoomsActive, setCustomRoomsActive] = useState(false);
const [customRoomCount, setCustomRoomCount] = useState(4);
// Container MIX for the Type tab's FCL presets. Lets the customer build
// any combination — e.g. 1×20' + 2×40' HC — instead of being limited to
// a single container type. Stored as { '20': N, '40HC': N } to match
// Walio's request shape. The stepper UI renders one row per type and
// multiplies the preset's containers/cbm/cuft before the request goes
// out. Resets when the customer flips between FCL presets (see effect
// below the size-meta block).
const [containerMix, setContainerMix] = useState({ '20': 0, '40HC': 1 });
// Multi-vehicle picker — mirrors the homepage hero's RELOCATION_VEHICLES
// pattern. Each vehicle reserves 1100 cuft (one 20' bay) and pushes the
// sizeMeta up to FCL with the right container mix from recommendFclForCuft.
// Format: [{ id, type }] where `type` is a key from
// window.__abgsSharedCalculator.RELOCATION_VEHICLES.
const [relocationVehicles, setRelocationVehicles] = useState([]);
const [vehicle, setVehicle] = useState(false);
// Inland-transportation tokens — same defaults as the homepage hero
// (port-to-port). User flips either side to SD to add an AB Group
// pickup/delivery leg. The legacy single `pickup` boolean used to drive
// origin transport on its own; now both sides are independent.
const [originTransport, setOriginTransport] = useState('customer_deliver');
const [destinationTransport, setDestinationTransport] = useState('customer_pickup');
// ECU door selections when the user is on SD. The shared DoorPicker
// (landing/door-picker-shared.jsx) writes back here on pick. The door's
// .code is what flows into origin.doorCode / destination.doorCode in the
// outbound rate request — that's the trigger for door-aware pickup
// pricing on Walio's side.
const [originDoor, setOriginDoor] = useState(null);
const [destDoor, setDestDoor] = useState(null);
// Port state — populated on origin/destination place pick via Walio
// /v1/locations/ports. Shape matches the homepage hero's originPorts /
// destPorts (HeroAnimated.jsx L3801-3804).
const [originPorts, setOriginPorts] = useState({
loading: false, list: [], selected: null, error: null });
const [destPorts, setDestPorts] = useState({
loading: false, list: [], selected: null, error: null });
// Firestore-hydrated per-landing config. null until the fetch resolves;
// missing keys fall back silently to __landingBuilders.DEFAULTS so the
// calculator keeps working if Firestore is unreachable or the doc is
// empty. We don't block the UI on config — the form renders immediately
// with defaults and re-renders once overrides arrive (typically <300ms).
const [overrides, setOverrides] = useState(null);
// The calc is the primary CTA on the landing — it must NEVER be invisible
// just because IntersectionObserver hasn't fired. The page-level reveal-
// on-scroll script (in international-moving.html) starts every `.reveal`
// at opacity: 0 and waits for the element to enter the viewport. On
// narrow viewports (when the hero grid stacks vertically) the calc lands
// below the fold and stays hidden until the user scrolls — which can
// look like a hard freeze, especially because the rest of the hero is
// already painted. Force-add `.in` on mount so the fade-in still plays
// but the calc always becomes visible regardless of position.
const calcRef = useRef(null);
useEffect(() => {
if (!calcRef.current) return;
const el = calcRef.current;
// Wait one frame so the browser registers the initial `.reveal`
// opacity:0 before transitioning to opacity:1. Without rAF, the
// class change happens in the same paint and the transition is
// skipped — element pops in instead of fading.
requestAnimationFrame(() => el.classList.add('in'));
}, []);
useEffect(() => {
const fetcher = window.__abgsConfig && window.__abgsConfig.getQuoteConfig;
if (!fetcher) return; // firebase-public.js not loaded → defaults only
let cancelled = false;
// Slug must match the admin Landing Pages catalog entry + the URL
// basename: landing/international-moving.html (English version).
fetcher('international-moving').then((cfg) => {
if (!cancelled && cfg) setOverrides(cfg);
});
return () => { cancelled = true; };
}, []);
// Effective tables — defaults merged with the Firestore overrides. Memo'd
// so re-renders don't rebuild the merge on every keystroke.
const effective = useMemo(() => LB.applyConfig(overrides), [overrides]);
const lang = STR.lang || 'es';
// ─── Port auto-discovery ──────────────────────────────────────────
// When either origin or destination resolves via Google Places, hit
// Walio /v1/locations/ports for that country + coords. Auto-pick the
// nearest (list[0]); user can swap via the dropdown. Mirrors the
// homepage hero's port effects (HeroAnimated.jsx L3964-4014).
useEffect(() => {
if (!LB.walioSearchPorts) return;
if (!originPlace || !originPlace.country) {
setOriginPorts({ loading: false, list: [], selected: null, error: null });
return;
}
let cancelled = false;
setOriginPorts(p => ({ ...p, loading: true, error: null }));
LB.walioSearchPorts({
country: originPlace.country,
lat: originPlace.lat, lng: originPlace.lng,
mode: 'sea', limit: 10,
}).then(ports => {
if (cancelled) return;
setOriginPorts(prev => ({
loading: false,
list: ports.slice(0, 10),
selected: prev.selected && ports.some(p => p.unCode === prev.selected.unCode)
? prev.selected
: (ports[0] || null),
error: ports.length === 0 ? STR.calc.errNoPorts : null,
}));
});
return () => { cancelled = true; };
}, [originPlace && originPlace.country, originPlace && originPlace.lat, originPlace && originPlace.lng]);
useEffect(() => {
if (!LB.walioSearchPorts) return;
if (!destPlace || !destPlace.country) {
setDestPorts({ loading: false, list: [], selected: null, error: null });
return;
}
let cancelled = false;
setDestPorts(p => ({ ...p, loading: true, error: null }));
LB.walioSearchPorts({
country: destPlace.country,
lat: destPlace.lat, lng: destPlace.lng,
mode: 'sea', limit: 10,
}).then(ports => {
if (cancelled) return;
setDestPorts(prev => ({
loading: false,
list: ports.slice(0, 10),
selected: prev.selected && ports.some(p => p.unCode === prev.selected.unCode)
? prev.selected
: (ports[0] || null),
error: ports.length === 0 ? STR.calc.errNoPorts : null,
}));
});
return () => { cancelled = true; };
}, [destPlace && destPlace.country, destPlace && destPlace.lat, destPlace && destPlace.lng]);
const labelOf = (p) => (lang === 'en') ? (p.labelEn || p.label || '') : (p.label || p.labelEn || '');
const subOf = (p) => (lang === 'en') ? (p.subEn || p.sub || '') : (p.sub || p.subEn || '');
const [leadName, setLeadName] = useState('');
const [leadEmail, setLeadEmail] = useState('');
const [leadPhone, setLeadPhone] = useState('');
const [leadCountry, setLeadCountry] = useState('+57');
// Honeypot — bots fill every visible field; this one is hidden via CSS.
const [leadHoneypot, setLeadHoneypot] = useState('');
// Single in-flight flag for the lead-submit step (covers both saveLead
// and the Walio rate fetch since they're sequenced into one user action).
const [isLeadSaving, setLeadSaving] = useState(false);
const [apiError, setApiError] = useState(null);
const [leadError, setLeadError] = useState(null);
// Walio response state
const [rates, setRates] = useState(null); // array of rate cards (null = not fetched)
const [pendingRequest, setPendingRequest] = useState(null); // { url, body }
// Form-opened timestamps used by the anti-spam time gate. Captured at
// first calc-page render and re-captured when the lead form first shows.
const calcOpenedAtRef = useRef(Date.now());
const leadOpenedAtRef = useRef(null);
useEffect(() => {
if (stage === 'lead' && leadOpenedAtRef.current == null) {
leadOpenedAtRef.current = Date.now();
}
}, [stage]);
const currentSizeKey = mode === 'rooms' ? sizeRooms
: mode === 'boxes' ? sizeBoxes : sizeType;
// `mode` is 'rooms' | 'boxes' | 'type' (the tab id) — builders + Firestore
// config use the plural 'types' for the third tab, so we translate here.
const presetGroupKey = mode === 'type' ? 'types' : mode;
const sizeTable = effective[presetGroupKey];
// When the customer flipped the Rooms tab into "Custom" mode (the 5th
// chip), we ignore the standard sizeTable lookup and synthesize a preset
// for N bedrooms via the shared module. Falls back to the default 1bed
// lookup if the shared module isn't loaded yet (e.g. defer race).
const usingCustomRooms = mode === 'rooms' && customRoomsActive
&& window.__abgsSharedCalculator
&& window.__abgsSharedCalculator.buildCustomRoomsPreset;
const rawBaseSizeMeta = usingCustomRooms
? window.__abgsSharedCalculator.buildCustomRoomsPreset(
customRoomCount, sizeTable['1bed'])
: (sizeTable[currentSizeKey] || Object.values(sizeTable)[1]);
// Container-mix override — only when the customer is on the Type tab and
// the picked preset is an FCL container (20' / 40'). The mix overrides
// the preset's single-container default with whatever combination the
// customer assembled in the stepper (e.g. 1×20' + 1×40'), then we
// rescale cbm/cuft/pieces by the total container volume relative to the
// preset's single-container baseline. Walio's body just needs the
// container map — cbm/cuft are kept consistent for the on-card summary.
// Per-container approximate volumes (CBM) used for the rescale math:
// 20' → 28 m³ baseline
// 40HC → 55 m³ baseline
const CONTAINER_CBM = { '20': 28, '40HC': 55 };
const mixTotalContainers = (mode === 'type'
&& rawBaseSizeMeta && rawBaseSizeMeta.mode === 'FCL'
&& rawBaseSizeMeta.fcl && rawBaseSizeMeta.fcl.containers)
? ((containerMix['20'] || 0) + (containerMix['40HC'] || 0)) : 0;
const baseSizeMeta = mixTotalContainers > 0 ? (() => {
const containers = {};
if ((containerMix['20'] || 0) > 0) containers['20'] = containerMix['20'];
if ((containerMix['40HC'] || 0) > 0) containers['40HC'] = containerMix['40HC'];
const totalCbm = (containerMix['20'] || 0) * CONTAINER_CBM['20']
+ (containerMix['40HC'] || 0) * CONTAINER_CBM['40HC'];
const baseCbm = Math.max(rawBaseSizeMeta.cbm || 1, 1);
const scale = totalCbm / baseCbm;
return {
...rawBaseSizeMeta,
cbm: Math.round(totalCbm),
cuft: Math.round((rawBaseSizeMeta.cuft || 0) * scale),
pieces: Math.round((rawBaseSizeMeta.pieces || 0) * scale),
fcl: { ...rawBaseSizeMeta.fcl, containers },
};
})() : rawBaseSizeMeta;
// Vehicle add-on: vehicles can't ship in LCL groupage — they need a
// dedicated container. When any vehicle is added we:
// 1. Total the cuft of vehicles (each = VEHICLE_SLOT_CUFT) + the
// preset's cuft to get household_cuft + vehicles_cuft.
// 2. Call recommendFclForCuft() to pick the container mix (may return
// 3× 40' + 1× 20' for big moves).
// 3. Promote the preset to mode: 'FCL' if it was LCL.
// The household items[] list is preserved so packages still ride in the
// same containers alongside the vehicles.
const SC = window.__abgsSharedCalculator || {};
const vehiclesCuft = relocationVehicles.reduce((s, v) => {
const def = SC.RELOCATION_VEHICLE_BY_KEY && SC.RELOCATION_VEHICLE_BY_KEY[v.type];
return s + (def ? def.cuft : 0);
}, 0);
const vehiclesKg = relocationVehicles.reduce((s, v) => {
const def = SC.RELOCATION_VEHICLE_BY_KEY && SC.RELOCATION_VEHICLE_BY_KEY[v.type];
return s + (def ? def.weightKg : 0);
}, 0);
const hasVehicles = relocationVehicles.length > 0;
const promotedToFcl = hasVehicles && baseSizeMeta.mode === 'LCL';
const sizeMeta = (hasVehicles || promotedToFcl) ? (() => {
const baseCuft = Number(baseSizeMeta.cuft) || Math.round((baseSizeMeta.cbm || 8) * 35.31);
const totalCuft = baseCuft + vehiclesCuft;
const totalCbm = SC.cuftToCbm ? SC.cuftToCbm(totalCuft) : Math.round(totalCuft / 35.31 * 100) / 100;
const containers = SC.recommendFclForCuft
? SC.recommendFclForCuft(totalCuft)
: { '20': 0, '40': 1, '40HC': 0, '45': 0 };
const mixStr = SC.formatContainersMix ? SC.formatContainersMix(containers) : '';
return {
...baseSizeMeta,
mode: 'FCL',
cbm: totalCbm,
cuft: totalCuft,
sub: (baseSizeMeta.sub || '') + (mixStr ? ' + ' + mixStr : ''),
subEn: (baseSizeMeta.subEn || baseSizeMeta.sub || '') + (mixStr ? ' + ' + mixStr : ''),
fcl: { containers },
};
})() : baseSizeMeta;
const walioMode = sizeMeta.mode; // 'FCL' | 'LCL'
// The form CTA enables once both places have a resolved country + coords
// AND both port selects have a chosen port. The rate API rejects
// city-only strings without lat/lng + benefits hugely from explicit
// port codes for pickup/drayage pricing.
const canCalculate = !!(originPlace && originPlace.country && originPlace.lat
&& destPlace && destPlace.country && destPlace.lat
&& originPorts.selected && destPorts.selected);
// Seed the container mix when the customer picks a different FCL preset
// on the Type tab. fcl-20 → { '20': 1, '40HC': 0 }; fcl-40 → reverse.
// Switching to LCL clears the mix so an old FCL count doesn't bleed in
// if they bounce back.
useEffect(() => {
if (mode !== 'type') { setContainerMix({ '20': 0, '40HC': 0 }); return; }
if (sizeType === 'fcl-20') setContainerMix({ '20': 1, '40HC': 0 });
else if (sizeType === 'fcl-40') setContainerMix({ '20': 0, '40HC': 1 });
else setContainerMix({ '20': 0, '40HC': 0 });
}, [sizeType, mode]);
// Cheapest rate after the API responds — used everywhere the result UI
// would have read the placeholder's `quote` object.
const cheapest = (rates && rates.length > 0) ? rates[0] : null;
const cheapestTotal = cheapest ? rateTotalOf(cheapest) : null;
const cheapestTransit = cheapest ? rateTransitDays(cheapest) : null;
const breakdown = cheapest ? collectBreakdown(cheapest) : [];
const quoteId = makeQuoteId(originText, destText, currentSizeKey);
// Publish state for the sticky quote bar to read. Mirrors the original
// contract — the bar listens for 'abgs:quote-update' events and reads
// window.__ABGS_QUOTE_STATE on mount.
useEffect(() => {
const state = {
originCity: originPlace ? originPlace.city : originText.split(',')[0],
destCity: destPlace ? destPlace.city : destText.split(',')[0],
destCountry: destPlace ? destPlace.country : '',
sizeLabel: labelOf(sizeMeta),
vehicle,
total: stage === 'form' ? null : cheapestTotal,
stage,
};
window.__ABGS_QUOTE_STATE = state;
window.dispatchEvent(new CustomEvent('abgs:quote-update', { detail: state }));
}, [originPlace, destPlace, originText, destText, currentSizeKey, customRoomsActive, customRoomCount, containerMix, relocationVehicles, vehicle, walioMode, stage, mode, cheapestTotal]);
// ─── Handlers ────────────────────────────────────────────────────────
//
// Flow (matches the homepage's quote widget pattern from
// components/HeroAnimated.jsx L5050+):
//
// stage='form' → onSubmitForm: build the request body, advance to 'lead'
// (no Walio call yet — same as the homepage,
// which gates the rate API behind the lead
// form so every fetch is attributable to a
// captured contact).
//
// stage='lead' → onLeadSubmit:
// 1. saveLead to Firestore (with the full requestBody)
// 2. stamp the contact into the rate payload so Walio's
// persistQuoteSession attaches it to walio_quote_sessions
// 3. POST to /v1/rates/{fcl|lcl}, sort by cheapest
// 4. patch the lead doc with the offers we'll show
// 5. advance to 'price'
// On lead-save failure: stay on 'lead' with inline error.
// On rate-fetch failure: still go to 'price', show the
// "premium custom quote" pivot
// (lead is already captured).
//
// stage='price' → terminal success: shows the locked rate + breakdown +
// WhatsApp CTA + "new quote" reset.
// Build the request body for the picked size + places + port + transport.
// Pure — no fetch. Same args shape for FCL and LCL: the builders pull the
// right defaults internally (FCL sends transport tokens raw; LCL maps
// abgroup_* → maersk_*).
const buildRequestArgs = {
origin: originPlace, dest: destPlace,
preset: sizeMeta, globals: effective.globals,
lang,
// Port codes from the auto-populated selectors.
originPortCode: originPorts.selected ? originPorts.selected.unCode : null,
destPortCode: destPorts.selected ? destPorts.selected.unCode : null,
// Inland transportation tokens from the two CY/SD radio groups.
originTransport, destinationTransport,
// ECU doorCodes when the user picked a real door from the shared
// DoorPicker (only used when transport is SD — null otherwise so
// CY flows behave exactly as before).
originDoorCode: (originTransport === 'abgroup_pickup' && originDoor
&& originDoor.code && !originDoor.isGoogleFallback) ? originDoor.code : null,
destinationDoorCode: (destinationTransport === 'abgroup_deliver' && destDoor
&& destDoor.code && !destDoor.isGoogleFallback) ? destDoor.code : null,
};
const buildRequestForCurrentForm = () => walioMode === 'FCL'
? LB.buildFCL(buildRequestArgs)
: LB.buildLCL(buildRequestArgs);
// Step 1: form → lead. Validate the form, build the request, store it
// for the lead-submit step to use, advance.
const onSubmitForm = () => {
if (!canCalculate) return;
setApiError(null);
setLeadError(null);
setRates(null);
try {
const req = buildRequestForCurrentForm();
setPendingRequest(req);
setStage('lead');
} catch (err) {
setApiError('rates_unavailable');
}
};
// Step 2: lead → price. Save the lead first (so Walio can be attributed
// to a contact even if the rate fetch fails), then fetch rates, then
// patch the lead with the offers, then show 'price'.
const onLeadSubmit = async (e) => {
e.preventDefault();
if (isLeadSaving) return;
setLeadSaving(true);
setLeadError(null);
setApiError(null);
// Re-build in case the form was edited via "Modify" between the
// first form submit and the lead submit. pendingRequest stays as a
// cache but we always trust the freshest place/size state.
let req;
try {
req = buildRequestForCurrentForm();
setPendingRequest(req);
} catch (err) {
setLeadSaving(false);
setLeadError(STR.calc.errRatesUnavailable);
return;
}
const phoneCombined = (leadCountry + ' ' + leadPhone).trim();
// Which landing variant the visitor came in on — feeds the admin's
// attribution column so we can see EN vs ES conversions.
const isES = typeof location !== 'undefined' && /mudanzas/.test(location.pathname || '');
const attribution = isES ? 'landing-mudanzas-internacionales-es'
: 'landing-international-moving-en';
const leadDoc = {
name: leadName.trim(),
email: leadEmail.trim().toLowerCase(),
company: '',
phone: phoneCombined,
// English-stable values for admin attribution consistency.
audience: 'Individual',
cargoType: 'International Move',
service: walioMode === 'FCL' ? 'Ocean FCL' : 'Ocean LCL',
mode: walioMode,
lane: {
from: (originPlace ? originPlace.description : originText) || '',
to: (destPlace ? destPlace.description : destText) || '',
},
origin: req.body.origin,
destination: req.body.destination,
cargo: req.body.cargo,
commodity: 'Personal Effects',
// Pickup choice — applies to both LCL and FCL relocations now.
// The Leads dashboard renders this row in the detail panel.
pickup: {
// Capture both transport sides in the lead doc so sales reps see at
// a glance whether the customer wants port-to-port or door-to-door.
type: originTransport === 'abgroup_pickup' ? 'door' : 'port',
destination: destinationTransport === 'abgroup_deliver' ? 'door' : 'port',
},
requestUrl: req.url,
requestBody: req.body,
source: 'landing-international-moves',
attribution,
pageUrl: typeof location !== 'undefined' ? location.href : null,
userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : null,
};
// ─── A. Save lead first — gate the API call ─────────────────────
let leadId = null;
try {
if (!(window.__abgsLeads && window.__abgsLeads.saveLead)) {
throw new Error(STR.calc.errLeadUnavailable);
}
leadId = await window.__abgsLeads.saveLead(leadDoc, {
honeypot: leadHoneypot,
formOpenedAt: leadOpenedAtRef.current || calcOpenedAtRef.current,
});
} catch (err) {
setLeadSaving(false);
setLeadError((err && err.message) ? err.message : STR.calc.errLeadSave);
return;
}
// ─── B. Fetch rates — stamp the lead onto the payload so the Walio
// quote session in walio_quote_sessions gets the contact + attribution
// (mirrors HeroAnimated.jsx L5121-5133). ──────────────────────────
const ratePayload = {
...req.body,
lead: {
name: leadDoc.name || null,
email: leadDoc.email || null,
phone: leadDoc.phone || null,
company: leadDoc.company || null,
source: leadDoc.source,
attribution: leadDoc.attribution,
pageUrl: leadDoc.pageUrl,
...(leadId ? { abgsLeadId: leadId } : {}),
},
};
let list = [];
try {
const res = await fetch(req.url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
...((window.__WALIO_API && window.__WALIO_API.authHeaders) || {}),
},
body: JSON.stringify(ratePayload),
});
if (!res.ok) throw new Error('rates_http_' + res.status);
const json = await res.json();
list = Array.isArray(json.rates) ? json.rates
: (json.data && Array.isArray(json.data.rates)) ? json.data.rates
: [];
list.sort((a, b) => (rateTotalOf(a) || Infinity) - (rateTotalOf(b) || Infinity));
if (list.length === 0) setApiError('no_rates');
} catch (err) {
// Lead is already saved — landing on 'price' shows the no-rates pivot
// (premium custom quote) so the user still has a path forward.
setApiError(err && err.message ? err.message : 'rates_unavailable');
}
setRates(list);
// ─── C. Patch the lead with the offers we'll show. Best-effort —
// failure is swallowed inside updateLeadRates. ────────────────────
if (leadId && window.__abgsLeads.updateLeadRates) {
if (list.length > 0) {
const offers = list.slice(0, 5).map(r => ({
carrier: r.carrierName || r.carrier || r.provider || null,
service: r.service || r.serviceType || null,
total: rateTotalOf(r),
currency: r.currency || 'USD',
transitDays: rateTransitDays(r),
})).filter(o => typeof o.total === 'number');
const cheapestNow = offers.length > 0 && typeof offers[0].total === 'number'
? offers[0].total : null;
window.__abgsLeads.updateLeadRates(leadId, {
rateOffers: offers,
rateOffersCount: offers.length,
cheapestTotal: cheapestNow,
currency: 'USD',
});
} else {
// Record the fact that we showed zero offers so sales sees the gap.
window.__abgsLeads.updateLeadRates(leadId, {
rateOffersCount: 0,
ratesError: (apiError || 'no_rates').toString().slice(0, 480),
});
}
}
setLeadSaving(false);
setStage('price');
};
const reset = () => {
setStage('form');
setApiError(null);
setLeadError(null);
setRates(null);
setPendingRequest(null);
// Clear the lead-opened timestamp so re-entering 'lead' resets the
// time-gate baseline (legitimate users may take >2.5s to retype).
leadOpenedAtRef.current = null;
};
// ─── Render ──────────────────────────────────────────────────────────
return (
{(stage === 'form') && (
<>
{STR.calc.headTitle}
{STR.calc.headMeta}
{/* ─── ORIGIN + DESTINATION ROUTE ──────────────────────
Each side is city/door → port → inland radios. On mobile
+ tablet the two stack vertically. On desktop (≥1025px)
they pair side-by-side via `.calc__route`'s 2-col grid —
same horizontal feel as the homepage hero's Step-5 card. */}
{/* When SD (door pickup) is selected, swap the Google Places
input for the shared ECU DoorPicker. The picker searches
Walio's /doors API and writes the selected door back as a
Place-shaped object (country/state/city/zip/lat/lng) so
the existing CalcPortSelect / request builder keep
working. Country auto-derives from originPlace.country
(preserved across CY/SD flips) with US fallback. */}
{originTransport === 'abgroup_pickup' && window.__abgsSharedDoorUi ? (
{STR.calc.labelOrigin}
{React.createElement(window.__abgsSharedDoorUi.DoorPicker, {
side: 'origin',
country: (originPlace && originPlace.country) || 'US',
onCountryChange: (code) => {
setOriginPlace({ country: code, city: '', state: '',
zip: '', lat: null, lng: null });
setOriginDoor(null);
setOriginPorts(prev => ({ ...prev,
list: [], selected: null, loading: false, error: null }));
},
seedSearch: (originPlace
&& ((originPlace.zip && /^\d{4,6}$/.test(originPlace.zip))
? originPlace.zip : originPlace.city)) || '',
selected: originDoor,
onSelect: (picked) => {
if (!picked) return;
setOriginDoor(picked.door);
setOriginPlace({
country: picked.country,
state: picked.state,
city: picked.city,
zip: picked.zip,
lat: picked.lat,
lng: picked.lng,
description: picked.door && picked.door.displayName,
});
setOriginText(picked.door && picked.door.displayName || '');
},
})}
) : (
)}
{STR.calc.originPortLabel}
setOriginPorts(prev => ({ ...prev, selected: p }))}/>
{
// Flipping back to CY clears the selected door — keeps
// the request body honest (no doorCode without intent).
if (next === 'customer_deliver') setOriginDoor(null);
setOriginTransport(next);
}}
options={[
{ value: 'customer_deliver', code: 'CY',
title: STR.calc.cyOriginTitle, desc: STR.calc.cyOriginDesc },
{ value: 'abgroup_pickup', code: 'SD',
title: STR.calc.sdOriginTitle, desc: STR.calc.sdOriginDesc },
]}/>
{/* ─── DESTINATION SIDE ───────────────────────────────
Mirror of origin: input → port → inland choice. */}
{destinationTransport === 'abgroup_deliver' && window.__abgsSharedDoorUi ? (
{STR.calc.labelDest}
{React.createElement(window.__abgsSharedDoorUi.DoorPicker, {
side: 'destination',
country: (destPlace && destPlace.country) || 'US',
onCountryChange: (code) => {
setDestPlace({ country: code, city: '', state: '',
zip: '', lat: null, lng: null });
setDestDoor(null);
setDestPorts(prev => ({ ...prev,
list: [], selected: null, loading: false, error: null }));
},
seedSearch: (destPlace
&& ((destPlace.zip && /^\d{4,6}$/.test(destPlace.zip))
? destPlace.zip : destPlace.city)) || '',
selected: destDoor,
onSelect: (picked) => {
if (!picked) return;
setDestDoor(picked.door);
setDestPlace({
country: picked.country,
state: picked.state,
city: picked.city,
zip: picked.zip,
lat: picked.lat,
lng: picked.lng,
description: picked.door && picked.door.displayName,
});
setDestText(picked.door && picked.door.displayName || '');
},
})}
) : (
)}
{STR.calc.destPortLabel}
setDestPorts(prev => ({ ...prev, selected: p }))}/>
{
if (next === 'customer_pickup') setDestDoor(null);
setDestinationTransport(next);
}}
options={[
{ value: 'customer_pickup', code: 'CY',
title: STR.calc.cyDestTitle, desc: STR.calc.cyDestDesc },
{ value: 'abgroup_deliver', code: 'SD',
title: STR.calc.sdDestTitle, desc: STR.calc.sdDestDesc },
]}/>
{/* Size selector — the tab strip above picks which catalog
(rooms / boxes / shipment-type) the grid below renders.
Tabs sit inline here (not at the card top) because they're
a sub-control of the picker, not a card-level nav. */}
setMode('rooms')} role="tab">
setMode('boxes')} role="tab">
setMode('type')} role="tab">
{mode === 'rooms' ? STR.calc.sizeLabelRooms :
mode === 'boxes' ? STR.calc.sizeLabelBoxes : STR.calc.sizeLabelType}
{STR.calc.sizeHint}
{Object.entries(sizeTable).map(([key, size]) => {
// Custom mode active → de-emphasise standard chips so the
// customer sees the stepper as the source of truth.
const isActive = !customRoomsActive && key === currentSizeKey;
const setter = mode === 'rooms' ? setSizeRooms
: mode === 'boxes' ? setSizeBoxes : setSizeType;
return (
{ setter(key); if (mode === 'rooms') setCustomRoomsActive(false); }}>
{labelOf(size)}
{subOf(size)}
);
})}
{/* Custom-rooms chip — only on the Rooms tab. Opens the
stepper below so customers with 4+ bedroom houses can
get a real quote without admin maintaining a chip
for every possible room count. */}
{mode === 'rooms' && (
setCustomRoomsActive(true)}>
{(STR.lang === 'es') ? 'Personalizado' : 'Custom'}
{(STR.lang === 'es') ? 'Más habitaciones…' : 'More rooms…'}
)}
{/* Stepper for the synthetic preset. Showing the derived CBM
and container count keeps the customer oriented — they
see exactly what shipment shape they're being quoted. */}
{mode === 'rooms' && customRoomsActive && (
{(STR.lang === 'es') ? 'Número de habitaciones' : 'Number of bedrooms'}
{(() => {
// sizeMeta is already the synthetic preset when usingCustomRooms.
const cnt = sizeMeta.fcl && sizeMeta.fcl.containers
&& sizeMeta.fcl.containers['40HC'];
const tag = cnt
? ' · ' + cnt + "× 40' HC"
: ' · LCL groupage';
return '~' + sizeMeta.cbm + ' m³' + tag;
})()}
setCustomRoomCount(c => Math.max(1, c - 1))}
style={{ width: 32, height: 32, borderRadius: 7,
background: 'transparent', border: 0, cursor: 'pointer',
color: '#475467', fontSize: 18, fontWeight: 600,
fontFamily: 'inherit', lineHeight: 1 }}>−
{customRoomCount}
setCustomRoomCount(c => Math.min(50, c + 1))}
style={{ width: 32, height: 32, borderRadius: 7,
background: 'transparent', border: 0, cursor: 'pointer',
color: '#1846B0', fontSize: 18, fontWeight: 600,
fontFamily: 'inherit', lineHeight: 1 }}>+
)}
{/* Container-mix stepper — renders on the Type tab when the
customer picks any FCL preset. Two rows (20' and 40' HC)
so they can build any combination (e.g. 1×20' + 1×40').
Floor on the sum is 1 so the form can't submit a zero-
container request. */}
{mode === 'type' && rawBaseSizeMeta && rawBaseSizeMeta.mode === 'FCL'
&& rawBaseSizeMeta.fcl && rawBaseSizeMeta.fcl.containers && (
{(STR.lang === 'es') ? 'Contenedores' : 'Containers'}
{'~' + sizeMeta.cbm + ' m³'}
{[
{ key: '20', label: (STR.lang === 'es') ? "Contenedor 20'" : "20' container", sub: '~28 m³' },
{ key: '40HC', label: (STR.lang === 'es') ? "Contenedor 40' HC" : "40' HC container", sub: '~55 m³' },
].map(row => (
setContainerMix(m => {
const next = { ...m, [row.key]: Math.max(0, (m[row.key] || 0) - 1) };
// Floor: don't let total drop below 1.
if (((next['20'] || 0) + (next['40HC'] || 0)) < 1) return m;
return next;
})}
style={{ width: 32, height: 32, borderRadius: 7,
background: 'transparent', border: 0, cursor: 'pointer',
color: '#475467', fontSize: 18, fontWeight: 600,
fontFamily: 'inherit', lineHeight: 1 }}>−
{containerMix[row.key] || 0}
setContainerMix(m => ({ ...m, [row.key]: Math.min(10, (m[row.key] || 0) + 1) }))}
style={{ width: 32, height: 32, borderRadius: 7,
background: 'transparent', border: 0, cursor: 'pointer',
color: '#1846B0', fontSize: 18, fontWeight: 600,
fontFamily: 'inherit', lineHeight: 1 }}>+
))}
)}
{/* Vehicles — same shared picker the homepage hero uses. Adding
vehicles auto-promotes the move to FCL with the right
container mix (3× 40' + 1× 20' etc.) via recommendFclForCuft.
Customers can add multiple cars / motos / boats per move. */}
{STR.calc.extrasLabel}
{(STR.lang === 'es') ? 'Auto, moto, bote — opcional' : 'Cars, motos, boats — optional'}
{window.__abgsSharedCalculator
&& React.createElement(window.__abgsSharedCalculator.RelocationVehiclePicker, {
vehicles: relocationVehicles,
onChange: setRelocationVehicles,
theme: 'landing',
})}
{/* Summary line — shows derived totals + container mix the
customer is being quoted on. Updates live as they add/remove. */}
{relocationVehicles.length > 0 && (
+ {relocationVehicles.length}
{(STR.lang === 'es') ? ' vehículo(s)' : ' vehicle(s)'}
{' · ~'}{sizeMeta.cbm}{' m³'}
{sizeMeta.fcl && sizeMeta.fcl.containers && (
→ {window.__abgsSharedCalculator
&& window.__abgsSharedCalculator.formatContainersMix(sizeMeta.fcl.containers)}
)}
)}
{/* CTA — opens the lead form. Walio is NOT called yet. */}
{STR.calc.ctaCalc}
{STR.calc.footSecure}
)}
{(stage === 'lead' || stage === 'price') && (
<>
{/* Lane + sizing header — visible on both 'lead' and 'price'
so the customer keeps context across the two screens. */}
{(originPlace ? originPlace.city : originText.split(',')[0])
|| originText} → {' '}
{(destPlace
? (destPlace.city + (destPlace.country ? ', ' + destPlace.country : ''))
: destText)}
{labelOf(sizeMeta)} · {subOf(sizeMeta)} · {walioMode}
{relocationVehicles.length > 0 && · {relocationVehicles.length}× vehicle }
{originTransport === 'abgroup_pickup' && · {STR.calc.originSdShort} }
{destinationTransport === 'abgroup_deliver' && · {STR.calc.destSdShort} }
{stage === 'price' && cheapestTotal != null
&&
{STR.calc.ratePill} }
{/* ─── Stage: lead ────────────────────────────────────────
Lead capture form — gates the rate API call. No price is
visible yet; the customer earns it by submitting contact
info. Matches the homepage hero's pattern (HeroAnimated.jsx
L5050+: saveLead → stamp onto payload → fetch). */}
{stage === 'lead' && (
)}
{/* ─── Stage: price (terminal) ────────────────────────────
Lead is already saved + the API has already responded.
Show the locked rate + breakdown + WhatsApp CTA + new-quote
reset. If the API failed or returned zero rates, pivot to
the "premium custom quote" path (lead is still captured so
the booking team can follow up). */}
{stage === 'price' && (
<>
{cheapestTotal != null ? (
<>
{/* DOOR-LEG WARNINGS — fire when the customer asked
for an SD origin or destination but the cheapest
rate's breakdown lines don't include that leg's
cost. The booking team will quote the missing leg
over WhatsApp once they confirm pickup specifics. */}
{(() => {
const wantsOriginDoor = originTransport === 'abgroup_pickup';
const wantsDestDoor = destinationTransport === 'abgroup_deliver';
const labelHasOriginPickup = breakdown.some(it =>
/origin\s+(pickup|drayage)/i.test(it.lab || ''));
const labelHasDestDelivery = breakdown.some(it =>
/destination\s+(delivery|drayage)/i.test(it.lab || ''));
const originGap = wantsOriginDoor && !labelHasOriginPickup
&& !cheapest?.hasPickup && typeof cheapest?.pickupCost !== 'number';
const destGap = wantsDestDoor && !labelHasDestDelivery
&& !cheapest?.hasDelivery && typeof cheapest?.deliveryCost !== 'number'
&& !cheapest?.hasDrayage && typeof cheapest?.drayageCost !== 'number';
if (!originGap && !destGap) return null;
const msg = originGap && destGap
? STR.calc.warnBothMissing
: originGap
? STR.calc.warnOriginMissing
: STR.calc.warnDestMissing;
return (
);
})()}
{/* RATE LIST — same RichRateCard the homepage renders
(components/rich-rate-card.jsx). Single source of
truth for the card UI; this list adds: scroll
container so long result sets don't blow the page
layout, setStats so the "Fastest" / "Free-time"
badges describe the visible set, and forwards
originTransport/destinationTransport so the card
filters its "Port-to-Port" feature chip when the
customer requested door pickup or delivery. */}
{(() => {
const RichRateCard = window.RichRateCard;
const H = window.__abgsRateHelpers || {};
if (!RichRateCard || !rates || rates.length === 0) return null;
const transits = rates
.map(r => H.rateTransitDays ? H.rateTransitDays(r) : null)
.filter(t => t && typeof t[0] === 'number')
.map(t => t[0]);
const frees = rates
.map(r => typeof r.freeDays === 'number' ? r.freeDays : null)
.filter(v => v != null);
const setStats = {
count: rates.length,
minTransit: transits.length ? Math.min(...transits) : null,
maxFree: frees.length ? Math.max(...frees) : null,
};
const containers = sizeMeta && sizeMeta.fcl && sizeMeta.fcl.containers;
return (
{rates.map((r, i) => (
))}
);
})()}
{/* Urgency — kept as a marketing element since the live
API doesn't return next-sailing dates on every response.
The date below is "today + 6 days" as soft urgency. */}
{/* Success confirmation — lead was already saved when
the user submitted the contact form one screen back.
Slimmer than the original full-width success block:
smaller checkmark, tighter padding, single-line CTA
so the WhatsApp button stays readable instead of
wrapping word-by-word at narrow widths. */}
{apiError === 'no_rates' ? STR.calc.errNoRates : STR.calc.errRatesUnavailable}
);
})()
)}
)}
)}
);
}
// ───────────────────────────────────────────────────────────────────────
// Mode-specific size icons (inline SVG) — unchanged from the design
// ───────────────────────────────────────────────────────────────────────
function SizeIcon({ mode, keyName }) {
if (mode === 'rooms') {
const beds = keyName === 'studio' ? 0 : keyName === '1bed' ? 1 : keyName === '2bed' ? 2 : 3;
return (