Relocate formatReviewFields

Author: kydecker

src/components/react/forms/FormReviewTable/FormReviewTable.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
 import type { StepConfig } from "@/components/react/forms/FormContainer";
 import { resolveVisibleFields } from "@/components/react/forms/FormContainer/resolveVisibleFields";
 import type { FormData } from "@/constants/fields";
-import { formatFieldValue, getFieldLabel } from "./fieldFormatters";
+import { formatFieldValue, getFieldLabel } from "@/utils/formatReviewFields";
 import "./FormReviewTable.css";
 import { smartquotes } from "@/utils/smartquotes";
 

src/utils/__tests__/formatReviewFields.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { formatFieldValue, getFieldLabel } from "../formatReviewFields";
+
+describe("formatFieldValue", () => {
+  describe("boolean fields", () => {
+    it("formats true as 'Yes'", () => {
+      expect(formatFieldValue("isCurrentlyUnhoused", true)).toBe("Yes");
+    });
+
+    it("formats false as 'No'", () => {
+      expect(formatFieldValue("isCurrentlyUnhoused", false)).toBe("No");
+    });
+
+    it("treats undefined as false and formats as 'No'", () => {
+      expect(formatFieldValue("isCurrentlyUnhoused", undefined)).toBe("No");
+    });
+
+    it("treats null as false and formats as 'No'", () => {
+      expect(formatFieldValue("isCurrentlyUnhoused", null)).toBe("No");
+    });
+  });
+
+  describe("string fields", () => {
+    it("formats string values", () => {
+      expect(formatFieldValue("oldFirstName", "John")).toBe("John");
+    });
+
+    it("returns undefined for empty string", () => {
+      expect(formatFieldValue("oldFirstName", "")).toBeUndefined();
+    });
+
+    it("returns undefined for undefined", () => {
+      expect(formatFieldValue("oldFirstName", undefined)).toBeUndefined();
+    });
+
+    it("returns undefined for null", () => {
+      expect(formatFieldValue("oldFirstName", null)).toBeUndefined();
+    });
+  });
+
+  describe("string[] fields", () => {
+    it("formats array of strings", () => {
+      expect(formatFieldValue("pronouns", ["they/them", "she/her"])).toBe(
+        "they/them, she/her",
+      );
+    });
+
+    it("returns undefined for empty array", () => {
+      expect(formatFieldValue("pronouns", [])).toBeUndefined();
+    });
+
+    it("returns undefined for undefined", () => {
+      expect(formatFieldValue("pronouns", undefined)).toBeUndefined();
+    });
+
+    it("returns undefined for null", () => {
+      expect(formatFieldValue("pronouns", null)).toBeUndefined();
+    });
+  });
+
+  describe("phone number formatting", () => {
+    it("formats phone number", () => {
+      expect(formatFieldValue("phoneNumber", "(123) 456-7890")).toBe(
+        "(123) 456-7890",
+      );
+    });
+
+    it("returns undefined for empty phone number", () => {
+      expect(formatFieldValue("phoneNumber", "")).toBeUndefined();
+    });
+  });
+
+  describe("date formatting", () => {
+    it("formats ISO date string", () => {
+      const result = formatFieldValue("dateOfBirth", "1990-01-15");
+      expect(result).toBe("January 15, 1990");
+    });
+
+    it("returns undefined for empty date", () => {
+      expect(formatFieldValue("dateOfBirth", "")).toBeUndefined();
+    });
+  });
+});
+
+describe("getFieldLabel", () => {
+  it("returns the label for a known field", () => {
+    expect(getFieldLabel("isCurrentlyUnhoused")).toBe("Currently unhoused?");
+  });
+
+  it("returns the label for another field", () => {
+    expect(getFieldLabel("oldFirstName")).toBe("Old first name");
+  });
+
+  it("returns the field name if not found", () => {
+    // @ts-expect-error - testing with invalid field name
+    expect(getFieldLabel("unknownField")).toBe("unknownField");
+  });
+});
+

…forms/FormReviewTable/fieldFormatters.ts src/utils/formatReviewFields.tssrc/components/react/forms/FormReviewTable/fieldFormatters.ts renamed to src/utils/formatReviewFields.ts src/components/react/forms/FormReviewTable/fieldFormatters.ts renamed to src/utils/formatReviewFields.ts

@@ -1,3 +1,4 @@
+import { parseDate } from "@internationalized/date";
 import { FIELD_DEFS, type FieldName } from "@/constants/fields";
 
 /**
@@ -9,21 +10,26 @@ export function formatFieldValue(
   fieldName: FieldName,
   value: any,
 ): string | undefined {
-  // Handle empty values - return undefined to trigger warning display
-  if (value === null || value === undefined || value === "") {
-    return undefined;
-  }
-
   // Get the field definition to determine the type
   const fieldDef = FIELD_DEFS.find((def) => def.name === fieldName);
   if (!fieldDef) {
     return String(value);
   }
 
+  // Handle empty values - return undefined to trigger warning display
+  // Exception: boolean fields treat undefined/null as false (unchecked checkbox)
+  if (
+    fieldDef.type !== "boolean" &&
+    (value === null || value === undefined || value === "")
+  ) {
+    return undefined;
+  }
+
   // Format based on type
   switch (fieldDef.type) {
     case "boolean":
-      return value === true ? "Yes" : value === false ? "No" : undefined;
+      // Treat undefined/null as false for boolean fields (single checkboxes default to unchecked)
+      return value === true ? "Yes" : "No";
 
     case "string[]":
       if (Array.isArray(value)) {
@@ -47,33 +53,24 @@ export function formatFieldValue(
   }
 }
 
-/**
- * Formats a phone number for display
- */
 function formatPhoneNumber(phone: string): string | undefined {
   if (!phone) return undefined;
   // Phone is already formatted by the mask, just return as-is
   return phone;
 }
 
-/**
- * Formats a date for display
- */
 function formatDate(date: string): string | undefined {
   if (!date) return undefined;
-  // Assuming date is in ISO format or similar, format it nicely
   try {
-    const dateObj = new Date(date);
-    if (Number.isNaN(dateObj.getTime())) {
-      return date; // Return as-is if not a valid date
-    }
-    return dateObj.toLocaleDateString("en-US", {
+    const calendarDate = parseDate(date);
+    return calendarDate.toDate("UTC").toLocaleDateString("en-US", {
       year: "numeric",
       month: "long",
       day: "numeric",
+      timeZone: "UTC",
     });
   } catch {
-    return date;
+    return date; // Return as-is if parsing fails
   }
 }