Skip to content

Commit 501d168

Browse files
add additional info into the age picker (#78)
1 parent a15cee7 commit 501d168

File tree

5 files changed

+70
-55
lines changed

5 files changed

+70
-55
lines changed

frontend/app/.server/locales/common-en.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
},
1111
"your-age": {
1212
"label": "Your age :",
13-
"value-suffix": "years old"
13+
"value-suffix-plural": "years old",
14+
"value-suffix-singular": "year old"
1415
}
1516
},
1617
"app": {

frontend/app/.server/locales/common-fr.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
},
1111
"your-age": {
1212
"label": "Vous avez :",
13-
"value-suffix": "ans"
13+
"value-suffix-plural": "ans",
14+
"value-suffix-singular": "an"
1415
}
1516
},
1617
"app": {
Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,53 @@
11
{
22
"age": {
3-
"page-title": "Step 1 of 3: Age",
43
"breadcrumb": "Age",
54
"date-of-birth": {
6-
"label": "When were you born?",
7-
"required-month": "Month of birth is required.",
5+
"invalid-age": "You must be between 18 and 65.",
86
"invalid-month": "Month of birth is invalid.",
9-
"required-year": "Year of birth is required.",
107
"invalid-year": "Year of birth is invalid.",
11-
"invalid-age": "You must be between 18 and 65."
12-
}
8+
"label": "When were you born?",
9+
"required-month": "Month of birth is required.",
10+
"required-year": "Year of birth is required."
11+
},
12+
"max-eligible-age-info": "You may be eligible up to and including the month you turn 65.",
13+
"min-eligible-age-info": "You can apply up to 6 months before your 18th birthday.",
14+
"page-title": "Step 1 of 3: Age"
15+
},
16+
"income": {
17+
"breadcrumb": "Income",
18+
"page-title": "Step 3 of 3: Income"
1319
},
14-
1520
"marital-status": {
1621
"additional-info": {
17-
"single": "<strong>Single:</strong> you are single and another status does not apply",
22+
"common-law": {
23+
"item1": "have been living with you for at least 12 continuous months. This includes any period you were separated for less than 90 days because of a breakdown in your relationship",
24+
"item2": "are the parent of your child by birth or adoption",
25+
"item3": "have custody and control of your child (or had custody and control immediately before the child turned 19 years of age) and your child is wholly dependent on that person for support",
26+
"text": "<strong>Common-law:</strong> you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:"
27+
},
1828
"divorced": "<strong>Divorced:</strong> you were married and are now legally divorced",
29+
"married": "<strong>Married:</strong> you are legally married to someone.",
1930
"separated": {
2031
"p1": "<strong>Separated:</strong> you have been living apart from your spouse or common-law partner because of a breakdown in the relationship for a period of at least 90 days and you have not reconciled.",
2132
"p2": "Once you have been separated for 90 days, the effective day of your separation is the date you started living apart. You would still be considered to have a spouse or common-law partner if there is no breakdown in the relationship and you were living apart for reasons such as work, studies, or health problems.",
2233
"p3": "Note: Generally, you are not considered separated if your spouse or common-law partner is incarcerated or does not live in Canada, as long as there is no breakdown in your relationship"
2334
},
24-
"widowed": "<strong>Widowed:</strong> your spouse or common-law partner is deceased.",
25-
"married": "<strong>Married:</strong> you are legally married to someone.",
26-
"common-law": {
27-
"text": "<strong>Common-law:</strong> you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:",
28-
"item1": "have been living with you for at least 12 continuous months. This includes any period you were separated for less than 90 days because of a breakdown in your relationship",
29-
"item2": "are the parent of your child by birth or adoption",
30-
"item3": "have custody and control of your child (or had custody and control immediately before the child turned 19 years of age) and your child is wholly dependent on that person for support"
31-
}
35+
"single": "<strong>Single:</strong> you are single and another status does not apply",
36+
"widowed": "<strong>Widowed:</strong> your spouse or common-law partner is deceased."
3237
},
33-
"page-title": "Step 2 of 3: Marital Status",
3438
"breadcrumb": "Marital Status",
3539
"error-message": {
3640
"marital-status-required": "Marital status is required"
3741
},
3842
"form-instructions": "What is your marital status?",
43+
"page-title": "Step 2 of 3: Marital Status",
3944
"radio-options": {
40-
"single": "Single, divorced, separated or widowed",
41-
"married": "Married or common-law"
45+
"married": "Married or common-law",
46+
"single": "Single, divorced, separated or widowed"
4247
}
4348
},
44-
"income": {
45-
"page-title": "Step 3 of 3: Income",
46-
"breadcrumb": "Income"
47-
},
4849
"results": {
49-
"page-title": "Results",
50-
"breadcrumb": "Results"
50+
"breadcrumb": "Results",
51+
"page-title": "Results"
5152
}
5253
}
Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,53 @@
11
{
22
"age": {
3-
"page-title": "Étape 1 de 3\u00A0: Âge",
43
"breadcrumb": "Âge",
54
"date-of-birth": {
6-
"label": "Quel est votre mois de naissance?",
7-
"required-month": "Le mois de naissance est requis.",
5+
"invalid-age": "Vous devez avoir entre 18 et 65 ans.",
86
"invalid-month": "Le mois de naissance est invalide.",
9-
"required-year": "L'année de naissance est requise.",
107
"invalid-year": "L'année de naissance est invalide.",
11-
"invalid-age": "Vous devez avoir entre 18 et 65 ans."
12-
}
8+
"label": "Quel est votre mois de naissance?",
9+
"required-month": "Le mois de naissance est requis.",
10+
"required-year": "L'année de naissance est requise."
11+
},
12+
"max-eligible-age-info": "Vous pourriez être admissible jusqu'au mois de votre 65e anniversaire inclusivement.",
13+
"min-eligible-age-info": "Vous pouvez présenter une demande jusqu'à 6 mois avant votre 18e anniversaire.",
14+
"page-title": "Étape 1 de 3\u00A0: Âge"
15+
},
16+
"income": {
17+
"breadcrumb": "Revenus",
18+
"page-title": "Étape 3 de 3\u00A0: Revenus"
1319
},
1420
"marital-status": {
1521
"additional-info": {
16-
"single": "<strong>Célibataire\u00a0:</strong> vous êtes célibataire et aucune des situations ci-dessus ne s'applique à vous",
22+
"common-law": {
23+
"item1": "elle vit avec vous depuis au moins 12 mois sans interruption. Cela comprend les périodes de moins de 90 jours où vous avez vécu séparément en raison de la rupture de votre union;",
24+
"item2": "elle est le parent de votre enfant, par la naissance ou l'adoption;",
25+
"item3": "elle a la garde, la surveillance et la charge entière de votre enfant (ou elle en avait la garde et la surveillance juste avant que l'enfant atteigne l'âge de 19 ans).",
26+
"text": "<strong>Conjoint de fait\u00a0:</strong> vous vivez en relation conjugale avec une personne avec qui vous n'êtes pas marié et à qui au moins l'une des situations suivantes s'applique\u00a0:"
27+
},
1728
"divorced": "<strong>Divorcé\u00a0:</strong> vous étiez marié et êtes maintenant divorcé légalement",
29+
"married": "<strong>Marié\u00a0:</strong> vous êtes légalement marié à quelqu’un.",
1830
"separated": {
1931
"p1": "<strong>Séparé\u00a0:</strong> vous vivez séparément de votre époux ou conjoint de fait depuis 90 jours ou plus en raison de la rupture de votre union, et il n'y a pas de réconciliation.",
2032
"p2": "Lorsque vous êtes séparé depuis 90 jours, la date d'entrée en vigueur de votre séparation est le jour où vous et votre époux ou conjoint de fait avez commencé à vivre séparément. Vous êtes toujours considéré comme ayant un époux ou un conjoint de fait s'il n'y a pas de rupture de votre union et que vous vivez séparément pour des raisons telles que le travail, les études ou des problèmes de santé.",
2133
"p3": "Remarque\u00a0: Généralement, vous n'êtes pas considéré séparé si votre époux ou conjoint de fait est détenu dans une prison ou ne vit pas au Canada, tant qu'il n'y a pas de rupture de votre union."
2234
},
23-
"widowed": "<strong>Veuf\u00a0:</strong> votre époux ou conjoint de fait est décédé.",
24-
"married": "<strong>Marié\u00a0:</strong> vous êtes légalement marié à quelqu’un.",
25-
"common-law": {
26-
"text": "<strong>Conjoint de fait\u00a0:</strong> vous vivez en relation conjugale avec une personne avec qui vous n'êtes pas marié et à qui au moins l'une des situations suivantes s'applique\u00a0:",
27-
"item1": "elle vit avec vous depuis au moins 12 mois sans interruption. Cela comprend les périodes de moins de 90 jours où vous avez vécu séparément en raison de la rupture de votre union;",
28-
"item2": "elle est le parent de votre enfant, par la naissance ou l'adoption;",
29-
"item3": "elle a la garde, la surveillance et la charge entière de votre enfant (ou elle en avait la garde et la surveillance juste avant que l'enfant atteigne l'âge de 19 ans)."
30-
}
35+
"single": "<strong>Célibataire\u00a0:</strong> vous êtes célibataire et aucune des situations ci-dessus ne s'applique à vous",
36+
"widowed": "<strong>Veuf\u00a0:</strong> votre époux ou conjoint de fait est décédé."
3137
},
32-
"page-title": "Étape 2 de 3\u00A0: État civil",
3338
"breadcrumb": "État civil",
3439
"error-message": {
3540
"marital-status-required": "L'état civil est requis"
3641
},
3742
"form-instructions": "Quel est votre état civil?",
43+
"page-title": "Étape 2 de 3\u00A0: État civil",
3844
"radio-options": {
39-
"single": "Célibataire, divorcé, séparé ou veuf",
40-
"married": "Marié ou conjoint de fait"
45+
"married": "Marié ou conjoint de fait",
46+
"single": "Célibataire, divorcé, séparé ou veuf"
4147
}
4248
},
43-
"income": {
44-
"page-title": "Étape 3 de 3\u00A0: Revenus",
45-
"breadcrumb": "Revenus"
46-
},
4749
"results": {
48-
"page-title": "Résultats",
49-
"breadcrumb": "Résultats"
50+
"breadcrumb": "Résultats",
51+
"page-title": "Résultats"
5052
}
5153
}

