feature: text and layout changes for email file number

public/locales/en/email.json

@@ -5,27 +5,31 @@
     "error": {
       "required": "The email address is required.",
       "valid": "The email address must be valid."
-    }
+    },
+    "help-message": "Enter it exactly as provided on your passport application form.",
+    "help-message-secondary": "<strong>For child applications,</strong> provide the full email address for the applicant parent or legal guardian exactly as provided on the passport application."
   },
   "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)."
   },
   "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."
   },
   "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"
   },
   "email-esrf": "Email me the file number or reference number",
   "email-sent-confirmation": "An email has been sent if there was a match in our records with the file number (ESRF).",
@@ -49,10 +53,6 @@
     "desc": "Please accept the Privacy and Email terms as well as give your consent before getting your file number (ESRF)",
     "button": "Privacy and Email terms"
   },
-  "help-message": {
-    "email": "Enter it exactly as provided on your passport application form.",
-    "for-child-application": "<strong>For child applications,</strong> provide the full email address for the applicant parent or legal guardian exactly as provided on their passport application."
-  },
   "header-messages": {
     "matches": "<strong>Make sure your information matches the proof of citizenship and supporting ID used when you applied for a passport.</strong> Your proof of citizenship could be one of the following:",
     "list": {

public/locales/en/expectations.json

@@ -33,7 +33,7 @@
     "4-link": "https://www.microsoft.com/en-ca/trust-center/privacy",
     "5": "Your personal information is administered in accordance with the <em>Department of Employment and Social Development Act</em>, <em>Privacy Act</em>, and other applicable laws. You have the right of access to and protection of your personal information, which is described in Personal Information Bank – Passport Program (ESDC PPU 708). Instructions for obtaining this information are outlined in the government publication titled, <Link>Information about Programs and Information Holdings</Link>.",
     "5-link": "https://www.canada.ca/en/employment-social-development/corporate/transparency/access-information/reports/infosource.html",
-    "6": "If you are not satisfied with ESDC’s response to your privacy concerns, you have the right to <Link>file a complaint</Link> with the Privacy Commissioner of Canada regarding ESDC’s handling of your personal information.",
+    "6": "If you are not satisfied with ESDC's response to your privacy concerns, you have the right to <Link>file a complaint</Link> with the Privacy Commissioner of Canada regarding ESDC's handling of your personal information.",
     "6-link": "https://www.priv.gc.ca/en/report-a-concern"
   },
   "button-agree": "I have read and understand",

public/locales/en/status.json

@@ -89,8 +89,8 @@
     "incomplete": "Incomplete applications cannot be processed and will be returned to you as soon as possible.",
     "need-faster": "If you need the passport faster",
     "get-urgent": "Find out how to get <Link>urgent or express service for existing applications</Link> if you need the passport within 10 business days. Extra fees may apply.",
-    "dont-meet-standards": "If we don’t meet our service standards",
-    "may-be-eligible": "You may be eligible for a partial refund if we don’t meet our <Link>service standards</Link>."
+    "dont-meet-standards": "If we don't meet our service standards",
+    "may-be-eligible": "You may be eligible for a partial refund if we don't meet our <Link>service standards</Link>."
   },
   "ready-for-pickup": {
     "has-been-printed": "Your passport has been printed",

public/locales/fr/email.json

@@ -3,29 +3,33 @@
   "email": {
     "label": "Adresse courriel",
     "error": {
-      "required": "L’adresse courriel est obligatoire.",
-      "valid": "L’adresse courriel doit être valide."
-    }
+      "required": "L'adresse courriel est obligatoire.",
+      "valid": "L'adresse courriel doit être valide."
+    },
+    "help-message": "Indiquez votre adresse courriel telle qu'elle figure sur votre formulaire de demande de passeport.",
+    "help-message-secondary": "<strong>Pour les demandes pour enfants,</strong> indiquez l'adresse courriel complète du parent ou du tuteur légal, telle qu'elle figure sur la demande de passeport."
   },
   "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)."
   },
   "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."
   },
   "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"
   },
   "email-esrf": "Envoyez-moi par courriel le numéro de dossier ou numéro de référence",
   "email-sent-confirmation": "Un courriel a été envoyé s'il y avait une correspondance dans nos dossiers avec le numéro de dossier (FEDS).",
@@ -42,27 +46,23 @@
       "item-1": "revérifiez vos renseignements et essayez à nouveau, ou",
       "item-2": "essayer encore demain — nous mettons à jour nos dossiers chaque jour."
     },
