Merge branch 'main' into feat/date-time

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/manage/close/ClosedDateBanner.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from "@i18n/client";
+import { Alert } from "@clientComponents/globals";
+import { formClosingDateEst } from "lib/utils/date/utcToEst";
+import { dateHasPast } from "lib/utils";
+
+export const ClosedDateBanner = ({ closingDate }: { closingDate?: string | null }) => {
+  const { t } = useTranslation("form-builder");
+
+  if (!closingDate) {
+    return null;
+  }
+
+  const isPastClosingDate = dateHasPast(Date.parse(closingDate));
+
+  const { month, day, year, hour, minute } = formClosingDateEst(closingDate);
+
+  const closedText = t("closingDate.banner.text", {
+    month,
+    day,
+    year,
+    hour,
+    minute,
+  });
+
+  if (!isPastClosingDate) {
+    return null;
+  }
+
+  return (
+    <Alert.Info>
+      <p className="mt-3 font-bold">{closedText}</p>
+    </Alert.Info>
+  );
+};

app/(gcforms)/[locale]/(form administration)/form-builder/[id]/settings/manage/close/SetClosingDate.tsx

@@ -10,6 +10,7 @@ import { Button } from "@clientComponents/globals";
 import { ClosingDateToggle } from "./ClosingDateToggle";
 import { ClosedMessage } from "./ClosedMessage";
 import { ClosedSuccess } from "./ClosedSuccess";
+import { ClosedDateBanner } from "./ClosedDateBanner";
 
 import { closeForm } from "@formBuilder/actions";
 import { ClosingDateDialog } from "./ClosingDateDialog";