frontend/app/components/age-picker-field.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export const AgePickerField = ({
7878
names,
7979
required,
8080
}: AgePickerFieldProps): JSX.Element => {
81-
const { t } = useTranslation(['common']);
81+
const { t } = useTranslation(['common', 'estimator']);
8282
const { currentLanguage = 'en' } = useLanguage(); // english by default
8383
const currentDatePartOrder = DATE_PART_ORDER[currentLanguage];
8484

@@ -119,6 +119,13 @@ export const AgePickerField = ({
119119
const [month, setMonth] = useState(defaultValues?.month);
120120
const [year, setYear] = useState(defaultValues?.year);
121121
const age = month && year && calculateAge(month, year);
122+
const ageAdditionalInfo = (() => {
123+
if (age !== undefined) {
124+
if (age >= 65) return t('estimator:age.max-eligible-age-info');
125+
else if (age < 18) return t('estimator:age.min-eligible-age-info');
126+
}
127+
return undefined;
128+
})();
122129

123130
const handleMonthChange = (event: ChangeEvent<HTMLSelectElement>) => {
124131
setMonth(parseInt(event.target.value));
@@ -197,7 +204,7 @@ export const AgePickerField = ({
197204
))}
198205

199206
{displayAge === true && age !== undefined && year !== undefined && year > 1000 && year < 9999 && (
200-
<AgeDisplay age={age} />
207+
<AgeDisplay age={age} additionalInfo={ageAdditionalInfo} />
201208
)}
202209
</div>
203210

@@ -370,6 +377,7 @@ function AgePickerYearField({
370377
*/
371378
interface AgeDisplayProps {
372379
age: number;
380+
additionalInfo?: string;
373381
}
374382

375383
/**
@@ -378,7 +386,7 @@ interface AgeDisplayProps {
378386
* @param props - Props for the AgeDisplay component
379387
* @returns JSX.Element
380388
*/
381-
function AgeDisplay({ age }: AgeDisplayProps): JSX.Element {
389+
function AgeDisplay({ age, additionalInfo }: AgeDisplayProps): JSX.Element {
382390
const { t } = useTranslation(['common']);
383391

384392
return (
@@ -387,7 +395,9 @@ function AgeDisplay({ age }: AgeDisplayProps): JSX.Element {
387395
<span className="font-semibold">{t('age-picker.your-age.label')}</span>
388396
</label>
389397

390-
<span className="block max-w-prose">{`${age} ${t('age-picker.your-age.value-suffix')}`}</span>
398+
<div className="block max-w-prose">{`${age} ${t(age === 1 ? 'age-picker.your-age.value-suffix-singular' : 'age-picker.your-age.value-suffix-plural')}`}</div>
399+
400+
<div>{additionalInfo}</div>
391401
</div>
392402
);
393403
}

0 commit comments

Comments
 (0)