From e12cb78e9b42c2bd74ee5f5e2aba0932a31099d4 Mon Sep 17 00:00:00 2001
From: Hagernesh <hagernesh@example.com>
Date: Sat, 8 Aug 2026 05:24:22 +0000
Subject: [PATCH] feat(portal): pay-later last-mile note, gated by service type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../new-booking-form/step2-service-type.tsx   | 20 ++++++++++++++++++-
 .../new-contract-form/step2-service-type.tsx  | 20 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
index 64653abe3..47e80e7e2 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
@@ -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}
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step2-service-type.tsx b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step2-service-type.tsx
index de227035f..cbd2c8913 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step2-service-type.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step2-service-type.tsx
@@ -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}