ADO#4572 -- Get status page redesign

cypress/e2e/status.cy.ts

@@ -254,7 +254,7 @@ describe('responses - loads no result', () => {
 
 describe('cancel check status', () => {
   beforeEach(() => {
-    cy.get('#btn-cancel').click()
+    cy.get('#btn-back').click()
   })
 
   it('cancel check status should loads dialog', () => {

public/locales/en/common.json

@@ -10,6 +10,20 @@
     "month": "Month",
     "year": "Year"
   },
+  "date-months": {
+    "01": "January",
+    "02": "February",
+    "03": "March",
+    "04": "April",
+    "05": "May",
+    "06": "June",
+    "07": "July",
+    "08": "August",
+    "09": "September",
+    "10": "October",
+    "11": "November",
+    "12": "December"
+  },
   "footer": {
     "canada-ca-alt-text": "Symbol of the Government of Canada",
     "date-modified-text": "Date Modified: ",
@@ -35,6 +49,7 @@
     "skip-to-main": "Skip to main content"
   },
   "modal-go-back": {
+    "back-button": "Back",
     "cancel-button": "Cancel",
     "description": "Are you sure you want to go back?",
     "header": "Return to the home page",

public/locales/en/status.json

@@ -19,32 +19,28 @@
       "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."
     },
-    "help-message": "Enter the birthdate of the person who the passport is for.",
-    "label": "Date of birth on the application"
+    "help-message": "Enter the date of birth of the person who the passport is for.",
+    "label": "Date of birth"
   },
   "esrf": {
     "error": {
       "required": "The file number is required."
     },
     "help-message": "If you can't find the file number or reference number, you can <Link>request to receive it</Link>.",
-    "label": "File number or reference number"
+    "label": "Reference number"
   },
   "given-name": {
+    "title": "If the applicant has a single legal name.",
     "error": {
       "required": "The given name(s) is required."
     },
-    "help-message": "Enter first name(s) and any middle name(s) of the person who the passport is for.",
-    "label": "Given name(s) on the application"
+    "help-message": "Enter first name(s) <strong>and any middle name(s)</strong> of the person who the passport is for.",
+    "label": "Given name(s)"
   },
   "header": "Get the status of your passport application",
   "header-messages": {
-    "list": {
-      "item-1": "birth certificate",
-      "item-2": "citizenship certificate",
-      "item-3": "citizenship card or",
-      "item-4": "other documents, like a naturalization certificate"
-    },
-    "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:"
+    "matches": "<strong>Make sure the information you enter here matches your passport application.</strong>",
+    "required": "<em>All fields are required.</em>"
   },
   "no-record": {
     "can-review": "You can review the information you entered and try again.",
@@ -114,6 +110,6 @@
       "required": "The surname is required."
     },
     "help-message": "Enter last name of the person who the passport is for.",
-    "label": "Surname on the application"
+    "label": "Surname"
   }
 }

public/locales/fr/common.json

@@ -10,6 +10,20 @@
     "month": "Mois",
     "year": "Année"
   },
+  "date-months": {
+    "01": "Janvier",
+    "02": "Février",
+    "03": "Mars",
+    "04": "Avril",
+    "05": "Mai",
+    "06": "Juin",
+    "07": "Juillet",
+    "08": "Août",
+    "09": "Septembre",
+    "10": "Octobre",
+    "11": "Novembre",
+    "12": "Décembre"
+  },
   "footer": {
     "canada-ca-alt-text": "Symbole du gouvernement du Canada",
     "date-modified-text": "Date de modification\u00a0: ",
@@ -35,7 +49,8 @@
     "skip-to-main": "Passer au contenu principal"
   },
   "modal-go-back": {
-    "cancel-button": "Annuler",
+    "back-button": "Back",
+    "cancel-button": "Retour",
     "description": "Êtes-vous sûr de vouloir revenir en arrière?",
     "header": "Retournez à la page d'accueil",
     "no-button": "Non",

public/locales/fr/status.json

@@ -20,31 +20,27 @@
       "required": "La date de naissance est obligatoire."
     },
     "help-message": "Indiquez la date de naissance de la personne à qui le passeport est destiné.",
-    "label": "Date de naissance sur la demande"
+    "label": "Date de naissance"
   },
   "esrf": {
     "error": {
       "required": "Le numéro de dossier est obligatoire."
     },
     "help-message": "Si vous ne pouvez pas trouver le numéro de dossier ou le 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"
+    "label": "Numéro de référence"
   },
   "given-name": {
+    "title": "Si le requérant a un seul nom légal.",
     "error": {
       "required": "Le(s) prénom(s) est(sont) obligatoire(s)."
     },
-    "help-message": "Indiquez le(s) prénom(s) et le(s) deuxième(s) prénom(s) de la personne à qui le passeport est destiné.",
-    "label": "Prénom(s) sur la demande"
+    "help-message": "Indiquez le(s) prénom(s) <strong>et le(s) deuxième(s) prénom(s)</strong> de la personne à qui le passeport est destiné.",
+    "label": "Prénom(s)"
   },
   "header": "Obtenir l'état de votre demande de passeport",
   "header-messages": {
-    "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"
-    },
-    "matches": "<strong>Assurez-vous que vos informations correspondent à la preuve de citoyenneté et à la pièce d'identité utilisées lors de votre demande de passeport.</strong> Votre preuve de citoyenneté pourrait être l'une des suivantes\u00a0:"
+    "matches": "<strong>Assurez-vous que les informations que vous indiquez ici correspondent à votre demande de passeport.</strong>",
+    "required": "<em>Tous les champs sont obligatoires.</em>"
   },
   "no-record": {
     "can-review": "Vous pouvez revérifier vos renseignements et essayer à nouveau.",
@@ -114,6 +110,6 @@
       "required": "Le nom de famille est obligatoire."
     },
     "help-message": "Indiquez le nom de famille de la personne à qui le passeport est destiné.",