-    "please-contact": "Si vous n’obtenez toujours pas le courriel, <Link>veuillez nous contacter</Link>."
+    "please-contact": "Si vous n'obtenez toujours pas le courriel, <Link>veuillez nous contacter</Link>."
   },
   "page-unauth": {
     "header": "Page non-autorisée",
     "desc": "Veuillez accepter les conditions de confidentialité et de courriel et donner votre consentement avant de recevoir votre numéro de dossier (FEDS).",
     "button": "Conditions de confidentialité et de courriel"
   },
-  "help-message": {
-    "email": "Indiquez votre adresse courriel telle qu’elle figure sur votre formulaire de demande de passeport.",
-    "for-child-application": "<strong>Pour les demandes pour enfants,</strong> indiquez l’adresse courriel complète du parent ou du tuteur légal du requérant, telle qu’elle figure sur la demande de passeport."
-  },
   "header-messages": {
-    "matches": "<strong>Assurez-vous que vos renseignements correspondent à votre preuve de citoyenneté et à votre pièce d’identité utilisée lorsque vous avez présenté votre demande de passeport.</strong> Votre preuve de citoyenneté pourrait être l’une des suivantes\u00a0:",
+    "matches": "<strong>Assurez-vous que vos renseignements correspondent à votre preuve de citoyenneté et à votre pièce d'identité utilisée lorsque vous avez présenté votre demande de passeport.</strong> Votre preuve de citoyenneté pourrait être l'une des suivantes\u00a0:",
     "list": {
       "item-1": "un certificat de naissance",
       "item-2": "un certificat de citoyenneté",
       "item-3": "une carte de citoyenneté ou",
-      "item-4": "d’autres documents, comme un certificat de naturalisation"
+      "item-4": "d'autres documents, comme un certificat de naturalisation"
     },
     "child-applications": "Les demandes de passeport pour enfants",
-    "for-child-application": "Utilisez le(s) prénom(s), nom de famille et date de naissance de l’enfant, exactement tels qu’ils figurent sur sa preuve de citoyenneté."
+    "for-child-application": "Utilisez le(s) prénom(s), nom de famille et date de naissance de l'enfant, exactement tels qu'ils figurent sur sa preuve de citoyenneté."
   },
   "request-another": "Obtenir un autre numéro de dossier ou numéro de référence"
 }

public/locales/fr/landing.json

@@ -4,7 +4,7 @@
   "with-esrf": "J'ai mon numéro de dossier ou mon numéro de référence",
   "without-esrf": "Je n'ai pas mon numéro de dossier ou mon numéro de référence",
   "collapse-file-number-title": "Trouver votre numéro de dossier ou numéro de référence",
