Merge pull request #460 from DTS-STN/status-page-changes

feature: text and layout changes for status page

public/locales/en/status.json

@@ -1,11 +1,11 @@
 {
   "date-of-birth": {
     "error": {
-      "current": "The applicant date of birth must be in the past.",
-      "invalid": "The applicant date of birth must be valid in the following format: YYYY-MM-DD (Year-Month-Day).",
-      "required": "The applicant date of birth is required."
+      "current": "The date of birth must be in the past.",
+      "invalid": "The date of birth must be valid in the following format: YYYY-MM-DD (Year-Month-Day).",
+      "required": "The date of birth is required."
     },
-    "label": "Applicant date of birth"
+    "label": "Date of birth, as you detailed on the application"
   },
   "check-again": "Check the status of another application",
   "check-status": "Check Status",
@@ -14,14 +14,15 @@
     "error": {
       "required": "The file number is required."
     },
-    "help": "If you can't find your file number or reference number, you can <Link>request to receive it</Link>.",
+    "help-message": "If you can't find your file number or reference number, you can <Link>request to receive it</Link>.",
     "label": "File number or reference number"
   },
   "given-name": {
     "error": {
-      "required": "The given name(s) of applicant is required."
+      "required": "The given name(s) is required."
     },
-    "label": "Given name(s) of applicant"
+    "label": "Given name(s), as you detailed on the application",
+    "help-message": "Enter first name(s) and any middle name(s)."
   },
   "previous": "Check the status of another application",
   "reset": "Check the status of another application",
@@ -57,9 +58,10 @@
   "status-is": "The latest status of your application according to our records is:",
   "surname": {
     "error": {
-      "required": "The surname of applicant is required."
+      "required": "The surname is required."
     },
-    "label": "Surname of applicant"
+    "label": "Surname, as you detailed on the application",
+    "help-message": "Enter last name."
   },
   "cannot-provide-result": {
     "title": "We cannot provide a result at this time because:",

public/locales/fr/status.json

@@ -1,11 +1,11 @@
 {
   "date-of-birth": {
     "error": {
-      "current": "La date de naissance du requérant doit être dans le passé.",
-      "invalid": "La date de naissance du requérant doit être valide selon le format suivant\u00a0: aaaa-MM-jj (Année-Mois-Jour).",
-      "required": "La date de naissance du requérant est obligatoire."
+      "current": "La date de naissance doit être dans le passé.",
+      "invalid": "La date de naissance doit être valide selon le format suivant\u00a0: aaaa-MM-jj (Année-Mois-Jour).",
+      "required": "La date de naissance est obligatoire."
     },
-    "label": "Date de naissance du requérant"
+    "label": "Date de naissance, comme vous l'avez indiqué sur la demande"
   },
   "check-again": "Vérifier l'état d'une autre demande",
   "check-status": "Vérifiez l'état",
@@ -14,14 +14,15 @@
     "error": {
       "required": "Le numéro de dossier est obligatoire."
     },
-    "help": "Si vous ne pouvez pas trouver votre numéro de dossier ou votre numéro de référence, <Link>vous pouvez demander à le recevoir</Link>.",
+    "help-message": "Si vous ne pouvez pas trouver votre numéro de dossier ou votre numéro de référence, <Link>vous pouvez demander à le recevoir</Link>.",
     "label": "Numéro de dossier ou numéro de référence"
   },
   "given-name": {
     "error": {
-      "required": "Le(s) prénom(s) du requérant est(sont) obligatoire(s)."
+      "required": "Le(s) prénom(s) est(sont) obligatoire(s)."
     },
-    "label": "Prénom(s) du requérant"
+    "label": "Prénom(s), comme vous l'avez indiqué sur la demande",
+    "help-message": "Entrez le(s) prénom(s) et le(s) deuxième(s) prénom(s)."
   },
   "previous": "Vérifier l'état d'une autre demande",
   "reset": "Vérifier l'état d'une autre demande",
@@ -57,9 +58,10 @@
   "status-is": "L'état le plus récent de votre demande selon nos dossiers est\u00a0:",
   "surname": {
     "error": {
-      "required": "Le nom de famille du requérant est obligatoire."
+      "required": "Le nom de famille est obligatoire."
     },
-    "label": "Nom de famille du requérant"
+    "label": "Nom de famille, comme vous l'avez indiqué sur la demande",
+    "help-message": "Entrez le nom de famille."
   },
   "cannot-provide-result": {
     "title": "Nous ne pouvons pas fournir de résultat pour le moment car:",

src/pages/status.tsx

@@ -200,7 +200,7 @@ const Status = () => {
             </ul>
 
             <AlertSection type="info" className="mb-4">
-              <h2 className="h2 mt-0">{t('child-applications.header')}</h2>
+              <h2 className="h3 mb-3">{t('child-applications.header')}</h2>
               <p>{t('child-applications.description')}</p>
             </AlertSection>
 
@@ -224,15 +224,13 @@ const Status = () => {
               textRequired={t('common:required')}
               required
               helpMessage={
-                <p>
-                  <Trans
-                    i18nKey="esrf.help"
-                    ns="status"
-                    components={{
-                      Link: <Link href="/email" />,
-                    }}
-                  />
-                </p>
+                <Trans
+                  i18nKey="esrf.help-message"
+                  ns="status"
+                  components={{
+                    Link: <Link href="/email" />,
+                  }}
+                />
               }
             />
             <InputField
@@ -246,6 +244,7 @@ const Status = () => {
               }
               textRequired={t('common:required')}
               required
+              helpMessage={t('given-name.help-message')}
             />
             <InputField
               id="surname"
@@ -258,6 +257,7 @@ const Status = () => {
               }
               textRequired={t('common:required')}
               required
+              helpMessage={t('surname.help-message')}
             />
             <DateSelectField
               id="dateOfBirth"