-    "label": "Nom de famille sur la demande"
+    "label": "Nom de famille"
   }
 }

src/components/Collapse.tsx

@@ -3,18 +3,28 @@ import { useId } from 'react'
 export interface CollapseProps {
   title: string
   children?: React.ReactNode
+  detailProps?: string
+  summaryProps?: string
 }
 
-const Collapse = ({ title, children }: CollapseProps) => {
+const Collapse = ({
+  title,
+  children,
+  detailProps,
+  summaryProps,
+}: CollapseProps) => {
   const id = useId()
   return (
     <details
       aria-describedby={`${id}-details-summary`}
-      className="mb-3 max-w-prose rounded border p-3"
+      className={'mb-3 max-w-prose p-3 ' + detailProps}
     >
       <summary
         id={`${id}-details-summary`}
-        className="cursor-pointer text-blue-light hover:text-link-selected hover:underline focus:text-link-selected focus:underline"
+        className={
+          'cursor-pointer text-blue-light hover:text-link-selected focus:text-link-selected ' +
+          summaryProps
+        }
       >
         {title}
       </summary>

src/components/DateSelectField.tsx

@@ -81,9 +81,9 @@ const DateSelectField = ({
   const monthOptions = useMemo(() => {
     return [...Array(12).keys()].map<DateSelectOption>((i) => {
       const value = padZero(i + 1, 2)
-      return { label: value, value }
+      return { label: t(`date-months.` + value), value }
     })
-  }, [])
+  }, [t])
 
   const dayOptions = useMemo(() => {
     const year = parseInt(state.yearValue)
@@ -182,25 +182,13 @@ const DateSelectField = ({
         )}
         {helpMessage && (
           <div
-            className="mt-1.5 max-w-prose text-base text-gray-600"
+            className="mb-1.5 max-w-prose text-base text-gray-600"
             id={dateSelectHelpMessageId}
           >
             {helpMessage}
           </div>
         )}
         <div className="flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
-          <DateSelect
-            ariaDescribedby={getAriaDescribedby()}
-            dateSelectLabelId={dateSelectLabelId}
-            error={!!errorMessage}
-            id={`${id}-year`}
-            label={t('common:date-select-field.year')}
-            onChange={handleOnDateSelectChange}
-            options={yearOptions}
-            required={required}
-            type="year"
-            value={state.yearValue}
-          />
           <DateSelect
             ariaDescribedby={getAriaDescribedby()}
             dateSelectLabelId={dateSelectLabelId}
@@ -225,6 +213,18 @@ const DateSelectField = ({
             type="day"
             value={state.dayValue}
           />
+          <DateSelect
+            ariaDescribedby={getAriaDescribedby()}
+            dateSelectLabelId={dateSelectLabelId}
+            error={!!errorMessage}
+            id={`${id}-year`}
+            label={t('common:date-select-field.year')}
+            onChange={handleOnDateSelectChange}
+            options={yearOptions}
+            required={required}
+            type="year"
+            value={state.yearValue}
+          />
         </div>
       </fieldset>
     </div>

src/components/InputField.tsx

@@ -14,6 +14,7 @@ export interface InputFieldProps {
   textRequired?: string
   type?: React.HTMLInputTypeAttribute
   value?: string | number | readonly string[]
+  extraContent?: React.ReactNode
 }
 
 const InputField = ({
@@ -29,6 +30,7 @@ const InputField = ({
   textRequired,
   type,
   value,
+  extraContent,
 }: InputFieldProps) => {
   const inputErrorMessageId = `input-${id}-error`
   const inputHelpMessageId = `input-${id}-help`
@@ -64,6 +66,7 @@ const InputField = ({
           {helpMessage}
         </div>
       )}
+      {extraContent}
       <input
         aria-describedby={getAriaDescribedby()}
         aria-invalid={errorMessage ? true : undefined}

src/pages/landing.tsx

@@ -43,7 +43,11 @@ const Landing = () => {
           components={{ Link: <Link href="/email" /> }}
         />
       </p>
-      <Collapse title={t('receipt-image-1.title')}>
+      <Collapse
+        title={t('receipt-image-1.title')}
+        detailProps="rounded border"
+        summaryProps="hover:underline focus:underline"
+      >
         <div className="mt-3 max-w-prose border-t p-3">
           <ExampleImage
             imageProps={{
@@ -71,7 +75,11 @@ const Landing = () => {
           </ul>
         </div>
       </Collapse>
-      <Collapse title={t('receipt-image-2.title')}>
+      <Collapse
+        title={t('receipt-image-2.title')}
+        detailProps="rounded border"
+        summaryProps="hover:underline focus:underline"
+      >
         <div className="mt-3 max-w-prose border-t p-3">
           <ExampleImage
             imageProps={{
@@ -120,7 +128,11 @@ const Landing = () => {
           </ul>
         </div>
       </Collapse>
-      <Collapse title={t('receipt-image-3.title')}>
+      <Collapse
+        title={t('receipt-image-3.title')}
+        detailProps="rounded border"
+        summaryProps="hover:underline focus:underline"
+      >
         <div className="mt-3 max-w-prose border-t p-3">
           <ExampleImage
             imageProps={{