From 3d301653fbcee32c34c6071936d7054e3acd8ed8 Mon Sep 17 00:00:00 2001
From: Wissam Moussa <wissam.moussa@cds-snc.ca>
Date: Tue, 2 Jan 2024 19:17:04 -0500
Subject: [PATCH 1/4] disable submit button if error detected

---
 .../app/responses/Dialogs/ConfirmDialog.tsx      | 16 +++++++++++-----
 .../locales/en/form-builder-responses.json       |  2 +-
 .../locales/fr/form-builder-responses.json       |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
index 4003c1972c..bfa99811c6 100644
--- a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
+++ b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useTranslation } from "next-i18next";
+import { useTranslation, Trans } from "next-i18next";
 import { useDialogRef, Dialog } from "@components/form-builder/app/shared";
 import { LineItemEntries } from "./line-item-entries";
 import { Button, Alert } from "@components/globals";
@@ -149,9 +149,12 @@ export const ConfirmDialog = ({
                     {t("downloadResponsesModals.confirmReceiptDialog.errors.invalidEntry.title")}
                   </Alert.Title>
                   <p>
-                    {t(
-                      "downloadResponsesModals.confirmReceiptDialog.errors.invalidEntry.description"
-                    )}
+                    <Trans
+                      ns="form-builder-responses"
+                      i18nKey="downloadResponsesModals.confirmReceiptDialog.errors.invalidEntry.description"
+                    >
+                      <i></i>
+                    </Trans>
                   </p>
                 </Alert.Danger>
               )}
