From d4d88052acbe960ee6d72d207632bd5490ec2121 Mon Sep 17 00:00:00 2001 From: AdamP-HRSDC-RHDCC Date: Mon, 7 Oct 2024 15:48:01 -0400 Subject: [PATCH 1/2] Get status page redesign Fixed year input Removed unused import Fixed tests Fixed date tests Added zero num padding to month value Changed zero padding from month to day value Reverted to date select inputs --- cypress/e2e/status.cy.ts | 2 +- public/locales/en/common.json | 15 +++ public/locales/en/status.json | 22 ++-- public/locales/fr/common.json | 17 ++- public/locales/fr/status.json | 20 ++-- src/components/Collapse.tsx | 16 ++- src/components/DateSelectField.tsx | 32 +++--- src/components/InputField.tsx | 3 + src/pages/landing.tsx | 18 +++- src/pages/status.tsx | 164 +++++++++++++++-------------- src/styles/globals.css | 4 +- 11 files changed, 184 insertions(+), 129 deletions(-) diff --git a/cypress/e2e/status.cy.ts b/cypress/e2e/status.cy.ts index b89dc6414..5286f8f64 100644 --- a/cypress/e2e/status.cy.ts +++ b/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', () => { diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 72d4872e6..ea4a964c4 100644 --- a/public/locales/en/common.json +++ b/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", diff --git a/public/locales/en/status.json b/public/locales/en/status.json index 96f47659a..346369ecb 100644 --- a/public/locales/en/status.json +++ b/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 request to receive it.", - "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) and any middle name(s) 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": "Make sure your information matches the proof of citizenship and supporting ID used when you applied for a passport. Your proof of citizenship could be one of the following:" + "matches": "Make sure the information you enter here matches your passport application.", + "required": "All fields are required." }, "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" } } diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index 66718f6a3..a26f51b79 100644 --- a/public/locales/fr/common.json +++ b/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", diff --git a/public/locales/fr/status.json b/public/locales/fr/status.json index c5e5c50da..ced8b3789 100644 --- a/public/locales/fr/status.json +++ b/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, vous pouvez demander à le recevoir.", - "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) et le(s) deuxième(s) prénom(s) 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": "Assurez-vous que vos informations correspondent à la preuve de citoyenneté et à la pièce d'identité utilisées lors de votre demande de passeport. Votre preuve de citoyenneté pourrait être l'une des suivantes\u00a0:" + "matches": "Assurez-vous que les informations que vous indiquez ici correspondent à votre demande de passeport.", + "required": "Tous les champs sont obligatoires." }, "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" } } diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx index d8391121b..43f34184c 100644 --- a/src/components/Collapse.tsx +++ b/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 (
{title} diff --git a/src/components/DateSelectField.tsx b/src/components/DateSelectField.tsx index 561dd873a..ac220b7f4 100644 --- a/src/components/DateSelectField.tsx +++ b/src/components/DateSelectField.tsx @@ -81,9 +81,9 @@ const DateSelectField = ({ const monthOptions = useMemo(() => { return [...Array(12).keys()].map((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) @@ -113,7 +113,7 @@ const DateSelectField = ({ isNaN(yearNumber) || isNaN(monthNumber) ? true : isExists(yearNumber, monthNumber - 1, parseInt(day)) - const dayValue = isDayExists ? day : '' + const dayValue = isDayExists ? day.padStart(2, '0') : '' const dateString = toDateStringOrEmpty(yearValue, monthValue, dayValue) return { @@ -182,25 +182,13 @@ const DateSelectField = ({ )} {helpMessage && (
{helpMessage}
)}
- +
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 0ce9c9e06..301f848e2 100644 --- a/src/components/InputField.tsx +++ b/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} )} + {extraContent} { components={{ Link: }} />

- +
{
- +
{
- +
{ [setFormikFieldValue], ) - const handleOnCancelClick = useCallback(() => setModalOpen(true), []) + const handleOnBackClick = useCallback(() => setModalOpen(true), []) const handleOnModalClose = useCallback(() => setModalOpen(false), []) @@ -196,21 +196,9 @@ const Status = () => {

- -
    -
  • {t('header-messages.list.item-1')}
    • -
  • {t('header-messages.list.item-2')}
    • -
  • - -
    • -
  • {t('header-messages.list.item-4')}
    • -
- - -

- -

- +

+ +

{errorSummaryItems.length > 0 && ( { errors={errorSummaryItems} /> )} - - , - }} - /> - } - /> - - - +
+ , + }} + /> + } + /> +
+
+ + } + extraContent={ + +

+ +

+ + } + /> +
+
+ +
+
+ +
{ style="primary" />
diff --git a/src/styles/globals.css b/src/styles/globals.css index 8b0cea8f9..f1e7814cd 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -48,9 +48,9 @@ .h1::after { content: ''; display: block; - width: 70px; + width: 100%; @apply pt-2; - border-bottom: 0.18em solid #af3c43; + border-bottom: 0.09em solid #af3c43; } p { From dcdc939421f9563bd6fb4e3d0d2683a4da3ea8d4 Mon Sep 17 00:00:00 2001 From: AdamP-HRSDC-RHDCC Date: Tue, 12 Nov 2024 14:57:12 -0500 Subject: [PATCH 2/2] Removed unused padStart --- src/components/DateSelectField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DateSelectField.tsx b/src/components/DateSelectField.tsx index ac220b7f4..1a1fb7500 100644 --- a/src/components/DateSelectField.tsx +++ b/src/components/DateSelectField.tsx @@ -113,7 +113,7 @@ const DateSelectField = ({ isNaN(yearNumber) || isNaN(monthNumber) ? true : isExists(yearNumber, monthNumber - 1, parseInt(day)) - const dayValue = isDayExists ? day.padStart(2, '0') : '' + const dayValue = isDayExists ? day : '' const dateString = toDateStringOrEmpty(yearValue, monthValue, dayValue) return {