Tria/edr-platform
1
0
Fork 0
mirror of https://github.com/Tria-plc/edr-platform.git synced 2026-08-26 18:42:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(bookings): Consolidate and remove steps for streamlined booking flow

Browse Source
This commit is contained in:
ghost2023
2026-05-29 13:08:27 +03:00
parent 14f73f0c79
commit b58e2ee2be
12 changed files with 557 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/edr-freight-web/portal/src/pages/bookings/NewBookingPage.tsx
View File

@@ -1,15 +1,14 @@
import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";
import { Check, CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@edr/ui-common";
import Breadcrumbs from "@/components/Breadcrumbs";
import { api } from "@/services/api";
import type { CreateBookingPayload } from "@/services/bookings.service";
import {
MOCK_VALID_CONTRACTS,
STEPS,
bookingFormSchema,
calcWagons,
@@ -22,11 +21,8 @@ import { StepIndicator } from "./new-booking-form/StepIndicator";
import {
Step1ContractType,
Step2ServiceType,
Step3FirstLastMile,
Step4Route,
Step5CargoDetails,
Step6WagonAllocation,
Step7Documents,
Step8Review,
} from "./new-booking-form/steps";
import useAuth from "@/hooks/useAuth";
@@ -35,8 +31,6 @@ export default function NewBookingPage() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [step, setStep] = useState(1);
const [renewalValidating, setRenewalValidating] = useState(false);
const [renewalValid, setRenewalValid] = useState<boolean | null>(null);
const { customer } = useAuth();
const createMutation = useMutation({
mutationFn: (payload: CreateBookingPayload) =>
@@ -56,6 +50,7 @@ export default function NewBookingPage() {
const originYard = form.watch("originYard");
const destinationYard = form.watch("destinationYard");
const containers = form.watch("containers");
const contractType = form.watch("contractType");
const previousContractRef = form.watch("previousContractRef");
const direction = useMemo(
@@ -68,63 +63,20 @@ export default function NewBookingPage() {
return calcWagons(containers);
}, [containers]);
useEffect(() => {
setRenewalValid(null);
}, [previousContractRef]);
function validateRenewal() {
const previousContractRef = form.getValues("previousContractRef").trim();
if (!previousContractRef) {
form.setError("previousContractRef", {
type: "manual",
message: "Enter a previous contract reference.",
});
return;
}
setRenewalValidating(true);
setRenewalValid(null);
setTimeout(() => {
const valid = MOCK_VALID_CONTRACTS.includes(
previousContractRef.toUpperCase(),
);
setRenewalValidating(false);
setRenewalValid(valid);
if (!valid) {
form.setError("previousContractRef", {
type: "manual",
message: "Contract Reference Number not found or unauthorized.",
});
} else {
form.clearErrors("previousContractRef");
}
}, 1200);
}
const renewalValid = contractType === "renewal" && previousContractRef !== "";
async function handleContinue() {
const valid = await form.trigger(stepFields[step], { shouldFocus: true });
if (!valid) return;
if (step === 1 && form.getValues("contractType") === "renewal") {
if (renewalValid !== true) {
form.setError("previousContractRef", {
type: "manual",
message:
"Validate the previous contract reference before continuing.",
});
return;
}
}
setStep((currentStep) => Math.min(STEPS.length, currentStep + 1));
}
const handleSubmit = form.handleSubmit((data) => {
if (data.contractType === "renewal" && renewalValid !== true) {
if (data.contractType === "renewal" && !data.previousContractRef) {
form.setError("previousContractRef", {
type: "manual",
message: "Validate the previous contract reference before submitting.",
message: "Select a previous contract reference.",
});
setStep(1);
return;
@@ -150,18 +102,15 @@ export default function NewBookingPage() {
previousContractId: data.previousContractRef || undefined,
serviceType:
data.serviceType === "rail" ? "RAIL_ONLY" : "RAIL_AND_FORWARDING",
firstMileEnabled: data.firstMileEnabled,
firstMilePickupAddress: data.firstMileEnabled
? data.pickUpAddress
: undefined,
lastMileEnabled: data.lastMileEnabled,
lastMileDeliveryAddress: data.lastMileEnabled
? data.deliveryAddress
: undefined,
firstMileEnabled: data.firstMile.enabled,
firstMilePickupAddress: data.firstMile.pickUpAddress ?? undefined,
lastMileEnabled: data.lastMile.enabled,
lastMileDeliveryAddress: data.lastMile.deliveryAddress ?? undefined,
equipmentReturn:
data.equipmentReturn === "with_return"
? ("WITH_RETURN" as const)
: ("WITHOUT_RETURN" as const),
customsClearingEnabled: data.customsClearingEnabled,
originStation: data.originYard,
destinationStation: data.destinationYard,
cargoTotalWeightVgm: totalWeight,
@@ -220,37 +169,21 @@ export default function NewBookingPage() {
className="flex flex-col"
onSubmit={handleSubmit}
>
<div className="sticky top-0 z-20 border-b border-border bg-background">
<div className="mx-auto max-w-4xl space-y-3 px-6 py-3">
<Breadcrumbs
items={[
{ label: "Bookings", href: "/bookings" },
{ label: "New Contract Request" },
]}
/>
<div className="sticky top-0 z-20">
<div className="mx-auto max-w-4xl space-y-3 px-6 pt-4">
<StepIndicator step={step} />
</div>
</div>
<div className="flex-1">
<div className="mx-auto max-w-4xl px-6 py-8">
{step === 1 && (
<Step1ContractType
form={form}
renewalValid={renewalValid}
renewalValidating={renewalValidating}
onValidate={validateRenewal}
/>
)}
{step === 1 && <Step1ContractType form={form} />}
{step === 2 && <Step2ServiceType form={form} />}
{step === 3 && <Step3FirstLastMile form={form} />}
{step === 4 && <Step4Route form={form} />}
{step === 5 && (
{step === 3 && <Step4Route form={form} />}
{step === 4 && (
<Step5CargoDetails form={form} direction={direction} />
)}
{step === 6 && <Step6WagonAllocation form={form} wagons={wagons} />}
{step === 7 && <Step7Documents form={form} />}
{step === 8 && (
{step === 5 && (
<Step8Review
form={form}
setStep={setStep}
@@ -277,11 +210,11 @@ export default function NewBookingPage() {
{step < STEPS.length ? (
<Button type="button" onClick={handleContinue}>
Continue
<ChevronRight className="ml-1 h-4 w-4" />
<ChevronRight />
</Button>
) : (
<Button type="submit" form="new-booking-form">
<CheckCircle2 className="mr-2 h-4 w-4" />
<Check />
Submit Contract Request
</Button>
)}

444
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
View File

@@ -42,123 +42,79 @@ export const MOCK_VALID_CONTRACTS = [
"EDR-2022-55442",
];
export const REQUIRED_DOC_KEYS = [
"tin_certificate",
"business_license",
"business_registration",
// "national_id",
export const CONTAINER_TYPES = [
"Dry Container",
"High Cubic",
"Reefer Container",
"Open Top",
"Flat Rack",
"Tank Container",
"Open Side",
] as const;
export const SHIPPING_LINES = [
"MSC",
"CMA CGM",
"Evergreen",
"COSCO",
"Hapag-Lloyd",
"ONE",
"Yang Ming",
"ZIM",
"Messina Line",
"Safmarine",
"Wan Hai",
"Ethiopian Shipping Lines (ESLSE)",
] as const;
export const STEPS = [
{ id: 1, label: "Contract Type", short: "Contract" },
{ id: 2, label: "Service Type", short: "Service" },
{ id: 3, label: "First & Last Mile", short: "Mile" },
{ id: 4, label: "Route", short: "Route" },
{ id: 5, label: "Cargo Details", short: "Cargo" },
{ id: 6, label: "Wagon Allocation", short: "Wagons" },
{ id: 7, label: "Documents", short: "Docs" },
{ id: 8, label: "Review & Submit", short: "Submit" },
{ id: 2, label: "Service Type & Mile", short: "Service" },
{ id: 3, label: "Route", short: "Route" },
{ id: 4, label: "Cargo Details", short: "Cargo" },
{ id: 5, label: "Review & Submit", short: "Submit" },
] as const;
export const BOOKING_DOCS_SETTING = {
id: "booking-compliance",
createdAt: "",
updatedAt: "",
deletedAt: null,
code: "booking_compliance_docs",
label: "Compliance Documents",
description:
"Upload your company's legal credentials. All mandatory documents must be submitted before the contract request can be reviewed by EDR Line Staff.",
entity: "booking" as const,
fields: [
{
id: "f1",
createdAt: "",
updatedAt: "",
deletedAt: null,
settingId: "booking-compliance",
fileKey: "tin_certificate",
fileLabel: "TIN Certificate",
helpText:
"Tax Identification Number certificate issued by ERCA (10-digit TIN).",
isRequired: true,
isMultiple: false,
maxFiles: 1,
allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
maxSizeMb: 5,
order: 1,
},
{
id: "f2",
createdAt: "",
updatedAt: "",
deletedAt: null,
settingId: "booking-compliance",
fileKey: "business_license",
fileLabel: "Business / Investment License",
helpText:
"Current business or investment license issued by the relevant government authority.",
isRequired: true,
isMultiple: false,
maxFiles: 1,
allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
maxSizeMb: 5,
order: 2,
},
{
id: "f3",
createdAt: "",
updatedAt: "",
deletedAt: null,
settingId: "booking-compliance",
fileKey: "business_registration",
fileLabel: "Business Registration Certificate",
helpText: "Certificate of registration from the relevant authority.",
isRequired: true,
isMultiple: false,
maxFiles: 1,
allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
maxSizeMb: 5,
order: 3,
},
{
id: "f5",
createdAt: "",
updatedAt: "",
deletedAt: null,
settingId: "booking-compliance",
fileKey: "power_of_attorney",
fileLabel: "Power of Attorney (PoA)",
helpText:
"Required only if a representative is signing on behalf of the company.",
isRequired: false,
isMultiple: false,
maxFiles: 1,
allowedExtensions: ["pdf", "jpg", "jpeg", "png"],
maxSizeMb: 5,
order: 5,
},
],
};
const fileValueSchema = z.union([
z.custom<File>(),
z.array(z.custom<File>()),
z.null(),
]);
export const bookingFormSchema = z
.object({
contractType: z.enum(["new", "renewal"], "Select a contract type."),
previousContractRef: z.string(),
serviceType: z.enum(["rail", "rail_forwarding"], "Select a service type."),
firstMileEnabled: z.boolean(),
pickUpAddress: z.string(),
lastMileEnabled: z.boolean(),
deliveryAddress: z.string(),
firstMile: z
.object({
enabled: z.boolean(),
pickUpAddress: z.string(),
})
.refine(
(data) => {
console.log(data);
return !(data.enabled && !data.pickUpAddress.trim());
},
{
message: "Enter the pick-up address.",
path: ["pickUpAddress"],
},
),
lastMile: z
.object({
enabled: z.boolean(),
deliveryAddress: z.string(),
})
.refine(
(data) => {
console.log(data);
return !(data.enabled && !data.deliveryAddress.trim());
},
{
message: "Enter the delivery address.",
path: ["deliveryAddress"],
},
),
equipmentReturn: z.enum(["with_return", "without_return"]),
originYard: z.string(),
destinationYard: z.string(),
customsClearingEnabled: z.boolean(),
originYard: z.string().min(1, "Select an origin yard."),
destinationYard: z.string().min(1, "Select a destination yard."),
shippingLine: z.string(),
cargoType: z.enum(["container", "bulk"], "Select a cargo type."),
cargoWeight: z.string(),
freightType: z.enum(["bulk", "break_bulk"]).optional(),
@@ -171,142 +127,116 @@ export const bookingFormSchema = z
containers: z.array(
z.object({
type: z.enum(["20ft", "40ft"]),
containerType: z.string().min(1, "Select a container type."),
qty: z
.string()
.refine((q) => q.length !== 0, "Quantity is required.")
.refine((q) => !isNaN(+q), "Enter a valid Number")
.refine((qty) => Number(qty) >= 1, "Must be greater than 0"),
vgm: z
.string()
.refine((vgm) => vgm.length !== 0, "VGM is required.")
.refine((vgm) => !isNaN(+vgm), "Enter a valid Number")
.refine((vgm) => Number(vgm) >= 0, "Must be greater than 0"),
}),
),
consolidationEnabled: z.boolean(),
documents: z.record(z.string(), fileValueSchema),
notes: z.string(),
termsAccepted: z.boolean(),
})
.superRefine((data, ctx) => {
if (data.contractType === "renewal" && !data.previousContractRef.trim()) {
ctx.addIssue({
code: "custom",
path: ["previousContractRef"],
message: "Enter a previous contract reference.",
});
}
if (data.firstMileEnabled && !data.pickUpAddress.trim()) {
ctx.addIssue({
code: "custom",
path: ["pickUpAddress"],
message: "Enter the pick-up address.",
});
}
if (data.lastMileEnabled && !data.deliveryAddress.trim()) {
ctx.addIssue({
code: "custom",
path: ["deliveryAddress"],
message: "Enter the delivery address.",
});
}
if (!data.originYard) {
ctx.addIssue({
code: "custom",
path: ["originYard"],
message: "Select an origin yard.",
});
}
if (!data.destinationYard) {
ctx.addIssue({
code: "custom",
path: ["destinationYard"],
message: "Select a destination yard.",
});
}
if (
data.originYard &&
data.destinationYard &&
data.originYard === data.destinationYard
) {
ctx.addIssue({
code: "custom",
path: ["destinationYard"],
message: "Destination must be different from origin.",
});
}
if (data.cargoType === "bulk") {
if (!data.freightType) {
ctx.addIssue({
code: "custom",
path: ["freightType"],
message: "Select a freight type.",
});
}
if (data.freightType === "bulk") {
if (!data.bulkCommodity) {
ctx.addIssue({
code: "custom",
path: ["bulkCommodity"],
message: "Select a commodity.",
});
}
if (
data.bulkCommodity === "Others" &&
!data.bulkCommodityOther.trim()
) {
ctx.addIssue({
code: "custom",
path: ["bulkCommodityOther"],
message: "Specify the commodity.",
});
}
}
if (data.freightType === "break_bulk") {
if (!data.breakBulkType) {
ctx.addIssue({
code: "custom",
path: ["breakBulkType"],
message: "Select a break-bulk type.",
});
}
if (
data.breakBulkType === "Others" &&
!data.breakBulkTypeOther.trim()
) {
ctx.addIssue({
code: "custom",
path: ["breakBulkTypeOther"],
message: "Specify the break-bulk type.",
});
}
}
.refine(
(data) =>
!(data.contractType === "renewal" && !data.previousContractRef.trim()),
{
message: "Enter a previous contract reference.",
path: ["previousContractRef"],
},
)
.refine((data) => data.originYard !== "", {
message: "Select an origin yard.",
path: ["originYard"],
})
.refine((data) => data.destinationYard !== "", {
message: "Select a destination yard.",
path: ["destinationYard"],
})
.refine(
(data) =>
!(
data.originYard &&
data.destinationYard &&
data.originYard === data.destinationYard
),
{
message: "Destination must be different from origin.",
path: ["destinationYard"],
},
)
.refine((data) => !(data.cargoType === "bulk" && !data.freightType), {
message: "Select a freight type.",
path: ["freightType"],
})
.refine(
(data) =>
!(
data.cargoType === "bulk" &&
data.freightType === "bulk" &&
!data.bulkCommodity
),
{ message: "Select a commodity.", path: ["bulkCommodity"] },
)
.refine(
(data) =>
!(
data.cargoType === "bulk" &&
data.freightType === "bulk" &&
data.bulkCommodity === "Others" &&
!data.bulkCommodityOther.trim()
),
{ message: "Specify the commodity.", path: ["bulkCommodityOther"] },
)
.refine(
(data) =>
!(
data.cargoType === "bulk" &&
data.freightType === "break_bulk" &&
!data.breakBulkType
),
{ message: "Select a break-bulk type.", path: ["breakBulkType"] },
)
.refine(
(data) =>
!(
data.cargoType === "bulk" &&
data.freightType === "break_bulk" &&
data.breakBulkType === "Others" &&
!data.breakBulkTypeOther.trim()
),
{
message: "Specify the break-bulk type.",
path: ["breakBulkTypeOther"],
},
)
.refine(
(data) => {
if (data.cargoType !== "bulk") return true;
const cargoWeight = Number(data.cargoWeight);
if (!data.cargoWeight || Number.isNaN(cargoWeight) || cargoWeight <= 0) {
ctx.addIssue({
code: "custom",
path: ["cargoWeight"],
message: "Enter a cargo weight greater than 0.",
});
}
}
return (
!!data.cargoWeight && !Number.isNaN(cargoWeight) && cargoWeight > 0
);
},
{ message: "Enter a cargo weight greater than 0.", path: ["cargoWeight"] },
)
.refine(
(data) => !(data.cargoType === "container" && data.containers.length === 0),
{ message: "Add at least one container.", path: ["containers"] },
)
.refine((data) => data.termsAccepted, {
message: "Accept the freight contract terms to submit.",
path: ["termsAccepted"],
})
.superRefine((data, ctx) => {
if (data.cargoType === "container") {
if (data.containers.length === 0) {
ctx.addIssue({
code: "custom",
path: ["containers"],
message: "Add at least one container.",
});
}
data.containers.forEach((c, i) => {
if (!c.qty || +c.qty < 1) {
ctx.addIssue({
@@ -325,39 +255,25 @@ export const bookingFormSchema = z
}
});
}
for (const key of REQUIRED_DOC_KEYS) {
const value = data.documents[key];
const hasFile = Array.isArray(value) ? value.length > 0 : Boolean(value);
if (!hasFile) {
ctx.addIssue({
code: "custom",
path: ["documents", key],
message: "Upload this required document.",
});
}
}
if (!data.termsAccepted) {
ctx.addIssue({
code: "custom",
path: ["termsAccepted"],
message: "Accept the freight contract terms to submit.",
});
}
});
export type BookingFormValues = z.infer<typeof bookingFormSchema>;
export const initialBookingFormValues: Partial<BookingFormValues> = {
previousContractRef: "",
firstMileEnabled: false,
pickUpAddress: "",
lastMileEnabled: false,
deliveryAddress: "",
firstMile: {
enabled: false,
pickUpAddress: "",
},
lastMile: {
enabled: false,
deliveryAddress: "",
},
equipmentReturn: "with_return",
customsClearingEnabled: false,
originYard: "",
destinationYard: "",
shippingLine: "",
cargoWeight: "",
bulkCommodity: "",
bulkCommodityOther: "",
@@ -365,25 +281,29 @@ export const initialBookingFormValues: Partial<BookingFormValues> = {
breakBulkTypeOther: "",
isHazardous: false,
isRefrigerated: false,
containers: [{ type: "20ft", qty: "1", vgm: "" }],
containers: [{ type: "20ft", containerType: "", qty: "1", vgm: "" }],
consolidationEnabled: false,
documents: {},
notes: "",
termsAccepted: false,
};
export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
1: ["contractType", "previousContractRef"],
2: ["serviceType"],
3: [
"firstMileEnabled",
"pickUpAddress",
"lastMileEnabled",
"deliveryAddress",
2: [
"serviceType",
"firstMile",
"lastMile",
"equipmentReturn",
"customsClearingEnabled",
],
4: ["originYard", "destinationYard", "isHazardous", "isRefrigerated"],
5: [
3: [
"originYard",
"destinationYard",
"isHazardous",
"isRefrigerated",
"shippingLine",
],
4: [
"cargoType",
"cargoWeight",
"freightType",
@@ -392,16 +312,16 @@ export const stepFields: Record<number, Array<keyof BookingFormValues>> = {
"breakBulkType",
"breakBulkTypeOther",
"containers",
"consolidationEnabled",
],
6: ["consolidationEnabled"],
7: ["documents"],
8: ["notes", "termsAccepted"],
5: ["notes", "termsAccepted"],
};
export type RouteDirection = "import" | "export" | "domestic" | null;
export interface ContainerConfig {
type: "20ft" | "40ft";
containerType: string;
qty: string;
vgm: string;
}

12
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/shared.tsx
View File

@@ -22,18 +22,8 @@ import {
SelectValue,
} from "@edr/ui-common";
import type { BookingFormValues } from "./schema";
import { REQUIRED_DOC_KEYS } from "./schema";
import { cn } from "@/lib/utils";
export function getUploadedRequiredCount(
documents: BookingFormValues["documents"],
) {
return REQUIRED_DOC_KEYS.filter((key) => {
const file = documents[key];
return Array.isArray(file) ? file.length > 0 : Boolean(file);
}).length;
}
export function OptionFieldError({ error }: { error?: { message?: string } }) {
return <FieldError errors={[error]} />;
}
@@ -160,6 +150,8 @@ export function SelectField({
);
}
export { SelectItem };
export function SelectOptions({ options }: { options: readonly string[] }) {
return (
<>

78
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx
View File

@@ -1,22 +1,19 @@
import { Controller, type UseFormReturn } from "react-hook-form";
import { FileText, Loader2, RefreshCw } from "lucide-react";
import { Button, Field, FieldLabel, Input } from "@edr/ui-common";
import { type BookingFormValues } from "./schema";
import { AlertBox, OptionCard, OptionFieldError, StepHeader } from "./shared";
import { FileText, RefreshCw } from "lucide-react";
import { Field } from "@edr/ui-common";
import { MOCK_VALID_CONTRACTS, type BookingFormValues } from "./schema";
import {
AlertBox,
OptionCard,
OptionFieldError,
SelectField,
SelectItem,
StepHeader,
} from "./shared";
type BookingForm = UseFormReturn<BookingFormValues>;
export function Step1ContractType({
form,
renewalValid,
renewalValidating,
onValidate,
}: {
form: BookingForm;
renewalValid: boolean | null;
renewalValidating: boolean;
onValidate: () => void;
}) {
export function Step1ContractType({ form }: { form: BookingForm }) {
const contractType = form.watch("contractType");
const previousContractRef = form.watch("previousContractRef");
@@ -38,6 +35,7 @@ export function Step1ContractType({
onClick={() => {
field.onChange("new");
form.clearErrors(["contractType", "previousContractRef"]);
form.setValue("previousContractRef", "");
}}
>
<div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
@@ -45,7 +43,7 @@ export function Step1ContractType({
</div>
<p className="font-semibold">New Contract</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Blank contract form. A draft ID is auto-generated.
Create a new contract.
</p>
</OptionCard>
@@ -61,7 +59,7 @@ export function Step1ContractType({
</div>
<p className="font-semibold">Contract Renewal</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Enter a previous reference to auto-populate historical
Select a previous reference to auto-populate historical
parameters.
</p>
</OptionCard>
@@ -77,46 +75,26 @@ export function Step1ContractType({
name="previousContractRef"
control={form.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor="previousContractRef">
Previous Contract Reference Number
</FieldLabel>
<div className="flex gap-2">
<Input
{...field}
id="previousContractRef"
aria-invalid={fieldState.invalid}
placeholder="e.g. EDR-2024-10001"
className="font-mono"
/>
<Button
type="button"
variant="outline"
onClick={onValidate}
disabled={!previousContractRef || renewalValidating}
>
{renewalValidating ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Validate"
)}
</Button>
</div>
</Field>
<SelectField
field={field}
error={fieldState.error}
label="Previous Contract Reference Number"
placeholder="Select a contract..."
>
{MOCK_VALID_CONTRACTS.map((ref) => (
<SelectItem key={ref} value={ref}>
{ref}
</SelectItem>
))}
</SelectField>
)}
/>
{renewalValid === true && (
{previousContractRef && (
<AlertBox tone="success">
<strong>Contract found.</strong> Company details, route, and wagon
preferences will be pre-filled.
</AlertBox>
)}
{renewalValid === false && (
<AlertBox tone="error">
Contract Reference Number not found or unauthorized. Try{" "}
<span className="font-mono">EDR-2024-10001</span>.
</AlertBox>
)}
</div>
)}
</div>

170
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step2-service-type.tsx
View File

@@ -1,6 +1,6 @@
import { Controller, type UseFormReturn } from "react-hook-form";
import { Package, Train } from "lucide-react";
import { Badge, Field, FieldError } from "@edr/ui-common";
import { FileText, Package, Train, Truck } from "lucide-react";
import { Badge, Field, FieldError, Input, Switch } from "@edr/ui-common";
import { type BookingFormValues } from "./schema";
import { OptionCard, OptionFieldError, StepHeader } from "./shared";
@@ -8,12 +8,14 @@ type BookingForm = UseFormReturn<BookingFormValues>;
export function Step2ServiceType({ form }: { form: BookingForm }) {
const serviceType = form.watch("serviceType");
const firstMileEnabled = form.watch("firstMile.enabled");
const lastMileEnabled = form.watch("lastMile.enabled");
return (
<div className="space-y-6">
<StepHeader
title="Service Type"
description="Select the service combination you require."
description="Select the service combination and configure trucking options."
/>
<Controller
@@ -63,10 +65,164 @@ export function Step2ServiceType({ form }: { form: BookingForm }) {
)}
/>
<p className="text-xs text-muted-foreground">
Customs and Clearance Service cannot be selected independently. It must
be bundled with a Rail Transport service.
</p>
<div className="divide-y divide-border rounded-xl border border-border">
<div className="p-4">
<Controller
name="firstMile.enabled"
control={form.control}
render={({ field }) => (
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<Truck className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
<div>
<p className="text-sm font-medium">First Mile - Pick-up</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Truck pick-up from your premises (Door to Port) to the
origin rail yard.
</p>
</div>
</div>
<Switch
checked={field.value}
onCheckedChange={(value) => {
field.onChange(value);
if (!value) {
form.setValue("firstMile.pickUpAddress", "", {
shouldDirty: true,
shouldValidate: true,
});
}
}}
/>
</div>
)}
/>
{firstMileEnabled && (
<Controller
name="firstMile.pickUpAddress"
control={form.control}
render={({ field, fieldState }) => (
<Field className="mt-3" data-invalid={fieldState.invalid}>
<Input
{...field}
aria-invalid={fieldState.invalid}
placeholder="Pick-up address *"
/>
<FieldError errors={[fieldState.error]} />
</Field>
)}
/>
)}
</div>
<div className="p-4">
<Controller
name="lastMile.enabled"
control={form.control}
render={({ field }) => (
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<Truck className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
<div>
<p className="text-sm font-medium">Last Mile - Delivery</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Truck delivery from the destination rail yard to the final
address (Port to Door).
</p>
</div>
</div>
<Switch
checked={field.value}
onCheckedChange={(value) => {
field.onChange(value);
if (!value) {
form.setValue("lastMile.deliveryAddress", "", {
shouldDirty: true,
shouldValidate: true,
});
form.setValue("equipmentReturn", "with_return", {
shouldDirty: true,
});
}
}}
/>
</div>
)}
/>
{lastMileEnabled && (
<Controller
name="lastMile.deliveryAddress"
control={form.control}
render={({ field, fieldState }) => (
<Field className="mt-3" data-invalid={fieldState.invalid}>
<Input
{...field}
aria-invalid={fieldState.invalid}
placeholder="Delivery address *"
/>
<FieldError errors={[fieldState.error]} />
</Field>
)}
/>
)}
</div>
{lastMileEnabled && (
<div className="p-4">
<Controller
name="equipmentReturn"
control={form.control}
render={({ field }) => (
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<div>
<p className="text-sm font-medium">Equipment Return</p>
<p className="mt-0.5 text-xs text-muted-foreground">
{field.value === "with_return"
? "Container returned to EDR after unloading."
: "Container retained by the customer after delivery."}
</p>
</div>
</div>
<Switch
checked={field.value === "with_return"}
onCheckedChange={(value) => {
field.onChange(value ? "with_return" : "without_return");
}}
/>
</div>
)}
/>
</div>
)}
<div className="p-4">
<Controller
name="customsClearingEnabled"
control={form.control}
render={({ field }) => (
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3">
<FileText className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
<div>
<p className="text-sm font-medium">
Customs Clearing Service
</p>
<p className="mt-0.5 text-xs text-muted-foreground">
EDR handles customs documentation and clearance on your
behalf.
</p>
</div>
</div>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</div>
)}
/>
</div>
</div>
</div>
);
}

68
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx
View File

@@ -1,7 +1,7 @@
import { Controller, type UseFormReturn } from "react-hook-form";
import { Field, FieldError, Input, Switch } from "@edr/ui-common";
import { type BookingFormValues } from "./schema";
import { OptionCard, StepHeader } from "./shared";
import { StepHeader } from "./shared";
type BookingForm = UseFormReturn<BookingFormValues>;
@@ -27,7 +27,8 @@ export function Step3FirstLastMile({ form }: { form: BookingForm }) {
<div>
<p className="text-sm font-medium">First Mile - Pick-up</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Truck pick-up from your premises to the origin rail yard.
Truck pick-up from your premises (Door to Port) to the
origin rail yard.
</p>
</div>
<Switch
@@ -73,7 +74,7 @@ export function Step3FirstLastMile({ form }: { form: BookingForm }) {
<p className="text-sm font-medium">Last Mile - Delivery</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Truck delivery from the destination rail yard to the final
address.
address (Port to Door).
</p>
</div>
<Switch
@@ -107,40 +108,35 @@ export function Step3FirstLastMile({ form }: { form: BookingForm }) {
)}
/>
)}
</div>
<div className="p-4">
<p className="mb-3 text-sm font-medium">Equipment Return</p>
<p className="mb-3 text-xs text-muted-foreground">
Declare whether the container asset will be returned after
unloading.
</p>
<Controller
name="equipmentReturn"
control={form.control}
render={({ field }) => (
<div className="grid gap-2 sm:grid-cols-2">
<OptionCard
selected={equipmentReturn === "with_return"}
onClick={() => field.onChange("with_return")}
>
<p className="text-sm font-semibold">With Return</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Container returned to EDR after unloading.
</p>
</OptionCard>
<OptionCard
selected={equipmentReturn === "without_return"}
onClick={() => field.onChange("without_return")}
>
<p className="text-sm font-semibold">Without Return</p>
<p className="mt-0.5 text-xs text-muted-foreground">
Container retained by the customer after delivery.
</p>
</OptionCard>
</div>
)}
/>
{lastMileEnabled && (
<div className="mt-4 border-t border-border pt-4">
<Controller
name="equipmentReturn"
control={form.control}
render={({ field }) => (
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm font-medium">Equipment Return</p>
<p className="mt-0.5 text-xs text-muted-foreground">
{field.value === "with_return"
? "Container returned to EDR after unloading."
: "Container retained by the customer after delivery."}
</p>
</div>
<Switch
checked={field.value === "with_return"}
onCheckedChange={(value) => {
field.onChange(
value ? "with_return" : "without_return",
);
}}
/>
</div>
)}
/>
</div>
)}
</div>
</div>
</div>

30
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
View File

@@ -1,7 +1,12 @@
import { Controller, type UseFormReturn } from "react-hook-form";
import { Flame, MapPin, Snowflake } from "lucide-react";
import { Field, SelectItem, Separator, Switch } from "@edr/ui-common";
import { type BookingFormValues, getRouteDirection, STATIONS } from "./schema";
import {
SHIPPING_LINES,
type BookingFormValues,
getRouteDirection,
STATIONS,
} from "./schema";
import {
AlertBox,
SelectField,
@@ -11,6 +16,7 @@ import {
} from "./shared";
import { useDropdownSettingByCode } from "@/hooks/useDropdownSettings";
import { DropdownOption } from "@/types/dropdownSettings";
import { useEffect } from "react";
type BookingForm = UseFormReturn<BookingFormValues>;
@@ -39,6 +45,12 @@ export function Step4Route({ form }: { form: BookingForm }) {
};
const stationSelectDisabled = stationsLoading || stationOptions.length === 0;
useEffect(() => {
if (direction === "domestic") {
form.setValue("shippingLine", "", { shouldDirty: true });
}
}, [direction]);
return (
<div className="space-y-6">
<StepHeader
@@ -106,6 +118,22 @@ export function Step4Route({ form }: { form: BookingForm }) {
)}
</div>
{direction && direction != "domestic" && (
<Controller
name="shippingLine"
control={form.control}
render={({ field, fieldState }) => (
<SelectField
field={field}
error={fieldState.error}
label="Shipping Line"
placeholder="Select shipping line..."
>
<SelectOptions options={SHIPPING_LINES} />
</SelectField>
)}
/>
)}
<Separator />
<div className="space-y-0 divide-y divide-border">

80
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
View File

@@ -11,6 +11,8 @@ import {
import {
BREAK_BULK_TYPES,
BULK_COMMODITIES,
CONTAINER_TYPES,
calcWagons,
type BookingFormValues,
type RouteDirection,
} from "./schema";
@@ -98,7 +100,14 @@ export function Step5CargoDetails({
field.onChange("bulk");
form.setValue(
"containers",
[{ type: "20ft", qty: "1", vgm: "0" }],
[
{
type: "20ft",
containerType: "",
qty: "1",
vgm: "",
},
],
{ shouldDirty: true },
);
}}
@@ -259,32 +268,27 @@ export function Step5CargoDetails({
{cargoType === "container" && (
<>
<Separator />
<div className="space-y-4">
<div className="flex items-center justify-between">
<StepLabel>Container Configuration</StepLabel>
<StepLabel>Containers</StepLabel>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => append({ type: "20ft", qty: "1", vgm: "0" })}
onClick={() =>
append({
type: "20ft",
containerType: "",
qty: "1",
vgm: "",
})
}
>
<Plus className="mr-1 h-3.5 w-3.5" />
Add Container
</Button>
</div>
{direction && (
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
<MapPin className="h-3.5 w-3.5" />
Route detected as{" "}
<span className="font-medium capitalize text-foreground">
{direction}
</span>{" "}
workflow
</p>
)}
{fields.map((field, index) => {
const containerType = containers[index]?.type;
const vgm = containers[index]?.vgm ?? 0;
@@ -293,12 +297,9 @@ export function Step5CargoDetails({
return (
<div
key={field.id}
className="space-y-3 rounded-xl border border-border p-4"
className="rounded-xl flex flex-col border border-border p-3 gap-2"
>
<div className="flex items-center justify-between">
<p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Container #{index + 1}
</p>
{fields.length > 1 && (
<button
type="button"
@@ -315,7 +316,6 @@ export function Step5CargoDetails({
control={form.control}
render={({ field: typeField, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel>Container Type *</FieldLabel>
<div className="grid gap-2 sm:grid-cols-2">
{[
{
@@ -352,7 +352,7 @@ export function Step5CargoDetails({
)}
/>
<div className="grid gap-3 sm:grid-cols-2">
<div className="grid gap-3 sm:grid-cols-3">
<Controller
name={`containers.${index}.qty`}
control={form.control}
@@ -422,6 +422,21 @@ export function Step5CargoDetails({
</Field>
)}
/>
<Controller
name={`containers.${index}.containerType`}
control={form.control}
render={({ field: ctField, fieldState }) => (
<SelectField
field={ctField}
error={fieldState.error}
label="Container Type *"
placeholder="Select type..."
>
<SelectOptions options={CONTAINER_TYPES} />
</SelectField>
)}
/>
</div>
{alert && (
@@ -433,6 +448,29 @@ export function Step5CargoDetails({
);
})}
</div>
{(() => {
const result = calcWagons(containers ?? []);
if (result.hasOddUnit) {
return (
<AlertBox tone="warning">
<div className="flex items-start gap-2">
<div>
<p className="font-semibold">Unpaired 20ft Container</p>
<p className="mt-1 text-xs">
One 20ft container occupies only half a wagon. The wagon
will depart once a co-loader is found to fill the
remaining slot, which{" "}
<strong>may delay departure</strong> beyond the standard
lead time.
</p>
</div>
</div>
</AlertBox>
);
}
return null;
})()}
</>
)}
</div>

68
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step8-review.tsx
View File

@@ -11,12 +11,11 @@ import {
Textarea,
} from "@edr/ui-common";
import {
REQUIRED_DOC_KEYS,
type BookingFormValues,
type RouteDirection,
type WagonCalcResult,
} from "./schema";
import { getUploadedRequiredCount, StepHeader } from "./shared";
import { StepHeader } from "./shared";
type BookingForm = UseFormReturn<BookingFormValues>;
@@ -63,13 +62,16 @@ export function Step8Review({
const containerSummary =
values.cargoType === "container" && values.containers.length > 0
? values.containers
.filter((c) => c.qty > 0)
.map((c) => `${c.qty} × ${c.type}`)
.join(", ")
.filter((c) => +c.qty > 0)
.map((c) => `${c.qty} × ${c.type}`)
.join(", ")
: "";
const totalVgm =
values.cargoType === "container"
? values.containers.reduce((sum, c) => sum + (c.qty || 0) * (c.vgm || 0), 0)
? values.containers.reduce(
(sum, c) => sum + (+c.qty || 0) * (+c.vgm || 0),
0,
)
: 0;
const cargoValue =
@@ -80,8 +82,6 @@ export function Step8Review({
: values.freightType === "break_bulk"
? `Break-Bulk - ${values.breakBulkType === "Others" ? values.breakBulkTypeOther : values.breakBulkType}`
: "";
const uploadedCount = getUploadedRequiredCount(values.documents);
return (
<div className="space-y-6">
<StepHeader
@@ -91,7 +91,7 @@ export function Step8Review({
<div className="grid gap-4 md:grid-cols-2">
<Card className="gap-0 overflow-hidden py-0">
<CardHeader className="border-b px-5 py-3">
<CardHeader className="border-b px-5 py-3!">
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Contract & Service
</CardTitle>
@@ -104,7 +104,7 @@ export function Step8Review({
/>
<Row
label="Contract ID"
value={values.draftContractId || values.previousContractRef}
value={values.previousContractRef}
target={1}
/>
<Row
@@ -122,7 +122,7 @@ export function Step8Review({
</Card>
<Card className="gap-0 overflow-hidden py-0">
<CardHeader className="border-b px-5 py-3">
<CardHeader className="border-b px-5 py-3!">
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
First & Last Mile
</CardTitle>
@@ -131,18 +131,20 @@ export function Step8Review({
<Row
label="First Mile"
value={
values.firstMileEnabled ? values.pickUpAddress : "Not requested"
values.firstMile.enabled
? values.firstMile.pickUpAddress
: "Not requested"
}
target={3}
target={2}
/>
<Row
label="Last Mile"
value={
values.lastMileEnabled
? values.deliveryAddress
values.lastMile.enabled
? values.lastMile.deliveryAddress
: "Not requested"
}
target={3}
target={2}
/>
<Row
label="Equipment Return"
@@ -151,13 +153,20 @@ export function Step8Review({
? "With Return"
: "Without Return"
}
target={3}
target={2}
/>
<Row
label="Customs Clearing"
value={
values.customsClearingEnabled ? "Enabled" : "Not requested"
}
target={2}
/>
</CardContent>
</Card>
<Card className="gap-0 overflow-hidden py-0">
<CardHeader className="border-b px-5 py-3">
<CardHeader className="border-b px-5 py-3!">
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Route & Cargo
</CardTitle>
@@ -166,7 +175,7 @@ export function Step8Review({
<Row
label="Route"
value={`${values.originYard} -> ${values.destinationYard}`}
target={4}
target={3}
/>
<Row
label="Workflow"
@@ -175,14 +184,14 @@ export function Step8Review({
? direction.charAt(0).toUpperCase() + direction.slice(1)
: ""
}
target={4}
target={3}
/>
<Row
label="Weight (VGM)"
value={values.cargoWeight ? `${values.cargoWeight} tons` : ""}
target={5}
target={4}
/>
<Row label="Cargo" value={cargoValue} target={5} />
<Row label="Cargo" value={cargoValue} target={4} />
<Row
label="Modifiers"
value={
@@ -193,13 +202,13 @@ export function Step8Review({
.filter(Boolean)
.join(", ") || "None"
}
target={4}
target={3}
/>
</CardContent>
</Card>
<Card className="gap-0 overflow-hidden py-0">
<CardHeader className="border-b px-5 py-3">
<CardHeader className="border-b px-5 py-3!">
<CardTitle className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
Container & Wagons
</CardTitle>
@@ -208,12 +217,12 @@ export function Step8Review({
<Row
label="Containers"
value={containerSummary || "-"}
target={5}
target={4}
/>
<Row
label="Total VGM"
value={totalVgm > 0 ? `${totalVgm.toFixed(1)} tons` : ""}
target={5}
target={4}
/>
<Row
label="Wagons"
@@ -222,12 +231,7 @@ export function Step8Review({
? `${wagons.totalWagons} wagon${wagons.totalWagons > 1 ? "s" : ""}`
: ""
}
target={6}
/>
<Row
label="Documents"
value={`${uploadedCount}/${REQUIRED_DOC_KEYS.length} mandatory uploaded`}
target={7}
target={4}
/>
</CardContent>
</Card>

3
apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/steps.tsx
View File

@@ -1,8 +1,5 @@
export { Step1ContractType } from "./step1-contract-type";
export { Step2ServiceType } from "./step2-service-type";
export { Step3FirstLastMile } from "./step3-first-last-mile";
export { Step4Route } from "./step4-route";
export { Step5CargoDetails } from "./step5-cargo-details";
export { Step6WagonAllocation } from "./step6-wagon-allocation";
export { Step7Documents } from "./step7-documents";
export { Step8Review } from "./step8-review";

1
packages/types/src/freight/index.ts
View File

@@ -197,6 +197,7 @@ export interface CreateBookingDto {
lastMileDeliveryAddress?: string;
equipmentReturn: "WITH_RETURN" | "WITHOUT_RETURN";
customsClearingEnabled?: boolean;
originStation: string;
destinationStation: string;
cargoTotalWeightVgm: number;

5
tasks.md Normal file
View File

@@ -0,0 +1,5 @@
- In ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step1-contract-type.tsx the input field for the previous contract ref should be a select field with the list of contracts from the API
- the "Equipment Return" field in ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step3-first-last-mile.tsx should be a toggle like Last Mile - Delivery and should appear only if the last mile is toggled. and also add "( Door to Port)" to first mile description and vice versa to the last mile
- add Type of container- Dry container, high cubic containers , reefer containers, open top containers, flat rack, tank container, open side containers to ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
- merge the "Unpaired 20ft Container" from ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx to step 4 and fully remove the step 5
- add Type of Shipping lines - MSC, CMA CGM, Evergreen, COSCO, Hapag-Lloyd, ONE, Yang Ming, ZIM, Messina Line, Safmarine, Wan Hai, Ethiopian Shipping Lines (ESLSE) to ./apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx