chore: validate closed message (#4415)

* update error note
* add error message
Co-authored-by: Anik Brazeau <38330843+anikbrazeau@users.noreply.github.com>

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

@@ -6,12 +6,20 @@ import { useRehydrate } from "@lib/store/useTemplateStore";
 import Skeleton from "react-loading-skeleton";
 import React from "react";
 
+import { cn } from "@lib/utils";
+
+import {
+  MessageType,
+  ValidationMessage,
+} from "@clientComponents/globals/ValidationMessage/ValidationMessage";
+
 type ClosedMessageProps = {
+  valid: boolean;
   closedDetails?: ClosedDetails;
   setClosedDetails: (details: ClosedDetails) => void;
 };
 
-export const ClosedMessage = ({ closedDetails, setClosedDetails }: ClosedMessageProps) => {
+export const ClosedMessage = ({ valid, closedDetails, setClosedDetails }: ClosedMessageProps) => {
   const { t } = useTranslation("form-builder");
   const hasHydrated = useRehydrate();
 
@@ -37,6 +45,14 @@ export const ClosedMessage = ({ closedDetails, setClosedDetails }: ClosedMessage
     <>
       <p className="mb-2 font-bold">{t("closingDate.message.title")}</p>
       <p className="mb-4">{t("closingDate.message.text1")}</p>
+
+      <div
+        className={cn("mb-4 transition-opacity duration-500", !valid ? "opacity-100" : "opacity-0")}
+      >
+        <ValidationMessage show={!valid} messageType={MessageType.ERROR}>
+          {t("closingDate.message.errors.translation")}
+        </ValidationMessage>
+      </div>
       <div className="flex">
         <div className="relative w-1/2 border-1 border-r-4 border-gray-100 border-r-black">
           <label className="sr-only" htmlFor={`closed-en`}>

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

@@ -29,6 +29,19 @@ export const SetClosingDate = ({
 
   const [closedMessage, setClosedMessage] = useState<ClosedDetails | undefined>(closedDetails);
 
+  const validateClosedMessage = useCallback(() => {
+    const hasClosedMessageEn = closedMessage?.messageEn && closedMessage?.messageEn !== "";
+    const hasClosedMessageFr = closedMessage?.messageFr && closedMessage?.messageFr !== "";
+
+    // Ensure that both languages have a message if one of them has a message
+    if (hasClosedMessageEn || hasClosedMessageFr) {
+      if (!hasClosedMessageEn) return false;
+      if (!hasClosedMessageFr) return false;
+    }
+
+    return true;
+  }, [closedMessage]);
+
   const [status, setStatus] = useState(closingDate ? "closed" : "open");
 
   const handleToggle = (value: boolean) => {
@@ -79,9 +92,13 @@ export const SetClosingDate = ({
         />
       </div>
       <div className="mb-4 w-3/5">
-        <ClosedMessage closedDetails={closedMessage} setClosedDetails={setClosedMessage} />
+        <ClosedMessage
+          closedDetails={closedMessage}
+          setClosedDetails={setClosedMessage}
+          valid={validateClosedMessage()}
+        />
       </div>
-      <Button theme="secondary" onClick={saveFormStatus}>
+      <Button disabled={!validateClosedMessage()} theme="secondary" onClick={saveFormStatus}>
         {t("closingDate.saveButton")}
       </Button>
     </div>

i18n/translations/en/form-builder.json

@@ -880,7 +880,10 @@
     "savedErrorMessage": "There was an error saving your changes. Try again later or contact Support.",
     "message": {
       "title": "Customize the closed form message",
-      "text1": "Tell people trying to access the form when and why it closed and where to go next."
+      "text1": "Tell people trying to access the form when and why it closed and where to go next.",
+      "errors": {
+        "translation": "Provide equivalent content in both official languages."
+      }
     }
   },
   "errorSavingForm": {

i18n/translations/fr/form-builder.json

@@ -880,7 +880,10 @@
     "savedErrorMessage": "Une erreur s'est produite lors de l'enregistrement de vos modifications. Réessayez plus tard ou contacter l’équipe de soutien.",
     "message": {
       "title": " Personnaliser le message du formulaire fermé",
-      "text1": "Indiquer aux personnes qui tentent d'accéder au formulaire quand et pourquoi il s'est fermé et où aller ensuite."
+      "text1": "Indiquer aux personnes qui tentent d'accéder au formulaire quand et pourquoi il s'est fermé et où aller ensuite.",
+      "errors": {
+        "translation": "Veuillez fournir du contenu équivalent dans les deux langues officielles."
+      }
     }
   },
   "errorSavingForm": {

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.