feat(portal): show payer account note and train number on booking windows

apps/edr-freight-web/portal/src/pages/MyPortalPage/components/UpcomingWindowsSection.tsx

@@ -321,6 +321,19 @@ export const UpcomingWindowsSection = memo(function UpcomingWindowsSection({
                       </Text>
                     </Fragment>
                   ))}
+                  {w.trainNumber && (
+                    <Text
+                      fz={13}
+                      fw={700}
+                      style={{
+                        color: INK,
+                        flexShrink: 0,
+                        fontVariantNumeric: "tabular-nums",
+                      }}
+                    >
+                      Train {w.trainNumber}
+                    </Text>
+                  )}
                   {w.reference && (
                     <Text
                       fz={11}
@@ -338,7 +351,8 @@ export const UpcomingWindowsSection = memo(function UpcomingWindowsSection({
                 <Group gap={5} wrap="nowrap" mt={2}>
                   <CalendarClock size={12} color={MUTED} style={{ flexShrink: 0 }} />
                   <Text fz={12} style={{ color: MUTED }} truncate>
-                    {windowLabel(w)} · Departs {fmtDay(w.departureDate)}
+                    {windowLabel(w)} · Departs {fmtDay(w.departureDate)},{" "}
+                    {fmtTime(w.departureDate)}
                   </Text>
                 </Group>
                 {(() => {

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/BookingPaymentPanel.tsx

@@ -18,6 +18,7 @@ import { invoicesService, type PortalInvoice } from "@/services/invoices.service
 import { InvoiceStatusBadge, titleCase } from "@/pages/billing/invoice-ui";
 import { paymentStatusLabel } from "@/pages/bookings/booking-display";
 import { isUsdOfflineBooking } from "@/pages/bookings/payments/offline-payment";
+import { PayerAccountNote } from "@/pages/bookings/payments/PayerAccountNote";
 import { payWindowState } from "@/pages/bookings/payments/payment-drain";
 import { PaymentProcessingNotice } from "@/pages/bookings/payments/PaymentProcessingNotice";
 import { saveBlob } from "@/utils/download";
@@ -321,6 +322,7 @@ export function BookingPaymentPanel({
             onPay={offlineUsd ? undefined : onPay}
             paying={paying}
           />
+          {!paid && <PayerAccountNote />}
           {showConsolidationNote && (
             <Text mt={12} fz="12px" c="#9AA8B5" lh={1.5}>
               This shipment shares a wagon with a consolidation partner — both

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/PaymentMethodModal.tsx

@@ -13,6 +13,7 @@ import { Check, Landmark, ShieldCheck } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 
 import type { InvoicePaymentFlow } from "@/hooks/useInvoicePayment";
+import { PayerAccountNote } from "@/pages/bookings/payments/PayerAccountNote";
 import type { PaymentMethod } from "@/services/payments.service";
 
 interface ProviderOption {
@@ -306,6 +307,8 @@ export function PaymentMethodModal({
             </Text>
           )}
 
+          <PayerAccountNote />
+
           <Text mt={14} fz="11.5px" c="#9AA8B5">
             This page updates automatically once CBE confirms your payment.
           </Text>
@@ -449,6 +452,8 @@ export function PaymentMethodModal({
             </Text>
           </Group>
         )}
+
+        <PayerAccountNote />
       </Box>
 
       {/* Provider options */}

apps/edr-freight-web/portal/src/pages/bookings/payments/PayerAccountNote.tsx

@@ -0,0 +1,39 @@
+import { Box, Text } from "@mantine/core";
+
+import useAuth from "@/hooks/useAuth";
+
+/**
+ * Red payer-identity warning shown wherever the customer is about to pay:
+ * the transfer must come from a bank account held in the company's registered
+ * name, otherwise Finance will not recognize the payment as paid.
+ */
+export function PayerAccountNote() {
+  const { company } = useAuth();
+  const name = company?.company?.name;
+
+  return (
+    <Box
+      mt={12}
+      p={12}
+      style={{
+        borderRadius: 10,
+        backgroundColor: "#FDEDEB",
+        border: "1px solid #F5C6C0",
+      }}
+    >
+      <Text fz="12.5px" fw={700} c="#C0392B" lh={1.55}>
+        Pay only from a bank account registered under your company name
+        {name ? (
+          <>
+            {" — "}
+            <Text span fw={800} c="#A93226">
+              {name}
+            </Text>
+          </>
+        ) : null}
+        . A payment sent from an account under any other name will not be
+        recognized as paid.
+      </Text>
+    </Box>
+  );
+}

apps/edr-freight-web/portal/src/services/bookings.service.ts

@@ -77,6 +77,8 @@ export interface MyBookingWindow {
   scheduleId: string;
   /** Train schedule reference (e.g. TS-2026-000123), shown on the window card. */
   reference: string | null;
+  /** Operational run number (e.g. 8001 import / 8002 export), when staff set one. */
+  trainNumber: string | null;
   /**
    * The customer's active contract on this lane, when they hold one — enables
    * "Book now" to target it. Null for lanes they have no contract on.