-  "receipt-explanation": "Le numéro de dossier ou le numéro de référence sert à identifier votre demande de passeport. Le numéro de dossier ou le numéro de référence figure sur le reçu qui vous a été remis si vous avez déposé votre demande de passeport en personne. Si vous avez déposé votre demande par la poste, ou si vous n’avez pas de numéro de dossier ou de numéro de référence, <Link>vous pouvez demander à le recevoir</Link>.",
+  "receipt-explanation": "Le numéro de dossier ou le numéro de référence sert à identifier votre demande de passeport. Le numéro de dossier ou le numéro de référence figure sur le reçu qui vous a été remis si vous avez déposé votre demande de passeport en personne. Si vous avez déposé votre demande par la poste, ou si vous n'avez pas de numéro de dossier ou de numéro de référence, <Link>vous pouvez demander à le recevoir</Link>.",
   "receipt-image-1": {
     "title": "Exemple de reçu avec un numéro de dossier 1",
     "alt": "Un exemple de reçu officiel. Le numéro de dossier est entouré au centre du reçu.",
@@ -16,7 +16,7 @@
     "list": {
       "item-1": "titre du reçu\u00a0: reçu officiel",
       "item-2": "nom du bureau de passeport",
-      "item-3": "date d’envoi",
+      "item-3": "date d'envoi",
       "item-4": "nom du requérant",
       "item-5": "numéro de dossier (encerclé en rouge)",
       "item-6": "date/heure",
@@ -29,9 +29,9 @@
   },
   "receipt-image-2": {
     "title": "Exemple de reçu avec un numéro de dossier 2",
-    "alt": "Exemple d’un reçu officiel et bordereau de cueillette. Le numéro de dossier est encerclé en haut à gauche du reçu, au-dessus d’un code-barres.",
+    "alt": "Exemple d'un reçu officiel et bordereau de cueillette. Le numéro de dossier est encerclé en haut à gauche du reçu, au-dessus d'un code-barres.",
     "src": "/Receipt2_FR.png",
-    "descriptive-text": "<strong>Exemple d’un reçu officiel et bordereau de cueillette. Le numéro de dossier est encerclé en haut à gauche du reçu, au-dessus d’un code-barres.</strong>"
+    "descriptive-text": "<strong>Exemple d'un reçu officiel et bordereau de cueillette. Le numéro de dossier est encerclé en haut à gauche du reçu, au-dessus d'un code-barres.</strong>"
   },
   "receipt-2-will-find": {
     "text": "Sur un reçu, sur lequel le numéro de dossier est encerclé, vous trouverez\u00a0:",
@@ -58,18 +58,18 @@
         "text": "il y a 2 cases à cocher (vous devez en cocher une)\u00a0:",
         "list": {
           "item-1": "apparition personnelle du requérant requise, ou",
-          "item-2": "j’autorise (insérer le nom de la personne) à retirer mon document de voyage. La personne autorisée doit être âgée de plus de 16 ans et doit présenter une pièce d’identité."
+          "item-2": "j'autorise (insérer le nom de la personne) à retirer mon document de voyage. La personne autorisée doit être âgée de plus de 16 ans et doit présenter une pièce d'identité."
         }
       },
       "item-3": "(signature du requérant)",
-      "item-4": "déclaration pour rappeler aux personnes de s’assurer que leur passeport est retiré en moins de 30 jours."
+      "item-4": "déclaration pour rappeler aux personnes de s'assurer que leur passeport est retiré en moins de 30 jours."
     }
   },
   "receipt-image-3": {
     "title": "Exemple de reçu avec un numéro de référence",
-    "alt": "Un exemple de reçu officiel. Le numéro de référence est encerclé au centre du reçu, au-dessus d’un code-barres.",
+    "alt": "Un exemple de reçu officiel. Le numéro de référence est encerclé au centre du reçu, au-dessus d'un code-barres.",
     "src": "/Receipt3_FR.png",
-    "descriptive-text": "<strong>Un exemple de reçu officiel. Le numéro de référence est encerclé au centre du reçu, au-dessus d’un code-barres.</strong>"
+    "descriptive-text": "<strong>Un exemple de reçu officiel. Le numéro de référence est encerclé au centre du reçu, au-dessus d'un code-barres.</strong>"
   },
   "receipt-3-will-find": {
     "text": "Sur un reçu officiel où le numéro de référence est encerclé, vous trouverez\u00a0:",
@@ -96,8 +96,8 @@
     "list": {
       "item-1": "déclaration indiquant que la demande a été reçue",
       "item-2": "instructions pour les prochaines étapes du traitement du passeport",
-      "item-3": "déclaration indiquant que le passeport sera envoyé à l’adresse postale fournie",
-      "item-4": "date d’envoi prévue"
+      "item-3": "déclaration indiquant que le passeport sera envoyé à l'adresse postale fournie",
+      "item-4": "date d'envoi prévue"
     }
   }
 }

public/locales/fr/status.json

