Rework frontend tooltip definition implementation

__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

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<boolean>(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 (
     <span
       className="ml-2 relative md:absolute inline-block"
@@ -84,7 +80,7 @@ export const Tooltip: React.FC<{
                   className="text-white fill-current"
                 />
               </svg>
-              <h4>{fieldDef[0]}</h4>
+              <h4>{tooltipData.heading}</h4>
             </div>
             <div className="cursor-pointer" onClick={(e) => setShow(false)}>
               <svg
@@ -106,10 +102,31 @@ export const Tooltip: React.FC<{
 
           <p
             className="font-normal p-5 max-h-[700px] overflow-y-auto md:max-h-[100%] md:overflow-y-hidden"
-            dangerouslySetInnerHTML={{ __html: fieldDef[1] }}
-          ></p>
+            dangerouslySetInnerHTML={{ __html: tooltipData.text }}
+          />
         </div>
       </div>
     </span>
   )
 }
+
+/**
+ * Given the language and field, returns a single Tooltip configuration.
+ * If useDataFromKey is set, it will override text and heading.
+ */
+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.useDataFromKey) {
+    const relatedData = getTooltipTranslations(language)[data.useDataFromKey]
+    data.text = relatedData.text
+    data.heading = relatedData.heading
+  }
+  return data
+}

i18n/tooltips/en.ts

@@ -0,0 +1,50 @@
+import { TooltipTranslations } from './index'
+
+const en: TooltipTranslations = {
+  income: {
+    heading: 'Annual Net Income',
+    text: '<p>You can find your total annual net income on line 236 of your tax return document.<br> Old Age Security, Guaranteed Income Supplement, Allowance, or Allowance for the Survivor payments should not be included in your income.<br> 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.</p>',
+  },
+  age: {
+    heading: 'Age',
+    text: 'Please enter your current age.',
+  },
+  maritalStatus: {
+    heading: 'Marital Status',
+    text: "<p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Common-Law</span>: You have lived continuously with your partner in a marital-type relationship for a minimum of one year.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Divorced</span>: You are officially separated and have legally ended your marriage.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Married</span>: 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.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Single</span>: You have never been married and are not in a common-law relationship.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Surviving Partner/Widowed</span>: Your spouse has died and that you have not remarried or entered into a common-law relationship.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Separated:</span> 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.</p>",
+  },
+  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: "<p style='padding-bottom: 12px;'>You can find your total annual net income on line 236 of your tax return document.<br> Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.<br> 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.</p>",
+  },
+  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: "<p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Canadian citizen:</span> 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.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>A permanent resident or landed immigrant (non-sponsored immigrant):</span> You have been given permanent resident status by immigrating to Canada, but is not a Canadian citizen.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>A permanent resident or landed immigrant (sponsored immigrant):</span> 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.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Indian status or status card:</span> You are registered as an Indian under the Indian Act.</p>",
+  },
+  legalStatusOther: {
+    heading: 'Other Legal Status',
+    text: '<p>Example: Temporary resident, student, temporary worker, etc</p>',
+  },
+  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

i18n/tooltips/fr.ts

@@ -0,0 +1,50 @@
+import { TooltipTranslations } from './index'
+
+const fr: TooltipTranslations = {
+  income: {
+    heading: 'Annual Net Income',
+    text: '<p>You can find your total annual net income on line 236 of your tax return document.<br> Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.<br> 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.</p>',
+  },
+  age: {
+    heading: 'Age',
+    text: 'Please enter your current age.',
+  },
+  maritalStatus: {
+    heading: 'Marital Status',
+    text: "<p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Common-Law</span>: You have lived continuously with your partner in a marital-type relationship for a minimum of one year.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Divorced</span>: You are officially separated and have legally ended your marriage.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Married</span>: 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.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Single</span>: You have never been married and are not in a common-law relationship.</p> <p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Surviving Partner/Widowed</span>: Your spouse has died and that you have not remarried or entered into a common-law relationship.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Separated:</span> 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.</p>",
+  },
+  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: "<p style='padding-bottom: 12px;'>You can find your total annual net income on line 236 of your tax return document.<br> Old Age Security, Guaranteed Income Supplement, Allowance or Allowance for the Survivor payments should not be included in your income.<br> 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.</p>",
+  },
+  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: "<p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Canadian citizen:</span> 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.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>A permanent resident or landed immigrant (non-sponsored immigrant):</span> You have been given permanent resident status by immigrating to Canada, but is not a Canadian citizen.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>A permanent resident or landed immigrant (sponsored immigrant):</span> 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.</p><p style='padding-bottom: 12px;'><span style='font-weight: bold;'>Indian status or status card:</span> You are registered as an Indian under the Indian Act.</p>",
+  },
+  legalStatusOther: {
+    heading: 'Other Legal Status',
+    text: '<p>Example: Temporary resident, student, temporary worker, etc</p>',
+  },
+  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

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 useDataFromKey is set, it will override text and heading.
+ */
+export interface TooltipTranslation {
+  heading?: string
+  text?: string
+  useDataFromKey?: 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
+  }
+}