fix: the muliple wagon validation

2026-08-27 00:52:50 +00:00 · 2026-05-22 16:35:21 +03:00
parent 80db8f11df
commit 1949bed303
4 changed files with 106 additions and 118 deletions
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/schema.ts
@@ -175,8 +175,14 @@ export const bookingFormSchema = z
    containers: z.array(
      z.object({
        type: z.enum(["20ft", "40ft"]),
-        qty: z.number(),
-        vgm: z.number(),
+        qty: z
+          .string()
+          .refine((q) => !isNaN(+q), "Enter a valid Number")
+          .refine((qty) => Number(qty) >= 1, "Must be greater than 0"),
+        vgm: z
+          .string()
+          .refine((vgm) => !isNaN(+vgm), "Enter a valid Number")
+          .refine((vgm) => Number(vgm) >= 0, "Must be greater than 0"),
      }),
    ),
    consolidationEnabled: z.boolean(),
@@ -338,7 +344,7 @@ export const bookingFormSchema = z
      }

      data.containers.forEach((c, i) => {
-        if (!c.qty || c.qty < 1) {
+        if (!c.qty || +c.qty < 1) {
          ctx.addIssue({
            code: "custom",
            path: ["containers", i, "qty"],
@@ -346,7 +352,7 @@ export const bookingFormSchema = z
          });
        }

-        if (!c.vgm || c.vgm <= 0) {
+        if (!c.vgm || +c.vgm <= 0) {
          ctx.addIssue({
            code: "custom",
            path: ["containers", i, "vgm"],
@@ -400,7 +406,7 @@ export const initialBookingFormValues: BookingFormValues = {
  breakBulkTypeOther: "",
  isHazardous: false,
  isRefrigerated: false,
-  containers: [{ type: "20ft", qty: 1, vgm: 0 }],
+  containers: [{ type: "20ft", qty: "1", vgm: "" }],
  consolidationEnabled: false,
  documents: {},
  notes: "",
@@ -437,14 +443,21 @@ export type RouteDirection = "import" | "export" | "domestic" | null;

 export interface ContainerConfig {
  type: "20ft" | "40ft";
-  qty: number;
-  vgm: number;
+  qty: string;
+  vgm: string;
+}
+
+export interface WagonConfig {
+  type: "20ft" | "40ft";
 }

 export interface WagonCalcResult {
  totalWagons: number;
  hasOddUnit: boolean;
  sharedWagons: number;
+  wagonLayout: WagonConfig[];
+  ft40Wagons: number;
+  ft20Wagons: number;
 }

 export function genContractId(): string {
@@ -467,22 +480,22 @@ export function getRouteDirection(
 }

 export function calcWagons(containers: ContainerConfig[]): WagonCalcResult {
-  let totalWagons = 0;
-  let hasOddUnit = false;
-  let sharedWagons = 0;
+  const Ft40Wagons = containers
+    .filter((c) => c.type === "40ft")
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const Ft20Wagons = containers
+    .filter((c) => c.type === "20ft")
+    .reduce((sum, c) => sum + Number(c.qty), 0);
+  const wagonLayout: WagonConfig[] = [];
+  let hasOddUnit = Ft20Wagons % 2 === 1;
+  let sharedWagons = Math.floor(Ft20Wagons / 2);

-  for (const c of containers) {
-    if (c.type === "40ft") {
-      totalWagons += c.qty;
-      sharedWagons += c.qty;
-    } else {
-      const pairs = Math.floor(c.qty / 2);
-      const odd = c.qty % 2;
-      totalWagons += pairs + odd;
-      sharedWagons += pairs;
-      if (odd > 0) hasOddUnit = true;
-    }
-  }
-
-  return { totalWagons, hasOddUnit, sharedWagons };
+  return {
+    totalWagons: sharedWagons + Ft40Wagons,
+    hasOddUnit,
+    sharedWagons,
+    ft40Wagons: Ft40Wagons,
+    ft20Wagons: Ft20Wagons,
+    wagonLayout,
+  };
 }
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step4-route.tsx
@@ -1,11 +1,7 @@
 import { Controller, type UseFormReturn } from "react-hook-form";
 import { Flame, MapPin, Snowflake } from "lucide-react";
 import { Field, Separator, Switch } from "@edr/ui-common";
-import {
-  type BookingFormValues,
-  getRouteDirection,
-  STATIONS,
-} from "./schema";
+import { type BookingFormValues, getRouteDirection, STATIONS } from "./schema";
 import { SelectField, SelectOptions, StepHeader, StepLabel } from "./shared";

 type BookingForm = UseFormReturn<BookingFormValues>;
@@ -33,7 +29,6 @@ export function Step4Route({ form }: { form: BookingForm }) {
      />

      <div className="space-y-3">
-        <StepLabel>Route</StepLabel>
        <div className="grid gap-3 sm:grid-cols-2">
          <Controller
            name="originYard"
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step5-cargo-details.tsx
@@ -1,6 +1,13 @@
 import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
 import { MapPin, Package, Plus, Trash2, Weight } from "lucide-react";
-import { Button, Field, FieldError, FieldLabel, Input, Separator } from "@edr/ui-common";
+import {
+  Button,
+  Field,
+  FieldError,
+  FieldLabel,
+  Input,
+  Separator,
+} from "@edr/ui-common";
 import {
  BREAK_BULK_TYPES,
  BULK_COMMODITIES,
@@ -87,7 +94,11 @@ export function Step5CargoDetails({
                  selected={cargoType === "bulk"}
                  onClick={() => {
                    field.onChange("bulk");
-                    form.setValue("containers", [{ type: "20ft", qty: 1, vgm: 0 }], { shouldDirty: true });
+                    form.setValue(
+                      "containers",
+                      [{ type: "20ft", qty: "1", vgm: "0" }],
+                      { shouldDirty: true },
+                    );
                  }}
                >
                  <div className="mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100">
@@ -254,7 +265,7 @@ export function Step5CargoDetails({
                type="button"
                variant="outline"
                size="sm"
-                onClick={() => append({ type: "20ft", qty: 1, vgm: 0 })}
+                onClick={() => append({ type: "20ft", qty: "1", vgm: "0" })}
              >
                <Plus className="mr-1 h-3.5 w-3.5" />
                Add Container
@@ -275,7 +286,7 @@ export function Step5CargoDetails({
            {fields.map((field, index) => {
              const containerType = containers[index]?.type;
              const vgm = containers[index]?.vgm ?? 0;
-              const alert = getOverweightAlert(containerType, vgm);
+              const alert = getOverweightAlert(containerType, +vgm);

              return (
                <div
@@ -351,7 +362,10 @@ export function Step5CargoDetails({
                              type="button"
                              onClick={() =>
                                qtyField.onChange(
-                                  Math.max(1, (qtyField.value ?? 1) - 1),
+                                  Math.max(
+                                    1,
+                                    Number(qtyField.value ?? 1) - 1,
+                                  ).toString(),
                                )
                              }
                              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -361,9 +375,7 @@ export function Step5CargoDetails({
                            <Input
                              value={qtyField.value ?? 1}
                              onChange={(e) =>
-                                qtyField.onChange(
-                                  Math.max(1, parseInt(e.target.value) || 1),
-                                )
+                                qtyField.onChange(e.target.value)
                              }
                              onBlur={qtyField.onBlur}
                              type="number"
@@ -375,7 +387,7 @@ export function Step5CargoDetails({
                              type="button"
                              onClick={() =>
                                qtyField.onChange(
-                                  (qtyField.value ?? 1) + 1,
+                                  (Number(qtyField.value ?? 1) + 1).toString(),
                                )
                              }
                              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-input transition hover:bg-accent"
@@ -396,11 +408,7 @@ export function Step5CargoDetails({
                          <FieldLabel>VGM (Tons) *</FieldLabel>
                          <Input
                            value={vgmField.value ?? 0}
-                            onChange={(e) =>
-                              vgmField.onChange(
-                                parseFloat(e.target.value) || 0,
-                              )
-                            }
+                            onChange={(e) => vgmField.onChange(e.target.value)}
                            onBlur={vgmField.onBlur}
                            type="number"
                            aria-invalid={fieldState.invalid}
--- a/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/new-booking-form/step6-wagon-allocation.tsx
@@ -1,11 +1,6 @@
-import { Controller, type UseFormReturn } from "react-hook-form";
-import { AlertTriangle } from "lucide-react";
-import { Separator } from "@edr/ui-common";
-import {
-  type BookingFormValues,
-  type WagonCalcResult,
-} from "./schema";
-import { AlertBox, OptionCard, StepHeader, StepLabel } from "./shared";
+import { type UseFormReturn } from "react-hook-form";
+import { type BookingFormValues, type WagonCalcResult } from "./schema";
+import { AlertBox, StepHeader, StepLabel } from "./shared";

 type BookingForm = UseFormReturn<BookingFormValues>;

@@ -17,13 +12,14 @@ export function Step6WagonAllocation({
  wagons: WagonCalcResult | null;
 }) {
  const containers = form.watch("containers") ?? [];
-  const totalContainers = containers.reduce((sum, c) => sum + (c.qty || 0), 0);
+  const totalContainers = containers.reduce(
+    (sum, c) => sum + Number(c.qty || 0),
+    0,
+  );
  const containerSummary = containers
-    .filter((c) => c.qty > 0)
+    .filter((c) => +c.qty > 0)
    .map((c) => `${c.qty} × ${c.type}`)
    .join(", ");
-  const consolidationEnabled = form.watch("consolidationEnabled");
-
  return (
    <div className="space-y-6">
      <StepHeader
@@ -62,74 +58,50 @@ export function Step6WagonAllocation({
          <div>
            <StepLabel>Wagon Layout</StepLabel>
            <div className="mt-2 flex flex-wrap gap-2">
-              {Array.from({ length: wagons.totalWagons }, (_, index) => {
-                const isOdd =
-                  wagons.hasOddUnit && index === wagons.totalWagons - 1;
-                return (
-                  <div
-                    key={index}
-                    className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold ${isOdd
-                        ? "border-amber-300 bg-amber-50 text-amber-700"
-                        : "border-primary/30 bg-primary/5 text-primary"
-                      }`}
-                  >
-                    {isOdd ? "1 × 20ft (1/2)" : "2 × 20ft"}
-                  </div>
-                );
-              })}
+              {new Array(wagons.ft40Wagons).fill(0).map((_, index) => (
+                <div
+                  key={index}
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
+border-primary/30 bg-primary/5 text-primary `}
+                >
+                  1 × 40ft
+                </div>
+              ))}
+              {new Array(wagons.sharedWagons).fill(0).map((_, index) => (
+                <div
+                  key={index}
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold 
+ border-amber-300 bg-amber-50 text-amber-700
+`}
+                >
+                  2 × 20ft
+                </div>
+              ))}
+              {wagons.hasOddUnit && (
+                <div
+                  className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold border-destructive! bg-destructive/10 text-destructive `}
+                >
+                  1 × 20ft
+                </div>
+              )}
            </div>
          </div>

-          <p className="text-xs text-muted-foreground">
-            {containers.some((c) => c.type === "40ft")
-              ? "1 × 40ft = 1 Rail Wagon"
-              : `CEILING(${totalContainers} / 2) = ${wagons.totalWagons} Rail Wagon${wagons.totalWagons > 1 ? "s" : ""} — 2 × 20ft = 1 Wagon`}
-          </p>
-
          {wagons.hasOddUnit && (
            <>
-              <Separator />
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <AlertTriangle className="h-4 w-4 text-amber-500" />
-                  <p className="text-sm font-medium">
-                    Consolidation Option (US-07)
-                  </p>
+              <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>
-                <p className="text-xs text-muted-foreground">
-                  You have 1 unpaired 20ft container. Opt in to share a wagon
-                  slot with another shipper to optimise costs, or request a
-                  dedicated wagon.
-                </p>
-                <Controller
-                  name="consolidationEnabled"
-                  control={form.control}
-                  render={({ field }) => (
-                    <div className="grid gap-2 sm:grid-cols-2">
-                      <OptionCard
-                        selected={consolidationEnabled}
-                        onClick={() => field.onChange(true)}
-                      >
-                        <p className="text-sm font-semibold">
-                          Allow Consolidation
-                        </p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Share a wagon slot. Billing split with co-loader.
-                        </p>
-                      </OptionCard>
-                      <OptionCard
-                        selected={!consolidationEnabled}
-                        onClick={() => field.onChange(false)}
-                      >
-                        <p className="text-sm font-semibold">Dedicated Wagon</p>
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          Exclusive slot. Standard single-party billing.
-                        </p>
-                      </OptionCard>
-                    </div>
-                  )}
-                />
-              </div>
+              </AlertBox>
            </>
          )}
        </>