@@ -87,6 +88,9 @@ export const SetClosingDate = ({
       <h2>{t("closingDate.title")}</h2>
       <h3>{t("closingDate.status")}</h3>
       <p className="mb-6">{t("closingDate.description")}</p>
+      <div className="w-3/5">
+        <ClosedDateBanner closingDate={closingDate} />
+      </div>
       <div className="mb-4">
         <ClosingDateToggle
           isChecked={status === "closed" ? false : true}

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

@@ -11,6 +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";
 
 export async function generateMetadata({
   params: { locale, props },
@@ -87,6 +88,7 @@ export default async function Page({
   return (
     <FormDisplayLayout formRecord={formRecord}>
       <div className={classes}>
+        <ClosingNotice language={language} closingDate={formRecord.closingDate} />
         <h1>{formTitle}</h1>
         <GCFormsProvider formRecord={formRecord}>
           <FormWrapper

components/clientComponents/forms/AddressComplete/ManagedCombobox.tsx

@@ -27,7 +27,7 @@ export const ManagedCombobox = React.forwardRef(
       baseValue,
       useFilter,
     } = props;
-    const classes = classnames("gc-combobox gcds-input-wrapper", className);
+    const classes = classnames("gc-combobox gcds-input-wrapper relative", className);
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [field, meta, helpers] = useField(props);
@@ -110,7 +110,7 @@ export const ManagedCombobox = React.forwardRef(
               items.map((item, index) => (
                 <li
                   className={cn(
-                    highlightedIndex === index && "bg-slate-300",
+                    highlightedIndex === index && "bg-gcds-blue-100",
                     selectedItem === item && "font-bold"
                   )}
                   key={item}

components/clientComponents/forms/AddressComplete/utils.ts

@@ -63,7 +63,10 @@ export const getAddressComponents = async (
   const frenchResult = addressCompleteResult.find((result) => result.Language === "FRE");
 
   // Pick ENG or FRE based on language. (en vs fr)
-  const resultData = language === "en" ? englishResult : frenchResult;
+  let resultData = language === "en" ? englishResult : frenchResult;
+  if (resultData === undefined) {
+    resultData = addressCompleteResult[0];
+  }
 
   const streetAddress =
     (resultData?.SubBuilding ? resultData?.SubBuilding + "-" : "") +

components/clientComponents/forms/ClosingNotice/Notice.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { isFutureDate } from "lib/utils/date/isFutureDate";
+import { useTranslation } from "@i18n/client";
+import { formClosingDateEst } from "lib/utils/date/utcToEst";
+
+export const Notice = ({ closingDate, language }: { closingDate?: string; language: string }) => {
+  const { t } = useTranslation("common");
+
+  if (!closingDate) {
+    return null;
+  }
+
+  if (!isFutureDate(closingDate)) {
+    return null;
+  }
+
+  const { month, day, year, hour, minute } = formClosingDateEst(closingDate, language);
+
+  return (
+    <div className="mb-4 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 />
+        <span className="font-bold">
+          {t("closingNotice.text2", {
+            month,
+            day,
+            year,
+            hour,
+            minute,
+          })}
+        </span>
+      </p>
+    </div>
+  );
+};

i18n/translations/en/common.json

@@ -196,5 +196,10 @@
     "type2": "NEW",
     "message2": "Build complex multi-page forms with display logic and branching. <a href='https://articles.alpha.canada.ca/forms-formulaires/setting-up-form-logic/' className='text-white hover:text-white'>Learn more</a>"
   },
+  "closingNotice": {
+    "title": "Form closing",
+    "text1": "Form accepting submissions until:",
+    "text2": "{{month}} {{day}}, {{year}} at {{hour}}:{{minute}} ET."
+  },
   "cancel": "Cancel"
 }

i18n/translations/en/form-builder.json

@@ -919,6 +919,9 @@
       "errors": {
         "translation": "Provide equivalent content in both official languages."
       }
+    },
+    "banner": {
+      "text": "Form closed on {{month}} {{day}}, {{year}} at {{hour}}:{{minute}} ET"
     }
   },
   "errorSavingForm": {

i18n/translations/fr/common.json

@@ -196,5 +196,10 @@
     "type2": "NOUVEAUTÉ",
     "message2": "Créez des formulaires complexes de plusieurs pages avec logique d’affichage et d’embranchement. <a href='https://articles.alpha.canada.ca/forms-formulaires/fr/configurer-formulaire-avec-logique/' className='text-white hover:text-white'>En savoir plus</a>"
   },
+  "closingNotice": {
+    "title": "Fermeture du formulaire",
+    "text1": "Les soumissions sont acceptées jusqu'au :",
+    "text2": "{{day}} {{month}} {{year}} à {{hour}} h {{minute}} HE"
+  },
   "cancel": "Annuler"
 }

i18n/translations/fr/form-builder.json

@@ -919,6 +919,9 @@
       "errors": {
         "translation": "Veuillez fournir du contenu équivalent dans les deux langues officielles."
       }
+    },
+    "banner": {
+      "text": "Le formulaire a été fermé le {{day}} {{month}} {{year}} à {{hour}} h {{minute}} HE"
     }
   },
   "errorSavingForm": {

lib/utils/date/isFutureDate.ts

@@ -0,0 +1,8 @@
+export const isFutureDate = (utcDate?: string) => {
+  if (!utcDate) {
+    return false;
+  }
+  const date = new Date(utcDate);
+  const now = new Date();
+  return date > now;
+};

lib/utils/date/utcToEst.ts

@@ -0,0 +1,36 @@
+export const formClosingDateEst = (utcDate: string, lang: string = "en") => {
+  const date = new Date(utcDate);
+
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: "America/New_York",
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  };
+
+  const locale = lang === "fr" ? "fr-CA" : "en-CA";
+
+  // Create a formatter for EST
+  const formatter = new Intl.DateTimeFormat(locale, options);
+
+  // Format the date in EST
+  const parts = formatter.formatToParts(date);
+
+  // Extract the parts
+  const month = parts.find((part) => part.type === "month")?.value;
+  const day = parts.find((part) => part.type === "day")?.value;
+  const year = parts.find((part) => part.type === "year")?.value;
+  const hour = parts.find((part) => part.type === "hour")?.value;
+  const minute = parts.find((part) => part.type === "minute")?.value;
+
+  return {
+    month,
+    day,
+    year,
+    hour,
+    minute,
+  };
+};

tailwind.config.js

@@ -150,6 +150,7 @@ module.exports = {
             100: blue[100].value,
             500: blue[500].value,
             700: blue[700].value,
+            750: blue[750].value,
             800: blue[800].value,
             850: blue[850].value,
             900: blue[900].value, // primary