)}
{/* For Steps 2-4 the back face overlays the front via
absolute positioning so the 3D flip works. Step 5
content is much taller — render in normal flow so
the page extends naturally. */}
);
}
// ——— Step indicator — 4 dots, current dot is the gradient blue pill ———
function StepDots({ step, total = 5 }) {
const dots = Array.from({ length: total }, (_, i) => i + 1);
return (
{dots.map(n => {
const active = n === step;
const done = n < step;
return (
);
})}
Step {step} of {total}
);
}
// ——— Step 2 — Business vs Individual ————————————————————————
function AudienceSelectGlass({ onPick, onClose }) {
return (
{/* Header */}
Who is shipping?
Step 2 of 5 · helps tailor the quote
{/* Two large picker cards */}
{AUDIENCES.map(a => (
onPick(a.key)}/>
))}
{/* Footer — same trust row as the quote face */}
No signup
Quote stays private
SOC 2 · C-TPAT · NVOCC
);
}
// ——— Step 3 — Service / transport mode ————————————————————————
function ServiceSelectGlass({ audience, onPick, onBack, onClose }) {
const aud = AUDIENCES.find(a => a.key === audience);
return (
{/* Header */}
Pick a service
{aud ? `${aud.name} · ` : ''}Step 3 of 5
{/* 5-up service grid */}
{SERVICES.map(s => (
onPick(s.key)}/>
))}
{/* Footer */}
Live rates
40+ carriers
SOC 2 · C-TPAT · NVOCC
);
}
// Large picker card used on step 2 (audience).
function PickerCard({ icon, title, tag, desc, onClick }) {
const [hover, setHover] = useStateH(false);
return (
);
}
// Compact tile used on step 3 (service / transport mode).
function ServiceTile({ icon, title, tag, onClick }) {
const [hover, setHover] = useStateH(false);
return (
);
}
// Mirror the booking-form incoterm derivations so the homepage widget sends
// the same Incoterm the customer-portal would compute for the same toggle
// combo. Source of truth: AIRBookingForm.jsx and LCLBookingForm.jsx in the
// abgroupshipping-login customer portal.
function calculateAirIncoterm(originTransport, destinationTransport) {
if (originTransport === 'customer_deliver' && destinationTransport === 'customer_pickup') return 'FCA';
if (originTransport === 'customer_deliver' && destinationTransport === 'abgroup_deliver') return 'CPT';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'customer_pickup') return 'EXW';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'abgroup_deliver') return 'DDP';
return 'FCA';
}
function calculateLCLIncoterm(originTransport, destinationTransport) {
if (originTransport === 'customer_deliver' && destinationTransport === 'customer_pickup') return 'FCA';
if (originTransport === 'customer_deliver' && destinationTransport === 'abgroup_deliver') return 'CIF';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'customer_pickup') return 'EXW';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'abgroup_deliver') return 'DAP';
return 'FCA';
}
function calculateFCLIncoterm(originTransport, destinationTransport) {
if (originTransport === 'customer_deliver' && destinationTransport === 'customer_pickup') return 'FOB';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'customer_pickup') return 'EXW';
if (originTransport === 'customer_deliver' && destinationTransport === 'abgroup_deliver') return 'CIF';
if (originTransport === 'abgroup_pickup' && destinationTransport === 'abgroup_deliver') return 'DDP';
return 'FOB';
}
const FCL_INCOTERM_DESC = {
FOB: 'Port-to-Port: You arrange delivery to origin port and pickup from destination port',
EXW: 'Door-to-Port: AB Group picks up at your facility; you arrange pickup at destination port',
CIF: 'Port-to-Door: You arrange delivery to origin port; AB Group delivers to your facility',
DDP: 'Door-to-Door: AB Group handles pickup at origin and delivery at destination',
};
// ECU Worldwide proxy — same Firebase Cloud Function the customer portal
// hits (`abgroupshipping-login/src/services/ecuWorldwideAPI.js`). Open CORS,
// no auth, returns both ports and door locations. Used by the FCL flow to
// surface ECU-formatted UN/LOCODEs (USHOU, COCTG, …) and door-location
// codes so the rate request mirrors the booking form.
const ECU_PROXY_URL = 'https://us-central1-abgs-calculadora.cloudfunctions.net/ecuProxy/locations/search';
async function ecuSearchLocations(name, dep, countryCode) {
const place = (name || '').trim();
if (place.length < 3) return { ports: [], doors: [] };
const params = new URLSearchParams({
place, productType: 'FCL', dep: dep || 'E', isPartialName: 'true',
});
try {
const res = await fetch(`${ECU_PROXY_URL}?${params.toString()}`);
if (!res.ok) return { ports: [], doors: [] };
const json = await res.json();
const all = (json && json.success && Array.isArray(json.data)) ? json.data : [];
const filtered = countryCode
? all.filter(loc => (loc.countryCode || '').toUpperCase() === countryCode.toUpperCase())
: all;
const ports = filtered
.filter(loc => loc.isPort === true && loc.isDoorLocation !== true)
.map(loc => ({ unCode: loc.unCode, portName: loc.name || loc.unCode,
countryCode: loc.countryCode || '', zipCode: loc.zipCode || '' }));
const doors = filtered
.filter(loc => loc.isDoorLocation === true || (!!loc.zipCode && !loc.isPort))
.map(loc => {
const display = loc.name || loc.unCode || '';
const zipMatch = String(loc.zipCode || display).match(/\b(\d{5})\b/);
return {
code: loc.unCode || display,
displayName: display,
countryCode: loc.countryCode || '',
zipCode: zipMatch ? zipMatch[1] : '',
};
});
return { ports, doors };
} catch {
return { ports: [], doors: [] };
}
}
// Compact selector card used for both port (CY) and door-location (SD)
// pickers in the FCL flow. Shows the currently selected option as a
// pill-style row; clicking opens a dropdown of alternates. Both pickers
// share styling so origin / destination columns line up cleanly.
function FCLLocationSelector({ kind, label, loading, options, selected,
onSelect, onSearch, searchValue, error,
placeholder }) {
const [open, setOpen] = useStateH(false);
const wrapRef = useRefH(null);
useEffectH(() => {
if (!open) return;
const onDoc = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
const isDoor = kind === 'door';
const summary = selected
? (isDoor ? selected.displayName : `${selected.unCode} · ${(selected.portName || '').replace(/^[A-Z]{5}\s*,\s*/, '')}`)
: '';
return (
);
}
// Container specs mirror FCLBookingForm.jsx in the customer portal so the
// quote widget surfaces the exact same dims / payload limits the booking
// stage will display later.
const FCL_CONTAINERS = [
{ code: '20', title: "20' STANDARD", dims: "20' × 8' × 8.6'", cbm: 33, kg: 28200 },
{ code: '40', title: "40' STANDARD", dims: "40' × 8' × 8.6'", cbm: 67, kg: 26700 },
{ code: '40HC', title: "40' HIGH CUBE", dims: "40' × 8' × 9.6'", cbm: 76, kg: 26420 },
{ code: '45', title: "45' HIGH CUBE", dims: "45' × 8' × 9.6'", cbm: 86, kg: 27600 },
];
// Per-side inland transportation picker for the FCL flow. Two stacked radio
// cards (CY = port/inland — customer arranges, SD = store door — AB Group
// arranges). Together both sides drive the displayed Incoterm.
function InlandTransportColumn({ label, value, onChange, options }) {
return (
{label}
{options.map(opt => {
const active = value === opt.value;
return (
);
})}
);
}
// Container quantity card used in the FCL container grid. Stepper floors at
// 0 and ceilings at 20; cards highlight green once at least one is added.
function FCLContainerCard({ spec, count, onChange }) {
const active = count > 0;
const dec = () => onChange(Math.max(0, count - 1));
const inc = () => onChange(Math.min(20, count + 1));
return (
{spec.title}
{spec.dims} {spec.cbm} CBM / {spec.kg.toLocaleString()} kg
{count}
);
}
// Two-option segmented toggle used for origin/destination transport, kg/lbs,
// cm/in. Mirrors the Walio AIR/LCL location-selector pattern.
function QuoteSegmented({ label, value, onChange, options }) {
// Label now sits INSIDE the white card so it's always readable, even
// when the widget overlays the globe scene on mobile (where there's
// no separate side-card to host it).
return (