@@ -210,7 +213,10 @@ export const ConfirmDialog = ({
                 <Button theme="secondary" onClick={handleClose}>
                   {t("downloadResponsesModals.cancel")}
                 </Button>
-                <Button onClick={handleSubmit} disabled={status === DialogStates.SENDING}>
+                <Button
+                  onClick={handleSubmit}
+                  disabled={status === DialogStates.SENDING || status === DialogStates.FORMAT_ERROR}
+                >
                   {status === DialogStates.SENDING
                     ? t("downloadResponsesModals.sending")
                     : t("downloadResponsesModals.confirmReceiptDialog.confirmReceipt")}
diff --git a/public/static/locales/en/form-builder-responses.json b/public/static/locales/en/form-builder-responses.json
index 8f7ef95da5..195aa7429b 100644
--- a/public/static/locales/en/form-builder-responses.json
+++ b/public/static/locales/en/form-builder-responses.json
@@ -193,7 +193,7 @@
         },
         "invalidEntry": {
           "title": "The receipt code does not match the required format",
-          "description": "Check that the receipt code format is correct and try again."
+          "description": "Receipt codes for sign off are found in the <0>Official receipt and record</0> file that downloaded with your responses."
         },
         "unknown": {
           "title": "Sorry, there’s a problem with the site",
diff --git a/public/static/locales/fr/form-builder-responses.json b/public/static/locales/fr/form-builder-responses.json
index 45c2ab6350..33d6bc7af8 100644
--- a/public/static/locales/fr/form-builder-responses.json
+++ b/public/static/locales/fr/form-builder-responses.json
@@ -193,7 +193,7 @@
         },
         "invalidEntry": {
           "title": "Le code de réception ne correspond pas au format requis",
-          "description": "Vérifiez que le format du code de réception est correct et réessayez."
+          "description": "Les codes de réception pour l'approbation se trouvent dans le fichier <0>Reçu et registre officiel</0> qui a été téléchargé avec vos réponses."
         },
         "unknown": {
           "title": "Désolé, il y a un problème avec le site",

From 6cc56bd9c3730b476dc030f3b9af2c0005d45469 Mon Sep 17 00:00:00 2001
From: Wissam Moussa <wissam.moussa@cds-snc.ca>
Date: Wed, 3 Jan 2024 11:53:00 -0500
Subject: [PATCH 2/4] using named tag for Trans component

---
 .../form-builder/app/responses/Dialogs/ConfirmDialog.tsx    | 6 +++---
 public/static/locales/en/form-builder-responses.json        | 2 +-
 public/static/locales/fr/form-builder-responses.json        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
index bfa99811c6..2d66220202 100644
--- a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
+++ b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
@@ -152,9 +152,9 @@ export const ConfirmDialog = ({
                     <Trans
                       ns="form-builder-responses"
                       i18nKey="downloadResponsesModals.confirmReceiptDialog.errors.invalidEntry.description"
-                    >
-                      <i></i>
-                    </Trans>
+                      defaults="<italic></italic>" // indicate to translator: text with italic HTML element
+                      components={{ italic: <i /> }}
+                    ></Trans>
                   </p>
                 </Alert.Danger>
               )}
diff --git a/public/static/locales/en/form-builder-responses.json b/public/static/locales/en/form-builder-responses.json
index 195aa7429b..1bb536c56b 100644
--- a/public/static/locales/en/form-builder-responses.json
+++ b/public/static/locales/en/form-builder-responses.json
@@ -193,7 +193,7 @@
         },
         "invalidEntry": {
           "title": "The receipt code does not match the required format",
-          "description": "Receipt codes for sign off are found in the <0>Official receipt and record</0> file that downloaded with your responses."
+          "description": "Receipt codes for sign off are found in the <italic>Official receipt and record</italic> file that downloaded with your responses."
         },
         "unknown": {
           "title": "Sorry, there’s a problem with the site",
diff --git a/public/static/locales/fr/form-builder-responses.json b/public/static/locales/fr/form-builder-responses.json
index 33d6bc7af8..ccc808f1cd 100644
--- a/public/static/locales/fr/form-builder-responses.json
+++ b/public/static/locales/fr/form-builder-responses.json
@@ -193,7 +193,7 @@
         },
         "invalidEntry": {
           "title": "Le code de réception ne correspond pas au format requis",
-          "description": "Les codes de réception pour l'approbation se trouvent dans le fichier <0>Reçu et registre officiel</0> qui a été téléchargé avec vos réponses."
+          "description": "Les codes de réception pour l'approbation se trouvent dans le fichier <italic>Reçu et registre officiel</italic> qui a été téléchargé avec vos réponses."
         },
         "unknown": {
           "title": "Désolé, il y a un problème avec le site",

From c55c988ec19f7aa5b97008d2049b26ebab6458c1 Mon Sep 17 00:00:00 2001
From: Wissam Moussa <wissam.moussa@cds-snc.ca>
Date: Wed, 3 Jan 2024 13:33:04 -0500
Subject: [PATCH 3/4] modifying the dialog content based on designer input

---
 .../app/responses/Dialogs/ConfirmDialog.tsx      | 16 ++++++++++++----
 .../locales/en/form-builder-responses.json       |  8 ++++----
 .../locales/fr/form-builder-responses.json       |  8 ++++----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
index 2d66220202..732af30517 100644
--- a/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
+++ b/components/form-builder/app/responses/Dialogs/ConfirmDialog.tsx
@@ -189,10 +189,13 @@ export const ConfirmDialog = ({
               )}
             </div>
             <div className="py-4">
-              <h4>{t("downloadResponsesModals.confirmReceiptDialog.contentHeading")}</h4>
-              <p>{t("downloadResponsesModals.confirmReceiptDialog.contentBody")}</p>
-              <p className="mb-2 mt-10 font-bold" id={confirmInstructionId}>
-                {t("downloadResponsesModals.confirmReceiptDialog.copyCode")}
+              <p className="font-bold" id={confirmInstructionId}>
+                <Trans
+                  ns="form-builder-responses"
+                  i18nKey="downloadResponsesModals.confirmReceiptDialog.copyCode"
+                  defaults="<italic></italic>" // indicate to translator: text with italic HTML element
+                  components={{ italic: <i /> }}
+                ></Trans>
               </p>
               <p className="mb-4">
                 {t("downloadResponsesModals.confirmReceiptDialog.copyCodeNote")}
@@ -209,6 +212,11 @@ export const ConfirmDialog = ({
                 setStatus={setStatus}
               ></LineItemEntries>
 
+              <p className="mb-2 mt-10 font-bold">
+                {t("downloadResponsesModals.confirmReceiptDialog.contentHeading")}
+              </p>
+              <p>{t("downloadResponsesModals.confirmReceiptDialog.contentBody")}</p>
+
               <div className="mt-4 flex gap-4">
                 <Button theme="secondary" onClick={handleClose}>
                   {t("downloadResponsesModals.cancel")}
diff --git a/public/static/locales/en/form-builder-responses.json b/public/static/locales/en/form-builder-responses.json
index 1bb536c56b..8e3542c156 100644
--- a/public/static/locales/en/form-builder-responses.json
+++ b/public/static/locales/en/form-builder-responses.json
@@ -174,10 +174,10 @@
     "confirmReceiptDialog": {
       "title": "Sign off on the removal of responses from GC Forms",
       "contentHeading": "GC Forms requires verification that responses were downloaded successfully",
-      "contentBody": "Why? Because things can go wrong when digital files move between computers. This step helps to verify that all files made it safely to your computer from GC Forms.",
-      "copyCode": "Copy-paste receipt codes from the 'Official receipt and record of responses' to confirm you have responses.",
-      "copyCodeNote": "Use the “Copy receipt codes” button at the top of the receipt file.",
-      "confirmReceipt": "Sign off on removal of responses",
+      "contentBody": "Why? Because things can go wrong when digital files move between computers. This step helps to verify that all files made it safely to your computer.",
+      "copyCode": "Copy-paste receipt codes from the <italic>Official Receipt and Record</italic> file",
+      "copyCodeNote": "Use button at the top of the receipt file you got with the downloaded responses",
+      "confirmReceipt": "Submit receipt codes",
       "errors": {
         "minEntries": {
           "title": "At least one response must be specified",
diff --git a/public/static/locales/fr/form-builder-responses.json b/public/static/locales/fr/form-builder-responses.json
index ccc808f1cd..487c26dbfb 100644
--- a/public/static/locales/fr/form-builder-responses.json
+++ b/public/static/locales/fr/form-builder-responses.json
@@ -174,10 +174,10 @@
     "confirmReceiptDialog": {
       "title": "Approuver la suppression des réponses de Formulaires GC",
       "contentHeading": "Formulaires GC doit vérifier que les réponses ont bien été téléchargées.",
-      "contentBody": "Pourquoi? Parce que les choses peuvent mal tourner lorsque des fichiers numériques passent d’un ordinateur à un autre. Cette étape sert à vérifier que les fichiers ont été téléchargés en toute sécurité sur votre ordinateur de Formulaires GC.",
-      "copyCode": "Copiez-collez les codes de réception du « Reçu et registre officiel des réponses » pour confirmer que vous avez bien reçu les réponses.",
-      "copyCodeNote": "Utilisez le bouton « Copier les codes de réception » en haut du fichier de reçu HTML.",
-      "confirmReceipt": "Approuver la suppression de réponses",
+      "contentBody": "Pourquoi? Parce que les choses peuvent mal tourner lorsque des fichiers numériques passent d’un ordinateur à un autre. Cette étape sert à vérifier que les fichiers ont été téléchargés en toute sécurité sur votre ordinateur.",
+      "copyCode": "Copiez-collez les codes de réception du fichier <italic>Reçu et registre officiel des réponses</italic>",
+      "copyCodeNote": "Utilisez le bouton en haut du fichier de reçu que vous avez eu avec les réponses téléchargées.",
+      "confirmReceipt": "Soumettre les codes de réception",
       "errors": {
         "minEntries": {
           "title": "Au moins une réponse doit être spécifiée",

From e4610a4db1a78a1aec082799ad56b5fe4c8afd1c Mon Sep 17 00:00:00 2001
From: Wissam Moussa <wissam.moussa@cds-snc.ca>
Date: Fri, 5 Jan 2024 12:56:33 -0500
Subject: [PATCH 4/4] reset error onpaste

---
 .../line-item-entries/LineItemEntries.tsx     | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/form-builder/app/responses/Dialogs/line-item-entries/LineItemEntries.tsx b/components/form-builder/app/responses/Dialogs/line-item-entries/LineItemEntries.tsx
index 15b4c05736..49e2a3483a 100644
--- a/components/form-builder/app/responses/Dialogs/line-item-entries/LineItemEntries.tsx
+++ b/components/form-builder/app/responses/Dialogs/line-item-entries/LineItemEntries.tsx
@@ -102,6 +102,21 @@ export const LineItemEntries = ({
     }
   };
 
+  const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    setStatus(DialogStates.EDITING); // Reset any errors
+    const pastedText = e.clipboardData.getData("Text");
+    const pastedTextArray = pastedText.split(/\r?\n/);
+    const cleanedText = pastedTextArray.flatMap((text) => {
+      const cleanedText = text.trim().replace(",", "").replaceAll("\t", "").toLowerCase();
+      if (validateInput && !validateInput(cleanedText)) {
+        setStatus(DialogStates.FORMAT_ERROR);
+      }
+      return cleanedText;
+    });
+    setInputs([...new Set([...inputs, ...cleanedText])]);
+    e.preventDefault();
+  };
+
   useEffect(() => {
     scrollToBottom(containerRef?.current as HTMLElement);
   }, [inputs]);
@@ -133,19 +148,7 @@ export const LineItemEntries = ({
           onBlur={onBlur}
           spellCheck="false"
           autoComplete="off"
-          onPaste={(e) => {
-            const pastedText = e.clipboardData.getData("Text");
-            const pastedTextArray = pastedText.split(/\r?\n/);
-            const cleanedText = pastedTextArray.flatMap((text) => {
-              const cleanedText = text.trim().replace(",", "").replaceAll("\t", "").toLowerCase();
-              if (validateInput && !validateInput(cleanedText)) {
-                setStatus(DialogStates.FORMAT_ERROR);
-              }
-              return cleanedText;
-            });
-            setInputs([...new Set([...inputs, ...cleanedText])]);
-            e.preventDefault();
-          }}
+          onPaste={onPaste}
           aria-labelledby={inputLabelId}
         />
       </div>