@@ -70,7 +70,7 @@
   "no-record": {
     "cannot-give-status": {
       "description": "Nous ne pouvons pas vous donner l'état de votre demande pour le moment",
-      "because": "L’état de votre passeport n’est pas disponible pour les raisons suivantes\u00a0:",
+      "because": "L'état de votre passeport n'est pas disponible pour les raisons suivantes\u00a0:",
       "list": {
         "item-1": "les renseignements que vous nous avez fournis ne correspondent pas à ceux de notre système, ou",
         "item-2": "nous avons reçu votre demande, mais n'avons pas encore commencé à la traiter"
@@ -80,15 +80,15 @@
     "can-review": "Vous pouvez revérifiez vos renseignements et essayez à nouveau.",
     "cant-find-file": "Si nous ne trouvons toujours pas votre dossier, vous pouvez réessayer demain. Nous mettons à jour nos dossiers chaque jour.",
     "need-faster": "Si vous avez besoin du passeport plus rapidement",
-    "get-urgent": "Apprenez comment obtenir <Link>des services urgents ou express pour votre demande existante</Link> si vous avez besoin du passeport dans un délai de 10 jours ouvrables. Des frais supplémentaires peuvent s’appliquer."
+    "get-urgent": "Apprenez comment obtenir <Link>des services urgents ou express pour votre demande existante</Link> si vous avez besoin du passeport dans un délai de 10 jours ouvrables. Des frais supplémentaires peuvent s'appliquer."
   },
   "being-processed": {
     "received": "Nous avons reçu votre demande et nous sommes en train de la traiter",
     "we-will-contact": "Si nous avons besoin de plus amples renseignements, nous communiquerons avec vous par téléphone, par la poste, ou par courriel. Nous n'utiliserons <strong>jamais</strong> de messages textes ou de programmes de messagerie instantanée pour vous contacter au sujet de votre demande de passeport.",
     "ready-within": "Si votre demande a été dûment remplie, votre passeport devrait être prêt selon nos <Link>normes de service</Link>.",
     "incomplete": "Les demandes incomplètes ne pourront pas être traitées et seront retournées dès que possible.",
     "need-faster": "Si vous avez besoin du passeport plus rapidement",
-    "get-urgent": "Apprenez comment obtenir <Link>des services urgents ou express pour votre demande existante</Link> si vous avez besoin du passeport dans un délai de 10 jours ouvrables. Des frais supplémentaires peuvent s’appliquer.",
+    "get-urgent": "Apprenez comment obtenir <Link>des services urgents ou express pour votre demande existante</Link> si vous avez besoin du passeport dans un délai de 10 jours ouvrables. Des frais supplémentaires peuvent s'appliquer.",
     "dont-meet-standards": "Si nous ne respectons pas nos normes de service",
     "may-be-eligible": "Vous pourriez avoir droit à un remboursement partiel si nous ne respectons pas nos <Link>normes de service</Link>."
   },

src/components/InputField.tsx

@@ -2,41 +2,45 @@ import InputErrorMessage from './InputErrorMessage'
 import InputLabel from './InputLabel'
 
 export interface InputFieldProps {
+  errorMessage?: string
+  helpMessage?: React.ReactNode
+  helpMessageSecondary?: React.ReactNode
   id: string
-  name: string
   label: string
+  max?: string
+  name: string
+  onChange?: React.ChangeEventHandler<HTMLInputElement>
   required?: boolean
-  helpMessage?: React.ReactNode
   textRequired?: string
-  errorMessage?: string
   type?: React.HTMLInputTypeAttribute
   value?: string | number | readonly string[]
-  max?: string
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
 }
 
 const InputField = ({
+  errorMessage,
+  helpMessage,
+  helpMessageSecondary,
   id,
   label,
+  max,
   name,
-  errorMessage,
   onChange,
   required,
   textRequired,
   type,
   value,
-  max,
-  helpMessage,
 }: InputFieldProps) => {
   const inputErrorMessageId = `input-${id}-error`
   const inputHelpMessageId = `input-${id}-help`
+  const inputHelpMessageSecondaryId = `input-${id}-help-secondary`
   const inputWrapperId = `input-${id}`
   const inputLabelId = `input-${id}-label`
 
   const getAriaDescribedby = () => {
     const ariaDescribedby: string[] = []
     if (errorMessage) ariaDescribedby.push(inputErrorMessageId)
     if (helpMessage) ariaDescribedby.push(inputHelpMessageId)
+    if (helpMessageSecondary) ariaDescribedby.push(inputHelpMessageSecondaryId)
     return ariaDescribedby.length > 0 ? ariaDescribedby.join(' ') : undefined
   }
 
@@ -52,6 +56,14 @@ const InputField = ({
       {errorMessage && (
         <InputErrorMessage id={inputErrorMessageId} message={errorMessage} />
       )}
+      {helpMessage && (
+        <div
+          className="max-w-prose text-base text-gray-600 mb-1.5"
+          id={inputHelpMessageId}
+        >
+          {helpMessage}
+        </div>
+      )}
       <input
         aria-describedby={getAriaDescribedby()}
         aria-invalid={errorMessage ? true : undefined}
@@ -67,12 +79,12 @@ const InputField = ({
         type={type}
         value={value ?? ''}
       />
-      {helpMessage && (
+      {helpMessageSecondary && (
         <div
           className="mt-1.5 max-w-prose text-base text-gray-600"
-          id={inputHelpMessageId}
+          id={inputHelpMessageSecondaryId}
         >
-          {helpMessage}
+          {helpMessageSecondary}
         </div>
       )}
     </div>