Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-29 07:10:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement update train details feature: add DTO, service method, and UI modal for editing train name and run numbers

Browse Source
This commit is contained in:
Marshal
2026-07-15 20:14:39 +00:00
parent d7d9db9c3a
commit fc44eee25e
44 changed files with 970 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
apps/edr-freight-web/backoffice/src/components/trainBuilder/EditTrainDetailsModal.tsx Normal file
View File

@@ -0,0 +1,123 @@
import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
import { useMutation } from "@tanstack/react-query";
import { Pencil } from "lucide-react";
import { useEffect, useState } from "react";
import { useToast } from "@/hooks/use-toast";
import { api } from "@/services/api";
import type { BuiltTrainSummary } from "@/services/trainBuilder.service";
export interface EditTrainDetailsModalProps {
/** Train being edited; null closes the modal. */
train: BuiltTrainSummary | null;
onClose: () => void;
}
/**
* Edit a built train's display identity from the list: its name and its fixed
* import/export run numbers. Composition (yard, locomotives, wagons) is edited
* on the detail page. Number collisions come back as a 409 with the owning
* train's code and surface verbatim.
*/
const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) => {
const { toast } = useToast();
const [name, setName] = useState("");
const [importNo, setImportNo] = useState("");
const [exportNo, setExportNo] = useState("");
useEffect(() => {
if (train) {
setName(train.trainName ?? "");
setImportNo(train.importTrainNumber ?? "");
setExportNo(train.exportTrainNumber ?? "");
}
}, [train]);
const update = useMutation(api.trainBuilder.updateDetails.mutationOptions());
const handleSave = async () => {
if (!train) return;
try {
await update.mutateAsync({
id: train.id,
payload: {
trainName: name.trim(),
// Numbers cannot be cleared — only replaced; empty inputs keep the
// current value (legacy trains may have none yet).
...(importNo.trim() ? { importTrainNumber: importNo.trim() } : {}),
...(exportNo.trim() ? { exportTrainNumber: exportNo.trim() } : {}),
},
});
toast({ title: `Train ${train.code} updated` });
onClose();
} catch (err) {
const message =
(err as { response?: { data?: { message?: string } } })?.response?.data
?.message ?? "Update failed";
toast({
title: "Could not update train",
description: String(message),
variant: "destructive",
});
}
};
return (
<Modal
opened={Boolean(train)}
onClose={onClose}
title={
<Group gap={8}>
<Pencil size={16} />
<Text fw={700}>Edit train {train?.code ?? ""}</Text>
</Group>
}
centered
size="md"
radius="lg"
>
<Stack gap="md">
<TextInput
label="Train name"
placeholder="Optional display name"
value={name}
onChange={(e) => setName(e.currentTarget.value)}
maxLength={100}
radius="md"
/>
<Group grow>
<TextInput
label="Import train no."
placeholder="e.g. 8002"
value={importNo}
onChange={(e) => setImportNo(e.currentTarget.value)}
maxLength={20}
radius="md"
/>
<TextInput
label="Export train no."
placeholder="e.g. 8001"
value={exportNo}
onChange={(e) => setExportNo(e.currentTarget.value)}
maxLength={20}
radius="md"
/>
</Group>
<Group justify="flex-end" gap="sm">
<Button variant="default" onClick={onClose}>
Cancel
</Button>
<Button
color="edr-green"
loading={update.isPending}
onClick={handleSave}
>
Save
</Button>
</Group>
</Stack>
</Modal>
);
};
export default EditTrainDetailsModal;

7
apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts
View File

