From 1136a55f0134e8627c89d4bd6c03ed7476e8e5be Mon Sep 17 00:00:00 2001 From: Jeremy Kennedy Date: Tue, 25 Jan 2022 18:00:59 -0500 Subject: [PATCH 1/2] rework frontend tooltip definition implementation --- __tests__/components/Tooltip.test.tsx | 17 ++++++--- components/Tooltip/index.ts | 3 -- components/Tooltip/tooltip.tsx | 36 ++++++++++++------ components/Tooltip/tooltips.en.json | 53 --------------------------- i18n/tooltips/en.ts | 50 +++++++++++++++++++++++++ i18n/tooltips/fr.ts | 50 +++++++++++++++++++++++++ i18n/tooltips/index.ts | 34 +++++++++++++++++ 7 files changed, 171 insertions(+), 72 deletions(-) delete mode 100644 components/Tooltip/index.ts delete mode 100644 components/Tooltip/tooltips.en.json create mode 100644 i18n/tooltips/en.ts create mode 100644 i18n/tooltips/fr.ts create mode 100644 i18n/tooltips/index.ts diff --git a/__tests__/components/Tooltip.test.tsx b/__tests__/components/Tooltip.test.tsx index 3ff96fb8a..52237d9a9 100644 --- a/__tests__/components/Tooltip.test.tsx +++ b/__tests__/components/Tooltip.test.tsx @@ -2,11 +2,14 @@ * @jest-environment jsdom */ import '@testing-library/jest-dom' +import { render, screen } from '@testing-library/react' import React from 'react' -import { cleanup, render, screen } from '@testing-library/react' import { LanguageProvider, StoreProvider } from '../../components/Contexts' -import { Tooltip } from '../../components/Tooltip/tooltip' -import { fieldDefinitions } from '../../components/Tooltip/index' +import { + getTooltipTranslationByField, + Tooltip, +} from '../../components/Tooltip/tooltip' +import { Language } from '../../i18n/api' // gets data correctly and presents it describe('Tooltip component', () => { @@ -26,8 +29,12 @@ describe('Tooltip component', () => { render(ui) const tooltip = screen.getByTestId('tooltip') - expect(tooltip.textContent).toContain(fieldDefinitions.data[props.field][0]) // tooltip title - expect(tooltip.innerHTML).toContain(fieldDefinitions.data[props.field][0]) // tooltip content + expect(tooltip.textContent).toContain( + getTooltipTranslationByField(Language.EN, props.field).heading + ) + expect(tooltip.innerHTML).toContain( + getTooltipTranslationByField(Language.EN, props.field).text + ) }) // throws if tooltip not found diff --git a/components/Tooltip/index.ts b/components/Tooltip/index.ts deleted file mode 100644 index 4cffd7384..000000000 --- a/components/Tooltip/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import data from './tooltips.en.json' - -export const fieldDefinitions = { data } diff --git a/components/Tooltip/tooltip.tsx b/components/Tooltip/tooltip.tsx index cbbfd105e..a252fda9d 100644 --- a/components/Tooltip/tooltip.tsx +++ b/components/Tooltip/tooltip.tsx @@ -1,12 +1,14 @@ import React, { useEffect, useRef, useState } from 'react' +import { Language } from '../../i18n/api' +import { getTooltipTranslations, TooltipTranslation } from '../../i18n/tooltips' +import { FieldKey } from '../../utils/api/definitions/fields' import { useMediaQuery } from '../Hooks' -import { fieldDefinitions } from './index' export const Tooltip: React.FC<{ field: string size?: number }> = ({ field, size }) => { - const [fieldDef] = useState(fieldDefinitions.data[field]) + const tooltipData = getTooltipTranslationByField(Language.EN, field) // todo: do not simply default to english const [show, setShow] = useState(false) const wrapperRef = useRef(null) @@ -29,12 +31,6 @@ export const Tooltip: React.FC<{ const isMobile = useMediaQuery(992) - if (!fieldDef) { - throw new Error( - `Tooltip with key "${field}" not found in internationalization file.` - ) - } - return ( -

