add closing notice for preview page

add tests

add watch command

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/preview/Preview.tsx

@@ -9,6 +9,7 @@ import { FormProperties, PublicFormRecord } from "@lib/types";
 import { RichText } from "@clientComponents/forms";
 import { Button } from "@clientComponents/globals";
 import { NextButton } from "@clientComponents/forms/NextButton/NextButton";
+import { ClosingNotice } from "@clientComponents/forms/ClosingNotice/ClosingNotice";
 
 import {
   FormServerErrorCodes,
@@ -39,12 +40,15 @@ export const Preview = ({
 }) => {
   const { status } = useSession();
   const { i18n } = useTranslation(["common", "confirmation"]);
-  const { id, getSchema, getIsPublished, getSecurityAttribute } = useTemplateStore((s) => ({
-    id: s.id,
-    getSchema: s.getSchema,
-    getIsPublished: s.getIsPublished,
-    getSecurityAttribute: s.getSecurityAttribute,
-  }));
+  const { id, getSchema, getIsPublished, getSecurityAttribute, closingDate } = useTemplateStore(
+    (s) => ({
+      id: s.id,
+      getSchema: s.getSchema,
+      getIsPublished: s.getIsPublished,
+      getSecurityAttribute: s.getSecurityAttribute,
+      closingDate: s.closingDate,
+    })
+  );
 
   const isPastClosingDate = useIsFormClosed();
 
@@ -170,6 +174,7 @@ export const Preview = ({
           </div>
         ) : (
           <div className="gc-formview">
+            {closingDate && <ClosingNotice language={language} closingDate={closingDate} />}
             <h1 className="mt-4">
               {formRecord.form[localizeField(LocalizedFormProperties.TITLE, language)] ||
                 t("gcFormsTest", { ns: "form-builder" })}

app/(gcforms)/[locale]/(form filler)/id/[...props]/page.tsx

@@ -11,7 +11,7 @@ import { GCFormsProvider } from "@lib/hooks/useGCFormContext";
 import { FormWrapper } from "./clientSide";
 import { allowGrouping } from "@formBuilder/components/shared/right-panel/treeview/util/allowGrouping";
 import { serverTranslation } from "@i18n";
-import { Notice as ClosingNotice } from "@clientComponents/forms/ClosingNotice/Notice";
+import { ClosingNotice } from "@clientComponents/forms/ClosingNotice/ClosingNotice";
 
 export async function generateMetadata({
   params: { locale, props },

components/clientComponents/forms/ClosingNotice/Notice.tsx → components/clientComponents/forms/ClosingNotice/ClosingNotice.tsx

@@ -3,8 +3,15 @@
 import { isFutureDate } from "lib/utils/date/isFutureDate";
 import { useTranslation } from "@i18n/client";
 import { formClosingDateEst } from "lib/utils/date/utcToEst";
+import { logMessage } from "@lib/logger";
 
-export const Notice = ({ closingDate, language }: { closingDate?: string; language: string }) => {
+export const ClosingNotice = ({
+  closingDate,
+  language,
+}: {
+  closingDate?: string;
+  language: string;
+}) => {
   const { t } = useTranslation("common");
 
   if (!closingDate) {
@@ -15,10 +22,21 @@ export const Notice = ({ closingDate, language }: { closingDate?: string; langua
     return null;
   }
 
-  const { month, day, year, hour, minute } = formClosingDateEst(closingDate, language);
+  let month, day, year, hour, minute;
+
+  try {
+    ({ month, day, year, hour, minute } = formClosingDateEst(closingDate, language));
+  } catch (error) {
+    logMessage.info("Unable to parse closing date", closingDate);
+    return null;
+  }
+
+  if (!month || !day || !year || !hour || !minute) {
+    return null;
+  }
 
   return (
-    <div className="mb-4 w-3/5 border-l-8 border-gcds-blue-750 pl-4">
+    <div className="mb-6 w-3/5 border-l-8 border-gcds-blue-750 pl-4">
       <div className="mb-6 font-bold text-gcds-blue-750">{t("closingNotice.title")}</div>
       <p className="pb-2">
         {t("closingNotice.text1")} <br />

lib/utils/date/utcToEst.vitest.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { formClosingDateEst } from './utcToEst';
+
+describe('utcToEst', () => {
+  it('should convert UTC date to EST date in English', () => {
+    const utcDate = '2023-10-01T12:00:00Z';
+    const lang = 'en';
+    const result = formClosingDateEst(utcDate, lang);
+    expect(result).toStrictEqual({
+      "day": "01",
+      "hour": "08",
+      "minute": "00",
+      "month": "October",
+      "year": "2023",
+    });
+  });
+
+  it('should convert UTC date to EST date in French', () => {
+    const utcDate = '2023-10-01T12:00:00Z';
+    const lang = 'fr';
+    const result = formClosingDateEst(utcDate, lang);
+    expect(result).toStrictEqual({
+      "day": "01",
+      "hour": "08",
+      "minute": "00",
+      "month": "octobre",
+      "year": "2023",
+    });
+  });
+
+  it('should handle invalid date input', () => {
+    const utcDate = 'invalid-date';
+    const lang = 'en';
+    expect(() => formClosingDateEst(utcDate, lang)).toThrow();
+  });
+});

package.json

@@ -40,6 +40,7 @@
     "format:check": "prettier --check .",
     "test": "jest",
     "test:vitest": "vitest run",
+    "test:watch:vitest": "vitest --watch",
     "test:watch": "DEBUG_PRINT_LIMIT=10000  jest --watch",
     "cypress": "cypress open",
     "cypress:run": "CYPRESS_DEBUG=true cypress run --browser chrome",

vitest.config.mts

@@ -6,7 +6,7 @@ export default defineConfig({
   test: {
     globals: true, // migration from Jest - By default, vitest does not provide global APIs for explicitness
     environment: "node",
-    // TODO: remove include after complete Vitest migration
-    include: ["__vitests__/**/*.test.ts", "lib/vitests/**/*.test.ts"],
+    // Note: The following pattern .vi.test.ts has been added to avoid conflicts with jest tests co-located with the source code
+    include: ["__vitests__/**/*.test.ts", "lib/vitests/**/*.test.ts", "**/*.vitest.+(ts|tsx|js|jsx)"],
   },
 });