feat(portal): pay-later last-mile note, gated by service type

Last-mile toggle explains deferred billing (confirm containers after
Djibouti departure, sign supplementary LM contract on truck approval,
pay advance) — shown only when the service defers mile billing, not
for RAIL_CONTAINER_PAID_MILE where the mile is priced into the booking.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Hagernesh
2026-08-08 05:24:22 +00:00
parent c77f5200a3
commit e12cb78e9b
2 changed files with 38 additions and 2 deletions

View File

@@ -40,6 +40,11 @@ export function Step2ServiceType({
serviceType ?? {};
const firstMileEnabled = form.watch("firstMile.enabled");
const lastMileEnabled = form.watch("lastMile.enabled");
// The paid-mile service prices the road legs into the booking itself; every
// other service defers last-mile billing to after the Djibouti departure
// (confirm containers → sign supplementary LM contract → pay advance).
const deferredLastMileBilling =
serviceType?.code !== "RAIL_CONTAINER_PAID_MILE";
const prevServiceType = useRef(serviceType);
// Only clear a mile when the current service doesn't include it — this ran
@@ -205,7 +210,11 @@ export function Step2ServiceType({
<ServiceToggle
icon={<Truck size={18} />}
title="Last Mile — Delivery"
description="Truck delivery from the destination rail yard to the final address (Port to Door)."
description={
deferredLastMileBilling
? "Truck delivery from the destination rail yard to the final address (Port to Door). Nothing is paid now — last-mile billing starts after your train departs Djibouti."
: "Truck delivery from the destination rail yard to the final address (Port to Door)."
}
checked={field.value ?? false}
onChange={(value) => {
field.onChange(value);
@@ -224,6 +233,15 @@ export function Step2ServiceType({
>
{lastMileEnabled && (
<Box mt="md">
{deferredLastMileBilling && (
<Text size="xs" c="dimmed" mb={10}>
How it works: when your train departs Djibouti, you
will be asked to confirm which containers EDR should
deliver. Once truck availability is approved, you will
sign a short supplementary last-mile contract and pay
the delivery advance nothing is charged at booking.
</Text>
)}
<Controller
name="lastMile"
control={form.control}

View File

@@ -254,6 +254,11 @@ export function Step2ServiceType({
(serviceType?.includesLastMile ?? false) && tradeDirection !== "EXPORT";
const firstMileEnabled = form.watch("firstMile.enabled");
const lastMileEnabled = form.watch("lastMile.enabled");
// The paid-mile service prices the road legs into the booking itself; every
// other service defers last-mile billing to after the Djibouti departure
// (confirm containers → sign supplementary LM contract → pay advance).
const deferredLastMileBilling =
serviceType?.code !== "RAIL_CONTAINER_PAID_MILE";
const prevServiceType = useRef(serviceType);
useEffect(() => {
@@ -471,7 +476,11 @@ export function Step2ServiceType({
<ServiceToggle
icon={<Truck size={18} />}
title="Last Mile — Delivery"
description="Truck delivery from the destination rail yard to the final address (Port to Door)."
description={
deferredLastMileBilling
? "Truck delivery from the destination rail yard to the final address (Port to Door). Nothing is paid now — last-mile billing starts after your train departs Djibouti."
: "Truck delivery from the destination rail yard to the final address (Port to Door)."
}
checked={field.value ?? false}
onChange={(value) => {
field.onChange(value);
@@ -492,6 +501,15 @@ export function Step2ServiceType({
>
{lastMileEnabled && (
<Stack mt="md" gap={12}>
{deferredLastMileBilling && (
<Text size="xs" c="dimmed">
How it works: when your train departs Djibouti, you
will be asked to confirm which containers EDR should
deliver. Once truck availability is approved, you will
sign a short supplementary last-mile contract and pay
the delivery advance nothing is charged at booking.
</Text>
)}
<Controller
name="lastMile"
control={form.control}