{fieldDef[0]}

+

{tooltipData.heading}

setShow(false)}>

+ dangerouslySetInnerHTML={{ __html: tooltipData.text }} + />
) } + +/** + * Given the language and field, returns a single Tooltip configuration. + * If useTextFromKey is set, it will override text. + */ +export function getTooltipTranslationByField( + language: Language, + field: string | FieldKey +): TooltipTranslation { + const data: TooltipTranslation = getTooltipTranslations(language)[field] + if (!data) + throw new Error( + `Tooltip with key "${field}" not found in internationalization file.` + ) + if (data.useTextFromKey) + data.text = getTooltipTranslations(language)[data.useTextFromKey].text + return data +} diff --git a/components/Tooltip/tooltips.en.json b/components/Tooltip/tooltips.en.json deleted file mode 100644 index c48fe9424..000000000 --- a/components/Tooltip/tooltips.en.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "income": [ - "Annual Net Income", - "

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

" - ], - - "age": ["Age", "Please enter your current age."], - - "maritalStatus": [ - "Marital Status", - "

Common-Law: You have lived continuously with your partner in a marital-type relationship for a minimum of one year.

Divorced: You are officially separated and have legally ended your marriage.

Married: You and your spouse have had a ceremony that legally binds you to each other. Your marriage must be legally recognized in the country where it was performed and in Canada.

Single: You have never been married and are not in a common-law relationship.

Surviving Partner/Widowed: Your spouse has died and that you have not remarried or entered into a common-law relationship.

Separated: 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.

" - ], - - "partnerBenefitStatus": [ - "Partner's eligibility to benefits", - "A person is eligible to receive full OAS if they have lived in Canada for 40 years or more after the age of 18." - ], - - "partnerIncome": [ - "Partner's Annual Net Income", - "

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

" - ], - - "livingCountry": [ - "Current Residency", - "The name of the country or territory you live in, if you have been lawfully admitted to that country or territory." - ], - - "legalStatus": [ - "Legal Status", - "

Canadian citizen: You are Canadian by birth (either born in Canada or born outside Canada to a Canadian citizen who was themselves either born in Canada or granted citizenship) or you have applied for a grant of citizenship and have received Canadian citizenship.

A permanent resident or landed immigrant (non-sponsored immigrant): You have been given permanent resident status by immigrating to Canada, but is not a Canadian citizen.

A permanent resident or landed immigrant (sponsored immigrant): You are a foreign national who has applied for permanent residence under the Family Class, has an approved Canadian sponsor, and meets the requirements of the Family Class.

Indian status or status card: You are registered as an Indian under the Indian Act.

" - ], - - "legalStatusOther": [ - "Other Legal Status", - "

Example: Temporary resident, student, temporary worker, etc

" - ], - - "canadaWholeLife": [ - "Residency in Canada", - "Note that periods where you resided in a foreign country for less than 6 months do not count" - ], - - "yearsInCanadaSince18": [ - "Years Lived in Canada", - "This includes periods when you normally lived in Canada. If you have not lived in Canada all of your life, any absences from Canada longer than 6 months are not included. " - ], - - "everLivedSocialCountry": [ - "Social Agreement Countries", - "You may still qualify if you have you lived in one of the countries Canada has established a social security agreement." - ] -} diff --git a/i18n/tooltips/en.ts b/i18n/tooltips/en.ts new file mode 100644 index 000000000..c87226926 --- /dev/null +++ b/i18n/tooltips/en.ts @@ -0,0 +1,50 @@ +import { TooltipTranslations } from './index' + +const en: TooltipTranslations = { + income: { + heading: 'Annual Net Income', + text: '

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance, or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

', + }, + age: { + heading: 'Age', + text: 'Please enter your current age.', + }, + maritalStatus: { + heading: 'Marital Status', + text: "

Common-Law: You have lived continuously with your partner in a marital-type relationship for a minimum of one year.

Divorced: You are officially separated and have legally ended your marriage.

Married: You and your spouse have had a ceremony that legally binds you to each other. Your marriage must be legally recognized in the country where it was performed and in Canada.

Single: You have never been married and are not in a common-law relationship.

Surviving Partner/Widowed: Your spouse has died and that you have not remarried or entered into a common-law relationship.

Separated: 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.

", + }, + partnerBenefitStatus: { + heading: "Partner's eligibility to benefits", + text: 'A person is eligible to receive full OAS if they have lived in Canada for 40 years or more after the age of 18.', + }, + partnerIncome: { + heading: "Partner's Annual Net Income", + text: "

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

", + }, + livingCountry: { + heading: 'Current Residency', + text: 'The name of the country or territory you live in, if you have been lawfully admitted to that country or territory.', + }, + legalStatus: { + heading: 'Legal Status', + text: "

Canadian citizen: You are Canadian by birth (either born in Canada or born outside Canada to a Canadian citizen who was themselves either born in Canada or granted citizenship) or you have applied for a grant of citizenship and have received Canadian citizenship.

A permanent resident or landed immigrant (non-sponsored immigrant): You have been given permanent resident status by immigrating to Canada, but is not a Canadian citizen.

A permanent resident or landed immigrant (sponsored immigrant): You are a foreign national who has applied for permanent residence under the Family Class, has an approved Canadian sponsor, and meets the requirements of the Family Class.

Indian status or status card: You are registered as an Indian under the Indian Act.

", + }, + legalStatusOther: { + heading: 'Other Legal Status', + text: '

Example: Temporary resident, student, temporary worker, etc

', + }, + canadaWholeLife: { + heading: 'Residency in Canada', + text: 'Note that periods where you resided in a foreign country for less than 6 months do not count', + }, + yearsInCanadaSince18: { + heading: 'Years Lived in Canada', + text: 'This includes periods when you normally lived in Canada. If you have not lived in Canada all of your life, any absences from Canada longer than 6 months are not included. ', + }, + everLivedSocialCountry: { + heading: 'Social Agreement Countries', + text: 'You may still qualify if you have you lived in one of the countries Canada has established a social security agreement.', + }, +} + +export default en diff --git a/i18n/tooltips/fr.ts b/i18n/tooltips/fr.ts new file mode 100644 index 000000000..b0edd9048 --- /dev/null +++ b/i18n/tooltips/fr.ts @@ -0,0 +1,50 @@ +import { TooltipTranslations } from './index' + +const fr: TooltipTranslations = { + income: { + heading: 'Annual Net Income', + text: '

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

', + }, + age: { + heading: 'Age', + text: 'Please enter your current age.', + }, + maritalStatus: { + heading: 'Marital Status', + text: "

Common-Law: You have lived continuously with your partner in a marital-type relationship for a minimum of one year.

Divorced: You are officially separated and have legally ended your marriage.

Married: You and your spouse have had a ceremony that legally binds you to each other. Your marriage must be legally recognized in the country where it was performed and in Canada.

Single: You have never been married and are not in a common-law relationship.

Surviving Partner/Widowed: Your spouse has died and that you have not remarried or entered into a common-law relationship.

Separated: 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.

", + }, + partnerBenefitStatus: { + heading: "Partner's eligibility to benefits", + text: 'A person is eligible to receive full OAS if they have lived in Canada for 40 years or more after the age of 18.', + }, + partnerIncome: { + heading: "Partner's Annual Net Income", + text: "

You can find your total annual net income on line 236 of your tax return document.
Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.
If you do not have tax filing income information, you may use an estimate of your income. If you have more than one source of income (e.g., salary, investment income, pension income), you should add all of the net income estimates together before entering the total amount. Do not include any income from a partner or dependant.

", + }, + livingCountry: { + heading: 'Current Residency', + text: 'The name of the country or territory you live in, if you have been lawfully admitted to that country or territory.', + }, + legalStatus: { + heading: 'Legal Status', + text: "

Canadian citizen: You are Canadian by birth (either born in Canada or born outside Canada to a Canadian citizen who was themselves either born in Canada or granted citizenship) or you have applied for a grant of citizenship and have received Canadian citizenship.

A permanent resident or landed immigrant (non-sponsored immigrant): You have been given permanent resident status by immigrating to Canada, but is not a Canadian citizen.

A permanent resident or landed immigrant (sponsored immigrant): You are a foreign national who has applied for permanent residence under the Family Class, has an approved Canadian sponsor, and meets the requirements of the Family Class.

Indian status or status card: You are registered as an Indian under the Indian Act.

", + }, + legalStatusOther: { + heading: 'Other Legal Status', + text: '

Example: Temporary resident, student, temporary worker, etc

', + }, + canadaWholeLife: { + heading: 'Residency in Canada', + text: 'Note that periods where you resided in a foreign country for less than 6 months do not count', + }, + yearsInCanadaSince18: { + heading: 'Years Lived in Canada', + text: 'This includes periods when you normally lived in Canada. If you have not lived in Canada all of your life, any absences from Canada longer than 6 months are not included. ', + }, + everLivedSocialCountry: { + heading: 'Social Agreement Countries', + text: 'You may still qualify if you have you lived in one of the countries Canada has established a social security agreement.', + }, +} + +export default fr diff --git a/i18n/tooltips/index.ts b/i18n/tooltips/index.ts new file mode 100644 index 000000000..8de1e0f8a --- /dev/null +++ b/i18n/tooltips/index.ts @@ -0,0 +1,34 @@ +import { FieldKey } from '../../utils/api/definitions/fields' +import { Language } from '../api' +import en from './en' +import fr from './fr' + +/** + * A single Tooltip. If useTextFromKey is set, it will override text. + */ +export interface TooltipTranslation { + heading: string + text?: string + useTextFromKey?: string +} + +/** + * All the Tooltips for all questions. + */ +export type TooltipTranslations = { + [x in FieldKey]: TooltipTranslation +} + +/** + * Given a language, returns all Tooltip data. + */ +export function getTooltipTranslations( + language: Language +): TooltipTranslations { + switch (language) { + case Language.EN: + return en + case Language.FR: + return fr + } +} From 9a5b9715f2a8a4fb0214e255dd624364c7f29cd5 Mon Sep 17 00:00:00 2001 From: Jeremy Kennedy Date: Tue, 25 Jan 2022 18:29:02 -0500 Subject: [PATCH 2/2] useDataFromKey will override text and heading --- components/Tooltip/tooltip.tsx | 9 ++++++--- i18n/tooltips/index.ts | 6 +++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/components/Tooltip/tooltip.tsx b/components/Tooltip/tooltip.tsx index a252fda9d..717ccef35 100644 --- a/components/Tooltip/tooltip.tsx +++ b/components/Tooltip/tooltip.tsx @@ -112,7 +112,7 @@ export const Tooltip: React.FC<{ /** * Given the language and field, returns a single Tooltip configuration. - * If useTextFromKey is set, it will override text. + * If useDataFromKey is set, it will override text and heading. */ export function getTooltipTranslationByField( language: Language, @@ -123,7 +123,10 @@ export function getTooltipTranslationByField( throw new Error( `Tooltip with key "${field}" not found in internationalization file.` ) - if (data.useTextFromKey) - data.text = getTooltipTranslations(language)[data.useTextFromKey].text + if (data.useDataFromKey) { + const relatedData = getTooltipTranslations(language)[data.useDataFromKey] + data.text = relatedData.text + data.heading = relatedData.heading + } return data } diff --git a/i18n/tooltips/index.ts b/i18n/tooltips/index.ts index 8de1e0f8a..8ab885a28 100644 --- a/i18n/tooltips/index.ts +++ b/i18n/tooltips/index.ts @@ -4,12 +4,12 @@ import en from './en' import fr from './fr' /** - * A single Tooltip. If useTextFromKey is set, it will override text. + * A single Tooltip. If useDataFromKey is set, it will override text and heading. */ export interface TooltipTranslation { - heading: string + heading?: string text?: string - useTextFromKey?: string + useDataFromKey?: string } /**