@@ -285,7 +285,12 @@ export const BOOKING_LIST_TABS = [
{
key: "clearance",
label: "Clearance",
statuses: ["AWAITING_DOCUMENTS", "DOCUMENTS_UNDER_REVIEW", "CLEARANCE_READY"],
statuses: [
"AWAITING_CLEARANCE_PAYMENT",
"AWAITING_DOCUMENTS",
"DOCUMENTS_UNDER_REVIEW",
"CLEARANCE_READY",
],
},
{
key: "payment",

12
apps/edr-freight-web/backoffice/src/features/contracts/contract-status.config.ts
View File

@@ -51,6 +51,10 @@ export const CONTRACT_STATUS_STYLES: Record<string, StatusStyle> = {
label: "Active",
color: "bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] border-[color:var(--freight-brand-border)]",
},
AWAITING_CLEARANCE_PAYMENT: {
label: "Clearance Fee Due",
color: "bg-orange-50 text-orange-700 border-orange-200",
},
AWAITING_CLEARANCE_DOCUMENTS: {
label: "Awaiting Documents",
color: "bg-amber-50 text-amber-700 border-amber-200",
@@ -118,6 +122,7 @@ export const CONTRACT_STATUS_COLOR: Record<string, string> = {
SIGNED_CUSTOMER: "cyan",
FULLY_EXECUTED: "indigo",
CONTRACT_ACTIVE: "edr-green",
AWAITING_CLEARANCE_PAYMENT: "orange",
AWAITING_CLEARANCE_DOCUMENTS: "yellow",
CLEARANCE_UNDER_REVIEW: "yellow",
CLEARANCE_READY_FOR_BOOKING: "edr-green",
@@ -207,6 +212,13 @@ export const CONTRACT_STATUS_META: Record<string, StatusMeta> = {
color: "text-[color:var(--freight-brand)]",
stage: 3,
},
AWAITING_CLEARANCE_PAYMENT: {
title: "Clearance Fee Due",
description:
"Customer must pay the prepaid clearance service fee before uploading documents.",
color: "text-orange-600",
stage: 3,
},
AWAITING_CLEARANCE_DOCUMENTS: {
title: "Awaiting Documents",
description: "Customer is uploading pre-booking clearance documents.",

4
apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
View File

@@ -141,6 +141,7 @@ const RATE_TRIGGERS = [
{ label: "Cancellation", value: "CANCELLATION" },
{ label: "Demurrage", value: "DEMURRAGE" },
{ label: "Shipping line extra fee (PIL)", value: "PIL_EXTRA_FEE" },
{ label: "Customs clearance service fee (prepaid)", value: "CUSTOMS_CLEARANCE" },
];
const unitOption = (value: string) => ({ label: value.replace(/_/g, " "), value });
@@ -162,6 +163,9 @@ const allowedRateUnits = (appliesTo: string, trigger: string): string[] => {
return ["PER_CONTAINER", "PER_TON"];
case "CANCELLATION":
return ["FLAT", "PER_INVOICE"];
case "CUSTOMS_CLEARANCE":
// Flat per clearance (ONE_TIME) / per shipment request (GENERAL).
return ["FLAT"];
case "CONSOLIDATION":
case "SHIPPING_LINE":
case "PIL_EXTRA_FEE":

26
apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx
View File

@@ -1,6 +1,7 @@
import type { ColumnDef } from "@edr/ui-common";
import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
import {
ActionIcon,
Badge,
Box,
Button,
@@ -15,6 +16,7 @@ import { useDebouncedValue } from "@mantine/hooks";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import {
Hammer,
Pencil,
Ruler,
Search,
Train as TrainIcon,
@@ -27,6 +29,7 @@ import { useNavigate } from "react-router-dom";
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
import BuildTrainModal from "@/components/trainBuilder/BuildTrainModal";
import EditTrainDetailsModal from "@/components/trainBuilder/EditTrainDetailsModal";
import {
directionColor,
directionRowStyle,
@@ -52,6 +55,7 @@ export default function TrainBuilderListPage() {
const [statusFilter, setStatusFilter] = useState<"ALL" | BuiltTrainStatus>("ALL");
const [yardFilter, setYardFilter] = useState("ALL");
const [buildOpen, setBuildOpen] = useState(false);
const [editTarget, setEditTarget] = useState<BuiltTrainSummary | null>(null);
const resetPage = useCallback(() => {
setPagination((prev) =>
@@ -239,6 +243,26 @@ export default function TrainBuilderListPage() {
</Badge>
),
},
{
id: "actions",
header: "",
meta: { headerClassName, cellClassName },
cell: ({ row }) => (
<ActionIcon
variant="subtle"
color="gray"
aria-label={`Edit train ${row.original.code}`}
title="Edit name & train numbers"
onClick={(e) => {
// Row click navigates to the detail page — keep the edit local.
e.stopPropagation();
setEditTarget(row.original);
}}
>
<Pencil size={15} />
</ActionIcon>
),
},
];
}, []);
@@ -363,6 +387,8 @@ export default function TrainBuilderListPage() {
onClose={() => setBuildOpen(false)}
onBuilt={(composition) => navigate(`/dashboard/train-builder/${composition.id}`)}
/>
<EditTrainDetailsModal train={editTarget} onClose={() => setEditTarget(null)} />
</PageContainer>
);
}

13
apps/edr-freight-web/backoffice/src/services/api.ts
View File

@@ -191,6 +191,7 @@ import {
type BuiltTrainListResponse,
type ScheduleConsist,
type TrainComposition,
type UpdateTrainDetailsPayload,
} from "./trainBuilder.service";
import { trainSchedulingService } from "./trainScheduling.service";
import { wagonTypesService, type WagonType } from "./wagon-types.service";
@@ -1842,6 +1843,18 @@ export const api = {
() => TRAIN_BUILDER_INVALIDATIONS,
),
updateDetails: endpoint<
{ id: string; payload: UpdateTrainDetailsPayload },
TrainComposition
>(
"train-builder",
"updateDetails",
({ id, payload }) =>
trainBuilderService.updateDetails(id, payload).then((r) => r.data),
undefined,
() => TRAIN_BUILDER_INVALIDATIONS,
),
assignWagons: endpoint<{ id: string; wagonIds: string[] }, TrainComposition>(
"train-builder",
"assignWagons",

11
apps/edr-freight-web/backoffice/src/services/trainBuilder.service.ts
View File

@@ -140,6 +140,14 @@ export interface BuildTrainPayload {
notes?: string;
}
/** Edit a built train's display identity; omitted fields keep their value. */
export interface UpdateTrainDetailsPayload {
/** Empty string clears the name. */
trainName?: string;
importTrainNumber?: string;
exportTrainNumber?: string;
}
/** Built train annotated for the schedule-creation picker. */
export interface AvailableTrain {
id: string;
@@ -241,6 +249,9 @@ export const trainBuilderService = {
build: (payload: BuildTrainPayload) => apiClient.post<TrainComposition>(BASE, payload),
setLocomotives: (id: string, locomotiveIds: string[]) =>
apiClient.put<TrainComposition>(`${BASE}/${id}/locomotives`, { locomotiveIds }),
/** Edit the train's name and fixed import/export run numbers. */
updateDetails: (id: string, payload: UpdateTrainDetailsPayload) =>
apiClient.patch<TrainComposition>(`${BASE}/${id}/details`, payload),
/** Relocate the train — coupled locomotives and wagons move with it. */
setYard: (id: string, currentYardId: string) =>
apiClient.patch<TrainComposition>(`${BASE}/${id}/yard`, { currentYardId }),

1
apps/edr-freight-web/backoffice/src/types/booking.ts
View File

@@ -28,6 +28,7 @@ export const BOOKING_STATUSES = [
"CONTRACT_ACTIVE",
"CONTRACT_CLOSED",
// Post counter-sign document-clearance gate.
"AWAITING_CLEARANCE_PAYMENT",
"AWAITING_DOCUMENTS",
"DOCUMENTS_UNDER_REVIEW",
"CLEARANCE_READY",

12
apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx
View File

@@ -14,6 +14,7 @@ import { useNavigate } from "react-router-dom";
import type { Freight } from "@edr/types";
import { PayClearanceFeeButton } from "@/pages/bookings/payments/PayClearanceFeeButton";
import { PayNowButton } from "@/pages/bookings/payments/PayNowButton";
import { api } from "@/services/api";
import { ContractClearanceAction } from "./ContractClearanceAction";
@@ -69,6 +70,17 @@ export function ContractCustomerAction({
);
}
if (action.type === "pay-clearance") {
return (
<PayClearanceFeeButton
sourceId={action.contractId}
currency={contract.paymentCurrency}
label={action.label}
size={size}
/>
);
}
if (action.type === "initiate") {
return (
<InitiateBookingButton

19
apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts
View File

@@ -80,6 +80,14 @@ export type ContractCustomerAction =
label: string;
primary: boolean;
icon: LucideIcon;
}
| {
/** Prepaid customs clearance service fee (contract-level, ONE_TIME Path B). */
type: "pay-clearance";
contractId: string;
label: string;
primary: boolean;
icon: LucideIcon;
};
function findPayableBookingForContract(
@@ -137,6 +145,17 @@ export function deriveContractCustomerAction(
};
}
// Prepaid clearance service fee gate — must settle before document upload.
if (contract.status === "AWAITING_CLEARANCE_PAYMENT") {
return {
type: "pay-clearance",
contractId: id,
label: "Pay clearance fee",
primary: true,
icon: CreditCard,
};
}
const payable = findPayableBookingForContract(id, bookings);
if (payable) {
return {

27
apps/edr-freight-web/portal/src/pages/MyPortalPage/actions.ts
View File

@@ -6,7 +6,7 @@ import { contractNeedsClearanceAction } from "@/components/customer-actions/deri
export interface ActionItem {
id: string;
/** What the customer must do — drives the icon, label and modal. */
kind: "clearance" | "duty" | "sign" | "book" | "pay";
kind: "clearance" | "duty" | "sign" | "book" | "pay" | "clearance-fee";
/** The contract/booking reference for display. */
reference: string;
/** Short human description of the action. */
@@ -40,6 +40,18 @@ export function deriveActionItems(
});
continue;
}
// Prepaid clearance service fee (Path B) — blocks the document step.
if (c.status === "AWAITING_CLEARANCE_PAYMENT") {
items.push({
id: `clearance-fee-${c.id}`,
kind: "clearance-fee",
reference: c.reference,
description: "Clearance service fee due — pay to unlock document upload",
targetId: c.id,
urgent: true,
});
continue;
}
const clr = contractNeedsClearanceAction(c);
if (clr.show) {
items.push({
@@ -70,6 +82,19 @@ export function deriveActionItems(
}
for (const b of bookings) {
// Per-shipment clearance service fee (GENERAL + customs shipment request).
if (b.status === "AWAITING_CLEARANCE_PAYMENT") {
items.push({
id: `clearance-fee-${b.id}`,
kind: "clearance-fee",
reference: b.reference,
description:
"Clearance service fee due for this shipment — pay to unlock document upload",
targetId: b.id,
urgent: true,
});
continue;
}
const isGeneral = b.bookingType === "GENERAL_CONTRACT";
const canPay =
b.paymentStatus !== "PAID" &&

15
apps/edr-freight-web/portal/src/pages/MyPortalPage/components/ActionNeededSection.tsx
View File

@@ -39,6 +39,7 @@ const KIND_META: Record<
sign: { icon: FileSignature, label: "Sign", color: "blue" },
book: { icon: PackagePlus, label: "Book", color: "violet" },
pay: { icon: CreditCard, label: "Payment", color: "orange" },
"clearance-fee": { icon: CreditCard, label: "Clearance fee", color: "orange" },
};
export interface ActionNeededSectionProps {
@@ -137,9 +138,14 @@ export function ActionNeededSection({
// Billing is invoice-centric — resolve the booking's currently payable
// invoice before paying it (mirrors ReadonlyBookingView).
// A "pay" item settles the booking invoice; a "clearance-fee" item settles the
// prepaid clearance-fee invoice (source `clearance`, keyed by contract or
// booking id depending on where the gate sits).
const payItemSource = payItem?.kind === "clearance-fee" ? "clearance" : "booking";
const { data: payItemInvoices = [] } = useQuery({
queryKey: ["booking-invoices", payItem?.targetId],
queryFn: () => invoicesService.listForSource("booking", payItem!.targetId),
queryKey: [`${payItemSource}-invoices`, payItem?.targetId],
queryFn: () =>
invoicesService.listForSource(payItemSource, payItem!.targetId),
enabled: payItem !== null,
});
const payableInvoiceId = payItemInvoices.find((inv) =>
@@ -182,6 +188,7 @@ export function ActionNeededSection({
navigate(`/contracts/${item.targetId}`);
break;
case "pay":
case "clearance-fee":
setPayItem(item);
break;
case "sign":
@@ -277,7 +284,9 @@ export function ActionNeededSection({
>
{item.kind === "pay"
? "Pay now"
: item.kind === "duty"
: item.kind === "clearance-fee"
? "Pay clearance fee"
: item.kind === "duty"
? "Pay duty & upload slip"
: item.kind === "sign"
? "Sign"

13
apps/edr-freight-web/portal/src/pages/MyPortalPage/constants.ts
View File

@@ -165,6 +165,19 @@ export const STATUS_CONFIG: Record<string, StageConfig> = {
badgeDot: "edr-green.5",
action: { label: "View", kind: "outline" },
},
AWAITING_CLEARANCE_PAYMENT: {
stage: 3,
icon: Wallet,
iconColor: "edr-amber-text",
tile: "edr-amber-soft",
hint: "Clearance service fee due · pay to unlock document upload",
step: "edr-accent",
badgeLabel: "Clearance fee due",
badgeBg: "edr-amber-soft",
badgeText: "edr-amber-text",
badgeDot: "edr-accent",
action: { label: "Pay clearance fee", kind: "amber", icon: ArrowRight },
},
AWAITING_DOCUMENTS: {
stage: 3,
icon: FileUp,

27
apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
View File

@@ -1,4 +1,4 @@
import { Group, Tabs } from "@mantine/core";
import { Group, Paper, Tabs, Text } from "@mantine/core";
import { useMutation, useQuery } from "@tanstack/react-query";
import { CreditCard, FileText, LayoutGrid } from "lucide-react";
import { useState } from "react";
@@ -12,6 +12,7 @@ import { isPayable } from "@/pages/billing/invoice-ui";
import type { Freight } from "@edr/types";
import { ApproveDeliveryButton } from "../delivery/ApproveDeliveryButton";
import { PayClearanceFeeButton } from "../payments/PayClearanceFeeButton";
import { ActivityCard } from "./components/ActivityCard";
import { ClearanceCard } from "./components/ClearanceCard";
import { DocumentsTab } from "./components/DocumentsTab";
@@ -139,6 +140,8 @@ export function ReadonlyBookingView({
const isCustoms = Boolean(booking.customsClearingEnabled);
const canSelfRebook = !isCustoms;
const isPendingConsolidation = status === "PENDING_CONSOLIDATION";
// Prepaid clearance service fee gate — document upload stays locked until paid.
const isAwaitingClearanceFee = status === "AWAITING_CLEARANCE_PAYMENT";
const isClearance = [
"AWAITING_DOCUMENTS",
"DOCUMENTS_UNDER_REVIEW",
@@ -237,6 +240,28 @@ export function ReadonlyBookingView({
<div className="flex flex-col gap-6">
<ContractCard booking={booking} />
{isAwaitingClearanceFee && (
<Paper withBorder radius="lg" p="lg" style={{ borderColor: "#FDE68A", background: "#FFFBEB" }}>
<Group justify="space-between" align="center" wrap="wrap" gap="md">
<div>
<Text fw={700} fz={15} c="#92400E">
Customs clearance service fee due
</Text>
<Text fz={13} c="#B45309" mt={4}>
Pay the clearance service fee to unlock the clearance
document upload. Global Logistics starts working on your
shipment once the fee is settled.
</Text>
</div>
<PayClearanceFeeButton
sourceId={booking.id}
currency={booking.paymentCurrency}
size="md"
/>
</Group>
</Paper>
)}
{isClearance && <ClearanceCard booking={booking} />}
<BodyGrid

16
apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionButton.tsx
View File

@@ -3,6 +3,7 @@ import { useDisclosure } from "@mantine/hooks";
import {
AlertCircle,
ArrowRight,
CreditCard,
PackagePlus,
PencilLine,
Upload,
@@ -11,6 +12,7 @@ import { useNavigate } from "react-router-dom";
import type { Freight } from "@edr/types";
import { PayClearanceFeeButton } from "@/pages/bookings/payments/PayClearanceFeeButton";
import { ResubmitBookingModal } from "@/pages/bookings/resubmit/ResubmitBookingModal";
import { BookingActionModal } from "./BookingActionModal";
@@ -23,6 +25,7 @@ const ICON_BY_KIND: Record<
BookingActionKind,
typeof Upload
> = {
PAY_CLEARANCE: CreditCard,
UPLOAD_DOCUMENTS: Upload,
FIX_DOCUMENTS: AlertCircle,
SCHEDULE_OPERATION: ArrowRight,
@@ -56,6 +59,19 @@ export function BookingActionButton({
if (!isChangesRequested && !action) return null;
// The prepaid clearance service fee has its own payment flow (method modal +
// provider redirect) — delegate to the self-contained pay button.
if (action?.kind === "PAY_CLEARANCE") {
return (
<PayClearanceFeeButton
sourceId={booking.id}
currency={booking.paymentCurrency}
label={action.label}
size={size}
/>
);
}
const Icon = action ? ICON_BY_KIND[action.kind] : PencilLine;
const label = action ? action.label : "Update & resubmit";
// BOOK navigates to the booking form (cargo + day + window check) — the

6
apps/edr-freight-web/portal/src/pages/bookings/clearance/bookingNextAction.ts
View File

@@ -7,6 +7,7 @@ import type { Freight } from "@edr/types";
* to operation.
*/
export type BookingActionKind =
| "PAY_CLEARANCE" // AWAITING_CLEARANCE_PAYMENT — pay the prepaid clearance service fee
| "UPLOAD_DOCUMENTS" // AWAITING_DOCUMENTS — upload the required clearance docs
| "FIX_DOCUMENTS" // DOCUMENTS_UNDER_REVIEW — some docs queried, re-upload them
| "SCHEDULE_OPERATION" // CLEARANCE_READY (legacy with cargo) — pick a day and proceed
@@ -23,6 +24,11 @@ export interface BookingNextAction {
}
const ACTION_BY_STATUS: Record<string, BookingNextAction> = {
AWAITING_CLEARANCE_PAYMENT: {
kind: "PAY_CLEARANCE",
label: "Pay clearance fee",
title: "Pay the clearance service fee",
},
AWAITING_DOCUMENTS: {
kind: "UPLOAD_DOCUMENTS",
label: "Upload documents",

133
apps/edr-freight-web/portal/src/pages/bookings/payments/PayClearanceFeeButton.tsx Normal file
View File

@@ -0,0 +1,133 @@
import { Button, type ButtonProps } from "@mantine/core";
import { useMutation, useQuery } from "@tanstack/react-query";
import { CreditCard } from "lucide-react";
import { useState } from "react";
import { ModalSafeWrapper } from "@/components/customer-actions/ModalSafeWrapper";
import { isPayable } from "@/pages/billing/invoice-ui";
import { api } from "@/services/api";
import { invoicesService } from "@/services/invoices.service";
import {
paymentsService,
type PaymentMethod,
} from "@/services/payments.service";
import { PaymentMethodModal } from "../BookingDetailPage/components/PaymentMethodModal";
/**
* Payment flow for the prepaid customs clearance service fee. The fee is its
* own `clearance`-source invoice — sourceId is the contract id (ONE_TIME,
* contract status AWAITING_CLEARANCE_PAYMENT) or the booking id (GENERAL
* shipment request, booking status AWAITING_CLEARANCE_PAYMENT). Paying it
* unlocks the clearance document upload; same modal + provider redirect as
* booking payment.
*/
export function useClearanceFeePayment(sourceId: string) {
const [modalOpen, setModalOpen] = useState(false);
const { data: invoices = [] } = useQuery({
queryKey: ["clearance-invoices", sourceId],
queryFn: () => invoicesService.listForSource("clearance", sourceId),
enabled: Boolean(sourceId),
});
const payableInvoice = invoices.find((inv) => isPayable(inv.status)) ?? null;
const mutation = useMutation({
mutationFn: (method: PaymentMethod) => {
if (!payableInvoice) {
throw new Error(
"No payable clearance-fee invoice found yet. Please refresh or contact support.",
);
}
return api.invoices.pay.call({
id: payableInvoice.id,
payload: { method, platform: "web" },
});
},
onSuccess: (data, method) => {
const redirectUrl =
data?.clientAction?.type === "REDIRECT" && data.clientAction.url
? data.clientAction.url
: paymentsService.checkoutUrlForInvoice({
invoiceId: payableInvoice!.id,
method,
});
window.location.href = redirectUrl;
},
});
const close = () => {
if (!mutation.isPending) {
setModalOpen(false);
mutation.reset();
}
};
return {
invoice: payableInvoice,
modalOpen,
open: () => setModalOpen(true),
close,
processing: mutation.isPending,
error: mutation.isError
? mutation.error instanceof Error
? mutation.error.message
: "Could not start payment. Please try again."
: null,
confirm: (method: PaymentMethod) => mutation.mutate(method),
};
}
interface PayClearanceFeeButtonProps {
/** Contract id (ONE_TIME) or booking id (GENERAL shipment) the fee bills. */
sourceId: string;
/** Fallback currency while the invoice is loading. */
currency?: string;
label?: string;
size?: ButtonProps["size"];
fullWidth?: boolean;
}
/** Self-contained "Pay clearance fee" action — modal in place, no navigation. */
export function PayClearanceFeeButton({
sourceId,
currency,
label = "Pay clearance fee",
size = "xs",
fullWidth,
}: PayClearanceFeeButtonProps) {
const pay = useClearanceFeePayment(sourceId);
return (
<ModalSafeWrapper>
<Button
size={size}
radius="md"
fw={700}
fz={13}
color="edr-green"
fullWidth={fullWidth}
leftSection={<CreditCard size={14} />}
onClick={(e) => {
e.stopPropagation();
pay.open();
}}
>
{label}
</Button>
<PaymentMethodModal
opened={pay.modalOpen}
onClose={pay.close}
amountLabel={
pay.invoice
? `${Number(pay.invoice.totalAmount).toLocaleString()} ${pay.invoice.currency}`
: undefined
}
currency={pay.invoice?.currency ?? currency}
processing={pay.processing}
error={pay.error}
onConfirm={pay.confirm}
/>
</ModalSafeWrapper>
);
}

17
apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
View File

@@ -72,6 +72,7 @@ import { ContractClearancePanel } from "./ContractClearancePanel";
import { ContractClearanceWorkflowBanner } from "./ContractClearanceWorkflowBanner";
import { ClearanceUploadedDocumentsPanel } from "@/components/contracts/ClearanceUploadedDocumentsPanel";
import { InitiateBookingButton } from "@/components/customer-actions/ContractCustomerAction";
import { PayClearanceFeeButton } from "@/pages/bookings/payments/PayClearanceFeeButton";
import { formatRateUnit } from "./new-contract-form/unit-rates";
import { getContractBookingAction } from "./contract-booking-action";
import { closedWindowMessage, hasOpenWindow } from "./booking-window";
@@ -396,6 +397,9 @@ export default function ContractDetailPage() {
// clearance is finalized.
const canUploadClearance =
CLEARANCE_UPLOAD_STATUSES.includes(contract.status) && !clearanceFinalized;
// Prepaid clearance service fee gate (Path B) — the document step stays
// locked until the fee invoice settles.
const awaitingClearanceFee = contract.status === "AWAITING_CLEARANCE_PAYMENT";
return (
<Box style={{ padding: "28px 32px 40px" }}>
@@ -531,6 +535,13 @@ export default function ContractDetailPage() {
Global Logistics is creating your booking
</Badge>
)}
{awaitingClearanceFee && (
<PayClearanceFeeButton
sourceId={contract.id}
currency={contract.paymentCurrency}
size="md"
/>
)}
{canUploadClearance && (
<Button
color="edr-green"
@@ -875,6 +886,12 @@ export default function ContractDetailPage() {
{item.containerSize}
</Text>
)}
{item.isClearance && (
<Text fz={12} c="orange.7" fw={600}>
Paid in advance, before clearance — excluded from
shipment invoices
</Text>
)}
</Box>
<Text fz={14} fw={700} style={{ color: GREEN }}>
{(item.unitPrice ?? 0).toLocaleString()} {pricing.currency}{" "}

6
apps/edr-freight-web/portal/src/pages/contracts/NewContractPage.tsx
View File

@@ -1005,6 +1005,12 @@ export default function NewContractPage({
{item.containerSize}
</Text>
)}
{item.isClearance && (
<Text size="xs" c="orange.7" fw={600}>
Paid in advance, before clearance — not part of your
shipment booking invoice
</Text>
)}
</Box>
<Text
size="sm"

5
apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
View File

@@ -51,10 +51,11 @@ export default function NewShipmentRequestPage() {
contractsService.submitBookingRequest(id!, dto),
onSuccess: (request) => {
// Clearance-first flow: the request auto-initiates a booking instance —
// send the customer straight to it to upload clearance documents.
// send the customer straight to it. The clearance service fee is due
// first; document upload unlocks once it settles.
if (request.createdBookingId) {
toast.success(
"Shipment initiated — upload your clearance documents to start the review.",
"Shipment initiated — pay the clearance service fee to unlock the document upload.",
);
navigate(`/bookings/${request.createdBookingId}`);
} else {

4
apps/edr-freight-web/portal/src/pages/contracts/contract-ui.tsx
View File

@@ -125,6 +125,10 @@ export const CONTRACT_STATUS_CONFIG: Record<
FULLY_EXECUTED: { label: "Fully Executed", ...TONE.success },
CONTRACT_ACTIVE: { label: "Active", ...TONE.success },
// ── Path B pre-booking clearance (contract-level) ──
AWAITING_CLEARANCE_PAYMENT: {
label: "Clearance Fee Due",
...TONE.warning,
},
AWAITING_CLEARANCE_DOCUMENTS: {
label: "Upload Clearance Docs",
...TONE.warning,