add agency booking form validation

Author: wesleylui

src/app/_components/agencycomponents/agency-interactive-area.tsx

@@ -11,6 +11,7 @@ import { env } from "@/env";
 import { notify } from "@/lib/notifications";
 import { api } from "@/trpc/react";
 import { ViewMode } from "@/types/types";
+import { validateStringLength, validateTimeRange } from "@/types/validation";
 import TableView from "../agencypage/table-view";
 import CalendarView from "../calendar-view";
 import styles from "./agency-interactive-area.module.scss";
@@ -66,15 +67,24 @@ export const BookingInteractiveArea = ({ initialViewMode = ViewMode.CALENDAR }:
     },
 
     validate: {
-      title: (value) => (value.trim().length > 0 ? null : "Title is required"),
-      residentName: (value) => (value.trim().length > 0 ? null : "Resident name is required"),
-      contactInfo: (value) => (value.trim().length > 0 ? null : "Contact info is required"),
+      title: (value) => validateStringLength(value, 1, 150, "Booking name"),
+      residentName: (value) => validateStringLength(value, 1, 100, "Resident name"),
+      contactInfo: (value) => validateStringLength(value, 1, 150, "Contact information"),
+      additionalInfo: (value) => {
+        // Optional field, only validate max length if provided
+        if (value.trim().length === 0) return null;
+        return validateStringLength(value, 0, 500, "Additional information");
+      },
       startTime: (value) => (value.trim().length > 0 ? null : "Date and time is required"),
-      endTime: (value) => (value.trim().length > 0 ? null : "Date and time is required"),
-      purpose: (value) => (value.trim().length > 0 ? null : "Purpose is required"),
-      pickupAddress: (value) => (value.trim().length > 0 ? null : "Pickup address is required"),
-      destinationAddress: (value) =>
-        value.trim().length > 0 ? null : "Destination address is required",
+      endTime: (value, values) => {
+        // First check if required
+        if (value.trim().length === 0) return "Date and time is required";
+        // Then validate time range
+        return validateTimeRange(values.startTime, value);
+      },
+      purpose: (value) => validateStringLength(value, 1, 500, "Purpose of transport"),
+      pickupAddress: (value) => validateStringLength(value, 1, 300, "Pickup address"),
+      destinationAddress: (value) => validateStringLength(value, 1, 300, "Destination address"),
     },
   });
 

src/types/validation.ts

@@ -8,3 +8,52 @@ export const passwordSchema = z
   .regex(/[0-9]/, "Password must contain at least one number");
 
 export const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/**
+ * Validates a string's length with both minimum and maximum constraints.
+ * @param value - The string value to validate
+ * @param minLength - Minimum required length (default: 1)
+ * @param maxLength - Maximum allowed length
+ * @param fieldName - Human-readable field name for error messages
+ * @returns Error message string or null if valid
+ */
+export const validateStringLength = (
+  value: string,
+  minLength: number,
+  maxLength: number,
+  fieldName: string,
+): string | null => {
+  const trimmedValue = value.trim();
+
+  if (trimmedValue.length < minLength) {
+    return `${fieldName} is required`;
+  }
+
+  if (trimmedValue.length > maxLength) {
+    return `${fieldName} cannot exceed ${maxLength} characters`;
+  }
+
+  return null;
+};
+
+/**
+ * Validates that an end time is after a start time.
+ * @param startTime - ISO date string for start time
+ * @param endTime - ISO date string for end time
+ * @returns Error message string or null if valid
+ */
+export const validateTimeRange = (startTime: string, endTime: string): string | null => {
+  // Don't validate if either field is empty (let required validation handle that)
+  if (!startTime || !endTime) {
+    return null;
+  }
+
+  const start = new Date(startTime);
+  const end = new Date(endTime);
+
+  if (end <= start) {
+    return "End time must be after start time";
+  }
+
+  return null;
+};