Skip to content

Commit

Permalink
Merge pull request #758 from DTS-STN/adam/reference-number-page-redesign
Browse files Browse the repository at this point in the history 
ADO#4568-- Get Your Reference Number Page Redesign
  • Loading branch information
@AdamP-HRSDC-RHDCC
AdamP-HRSDC-RHDCC authored Nov 12, 2024
2 parents ef61aee + 346a389 commit 4ba6807
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 51 deletions.
29 changes: 14 additions & 15 deletions public/locales/en/email.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@
"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"
"label": "Date of birth"
},
"email": {
"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.",
"help-message": "Enter the email address you provided on your passport application form.",
"for-child": {
"title": "For child applications",
"help-message": "For child applications, enter the email address of the applicant's parent or legal guardian provided on the passport application."
},
"label": "Email address"
},
"email-confirmation-msg": {
Expand All @@ -32,23 +35,19 @@
"please-contact": "If you still don't receive it, <Link>contact us</Link>.",
"request-received": "Your request has been received"
},
"email-esrf": "Email me the file number or reference number",
"email-esrf": "Email me the 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 my passport application file number or reference number",
"header": "Get your reference number",
"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>"
},
"one-name": "Applicants with <strong>only one name</strong> (single or multiple names entered all in one field) must call us at 1‑800‑567‑6868 to get the status of their application.",
"request-another": "Request another file number or reference number",
Expand All @@ -57,6 +56,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"
}
}
27 changes: 13 additions & 14 deletions public/locales/fr/email.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,18 @@
"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"
},
"email": {
"error": {
"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 du requérant, telle qu'elle figure sur la demande de passeport.",
"help-message": "Indiquez l'adresse courriel que vous avez fournie sur votre formulaire de demande de passeport.",
"for-child": {
"title": "Pour les demandes pour enfants",
"help-message": "Pour les demandes pour enfants, indiquez l'adresse courriel du parent ou du tuteur légal fournie sur la demande de passeport."
},
"label": "Adresse courriel"
},
"email-confirmation-msg": {
Expand All @@ -32,23 +35,19 @@
"please-contact": "Si vous n'obtenez toujours pas le courriel, <Link>veuillez nous contacter</Link>.",
"request-received": "Votre demande a été reçue"
},
"email-esrf": "Envoyez-moi par courriel le numéro de dossier ou numéro de référence",
"email-esrf": "Envoyez-moi par courriel le 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 deuxième(s) prénom(s) de la personne à qui le passeport est destiné.",
"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) sur la demande"
},
"header": "Obtenir le numéro de dossier de ma demande de passeport ou mon numéro de référence",
"header": "Obtenir votre numéro de référence",
"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 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 les informations que vous indiquez ici correspondent à votre demande de passeport.</strong>",
"required": "<em>Tous les champs sont obligatoires.</em>"
},
"one-name": "Les requérants n'ayant <strong>qu'un seul nom</strong> (un ou plusieurs noms inscrits dans un seul champ) doivent nous appeler au 1-800-567-6868 pour connaître l'état de leur demande.",
"request-another": "Obtenir un autre numéro de dossier ou numéro de référence",
Expand All @@ -57,6 +56,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"
}
}
54 changes: 32 additions & 22 deletions src/pages/email.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import * as Yup from 'yup'

import ActionButton from '../components/ActionButton'
import AlertBlock from '../components/AlertBlock'
import AlertSection from '../components/AlertSection'
import Collapse from '../components/Collapse'
import DateSelectField, {
DateSelectFieldOnChangeEvent,
} from '../components/DateSelectField'
Expand Down Expand Up @@ -203,20 +203,9 @@ const Email = () => {
<p className="max-w-prose">
<Trans i18nKey="header-messages.matches" ns="email" />
</p>
<ul className="mb-5 list-disc space-y-2 pl-10">
<li>{t('header-messages.list.item-1')}</li>
<li>{t('header-messages.list.item-2')}</li>
<li>
<Trans i18nKey="header-messages.list.item-3" ns="email" />
</li>
<li>{t('header-messages.list.item-4')}</li>
</ul>

<AlertSection type="info" className="mb-5 max-w-prose">
<p>
<Trans i18nKey="one-name" ns="email" />
</p>
</AlertSection>
<p>
<Trans i18nKey="header-messages.required" ns="email" />
</p>

{errorSummaryItems.length > 0 && (
<ErrorSummary
Expand All @@ -237,10 +226,18 @@ const Email = () => {
value={formikValues.email}
errorMessage={formikErrors.email && t(formikErrors.email as any)}
textRequired={t('common:required')}
required
required={!!formikErrors.email}
helpMessage={t('email.help-message')}
helpMessageSecondary={
<Trans i18nKey="email.help-message-secondary" ns="email" />
extraContent={
<Collapse
title={t('email.for-child.title')}
detailProps="text-base"
summaryProps="underline"
>
<p className="mt-4 border-l-[6px] border-gray-400 pl-6 text-base text-gray-600">
<Trans i18nKey="email.for-child.help-message" ns="email" />
</p>
</Collapse>
}
/>
<InputField
Expand All @@ -253,8 +250,21 @@ const Email = () => {
formikErrors.givenName && t(formikErrors.givenName as any)
}
textRequired={t('common:required')}
required
helpMessage={t('given-name.help-message')}
required={!!formikErrors.givenName}
helpMessage={
<Trans i18nKey="given-name.help-message" ns="email" />
}
extraContent={
<Collapse
title={t('given-name.title')}
detailProps="text-base"
summaryProps="underline"
>
<p className="mt-4 border-l-[6px] border-gray-400 pl-6 text-base text-gray-600">
<Trans i18nKey="one-name" ns="email" />
</p>
</Collapse>
}
/>
<InputField
id="surname"
Expand All @@ -266,7 +276,7 @@ const Email = () => {
formikErrors.surname && t(formikErrors.surname as any)
}
textRequired={t('common:required')}
required
required={!!formikErrors.surname}
helpMessage={t('surname.help-message')}
/>
<DateSelectField
Expand All @@ -278,7 +288,7 @@ const Email = () => {
formikErrors.dateOfBirth && t(formikErrors.dateOfBirth as any)
}
textRequired={t('common:required')}
required
required={!!formikErrors.dateOfBirth}
helpMessage={t('date-of-birth.help-message')}
/>
<div className="mt-8 flex flex-wrap gap-2">
Expand Down

0 comments on commit 4ba6807

Please sign in to comment.