Sync develop with Main for release candidate v1.4.1

.azuredevops/dynamic-branches.yml

@@ -97,11 +97,11 @@ steps:
         --resource-group $(webapp.resourceGroup) \
         --slot pr-preview-$(webapp.slotName) \
         --configuration-source $(webapp.name)
-        # az webapp identity assign \
-        # -g $(webapp.resourceGroup) \
-        # -n $(webapp.name) \
-        # --slot pr-preview-$(webapp.slotName) \
-        # --identities /subscriptions/400c5730-25f5-4ee6-a933-8b289b9ccb0d/resourcegroups/rg-eligibilityestimator-dev/providers/microsoft.managedidentity/userassignedidentities/id-eligibilityestimator-dev
+        az webapp identity assign \
+        --resource-group $(webapp.resourceGroup) \
+        --name $(webapp.name) \
+        --slot pr-preview-$(webapp.slotName) \
+        --identities /subscriptions/400c5730-25f5-4ee6-a933-8b289b9ccb0d/resourcegroups/rg-eligibilityestimator-dev/providers/microsoft.managedidentity/userassignedidentities/id-eligibilityestimator-dev
 
   - task: AzureCLI@2
     displayName: 'Deploy pr image to new slot'

components/Forms/DatePicker.tsx

@@ -131,7 +131,9 @@ export const DatePicker: React.FC<DatePickerProps> = (props) => {
               type="number"
               min={props.minYear}
               max={props.maxYear}
+              pattern="[0-9]*"
               onChange={_onYearChange}
+              onKeyUpCapture={restrictNonNumbers}
               className="inputStyles"
             />
           </div>

components/Layout/Breadcrumb.tsx

@@ -21,13 +21,13 @@ export function Breadcrumb({ locale, items = [] }: BreadcrumbProps) {
             className="inline-block min-w-0 max-w-full truncate -my-4"
           >
             <Link href={item.link} locale={locale}>
-              <a className="font-sans text-[16px] leading-[23px] font-[400] text-[#295376] hover:text-[#0535D2] underline">
+              <a className="font-sans ml-1 mr-1 text-[16px] leading-[23px] font-[400] text-[#295376] hover:text-[#0535D2] underline">
                 {item.text}
               </a>
             </Link>
 
             {index < items.length - 1 && (
-              <span className="ml-2 mr-1 inline-block align-middle text-multi-blue-blue70b icoxxxn-cheveron-right">
+              <span className="mx-1 inline-block align-middle text-multi-blue-blue70b">
                 {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img
                   id={`chevron-${index}`}

components/Layout/Footer.tsx

@@ -41,7 +41,7 @@ export const Footer = ({ id, locale }: FooterProps) => {
                   } list-none w-64 sm:w-56 lg:w-80 my-1`}
                 >
                   <Link href={value.link} locale={locale}>
-                    <a className="font-[400] text-white text-[14px] leading-[19px]">
+                    <a className="font-[400] !text-white text-[14px] leading-[19px]">
                       {value.text}
                     </a>
                   </Link>
@@ -67,7 +67,7 @@ export const Footer = ({ id, locale }: FooterProps) => {
                     } pr-4 my-1`}
                   >
                     <Link href={value.link}>
-                      <a className="font-[400] text-[14px] leading-[19px] text-[#31455C]">
+                      <a className="font-[400] text-[14px] leading-[19px] text-[#284162]">
                         {value.text}
                       </a>
                     </Link>

components/Layout/index.tsx

@@ -18,8 +18,6 @@ export const Layout: React.VFC<{
   const [prodEnv, setProdEnv] = useState(null)
   const isProduction = process.env.APP_ENV === 'production'
 
-  console.log(hostname, isProduction)
-
   useEffect(() => {
     if (isProduction) {
       setProdEnv(hostname.includes('.alpha.service') ? 'alpha' : 'beta')

i18n/api/en.ts

@@ -327,15 +327,16 @@ const en: Translations = {
   },
   detail: {
     eligible: "You're likely eligible for this benefit.",
-    futureEligible60: "You'll likely be eligible once you turn 60.",
+    futureEligible60:
+      "You'll likely be eligible once you turn {EARLIEST_ELIGIBLE_AGE}.",
     futureEligible:
       "You'll likely be eligible once you turn {EARLIEST_ELIGIBLE_AGE}.",
     eligibleIncomeTooHigh:
       "You're likely eligible for this benefit, but your income is too high to receive a monthly payment at this time.",
     futureEligibleIncomeTooHigh:
-      'You may be eligible once you turn 65. Since your income is too high, you may not receive a monthly payment.',
+      'You may be eligible once you turn {EARLIEST_ELIGIBLE_AGE}. Since your income is too high, you may not receive a monthly payment.',
     futureEligibleIncomeTooHigh2:
-      'You may be eligible once you turn 60. If your income stays the same, you may not receive a monthly payment.',
+      'You may be eligible once you turn {EARLIEST_ELIGIBLE_AGE}. If your income stays the same, you may not receive a monthly payment.',
     eligibleDependingOnIncome:
       "You're likely eligible for this benefit if {INCOME_SINGLE_OR_COMBINED} is less than {INCOME_LESS_THAN}. Depending on your income, you should expect to receive around {ENTITLEMENT_AMOUNT_FOR_BENEFIT} every month.",
     eligibleDependingOnIncomeNoEntitlement:
@@ -433,7 +434,7 @@ const en: Translations = {
       eligibleIncomeTooHigh:
         "You're likely eligible for this benefit, but your income is too high to receive a monthly payment at this time.",
       futureEligibleIncomeTooHigh:
-        'You may be eligible once you turn 65. Since your income is too high, you may not receive a monthly payment.',
+        'You may be eligible once you turn {EARLIEST_ELIGIBLE_AGE}. Since your income is too high, you may not receive a monthly payment.',
       serviceCanadaReviewYourPayment:
         'If you apply, Service Canada will review your payment amount each year based on your income tax return.',
       automaticallyBePaid:
@@ -445,16 +446,16 @@ const en: Translations = {
       youShouldHaveReceivedLetter:
         'You should have received a letter about your enrolment status the month after you turned 64.',
       ifYouDidnt:
-        "If you didn't, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' target='_blank' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a> to find out if you need to apply.",
+        "If you didn't, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' target='_blank' aria-label='opens a new tab' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a> to find out if you need to apply.",
       applyOnline: "If you didn't, you can apply online.",
       over70:
         "If you're over the age of 70 and are not receiving an Old Age Security pension, apply now.",
       eligibleWhenTurn65:
         "You may be eligible for this benefit once you turn 65. You can <a class='text-default-text' style='text-decoration: underline' href='/en/questions#age'>edit your answers</a> to see what you could receive at a future age.",
       ifNotReceiveLetter64:
-        "If you didn't, <a class='text-default-text addOpenNew' style='text-decoration: underline' target='_blank' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a> to find out if you need to apply.",
+        "If you didn't, <a class='text-default-text addOpenNew' style='text-decoration: underline' target='_blank' aria-label='opens a new tab' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a> to find out if you need to apply.",
       chooseToDefer:
-        "You can choose to defer your pension or increase your years of residence in Canada. To find out which option is best for you, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' target='_blank' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a>.",
+        "You can choose to defer your pension or increase your years of residence in Canada. To find out which option is best for you, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' target='_blank' aria-label='opens a new tab' href='https://www.canada.ca/en/employment-social-development/corporate/contact/oas.html'>contact us</a>.",
       receivePayment:
         'You may be able to receive payment for up to the last 11 months.',
     },
@@ -464,7 +465,7 @@ const en: Translations = {
       incomeTooHigh:
         "You're likely eligible for this benefit, but your income is too high to receive a monthly payment at this time.",
       futureEligibleIncomeTooHigh:
-        'You may be eligible once you turn 65. If your income stays the same, you may not receive a monthly payment.',
+        'You may be eligible once you turn {EARLIEST_ELIGIBLE_AGE}. If your income stays the same, you may not receive a monthly payment.',
       ifYouApply:
         "If you apply, Service Canada will review your income tax return every year. You'll automatically be paid if your income qualifies.",
       canApplyOnline: 'You can apply for this benefit online.',

i18n/api/fr.ts

@@ -336,15 +336,15 @@ const fr: Translations = {
   detail: {
     eligible: 'Vous êtes probablement admissible à cette prestation.',
     futureEligible60:
-      'Vous serez probablement admissible lorsque vous aurez 60 ans.',
+      'Vous serez probablement admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}.',
     futureEligible:
       'Vous serez probablement admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}.',
     eligibleIncomeTooHigh:
       'Vous êtes probablement admissible à cette prestation, mais votre revenu est trop élevé pour recevoir un paiement mensuel pour le moment.',
     futureEligibleIncomeTooHigh:
-      'Vous pourriez être admissible lorsque vous aurez 65 ans. Puisque votre revenu est trop élevé, vous ne recevrez peut-être pas de paiement mensuel.',
+      'Vous pourriez être admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}. Puisque votre revenu est trop élevé, vous ne recevrez peut-être pas de paiement mensuel.',
     futureEligibleIncomeTooHigh2:
-      'Vous serez probablement admissible lorsque vous aurez 60 ans. Si votre revenu reste le même, vous ne recevrez peut-être pas de paiement mensuel.',
+      'Vous serez probablement admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}. Si votre revenu reste le même, vous ne recevrez peut-être pas de paiement mensuel.',
     eligibleDependingOnIncome:
       'Vous êtes probablement éligible à cette prestation si {INCOME_SINGLE_OR_COMBINED} est inférieur à {INCOME_LESS_THAN}. En fonction de {YOUR_OR_COMPLETE}, vous devriez vous attendre à recevoir environ {ENTITLEMENT_AMOUNT_FOR_BENEFIT} par mois.',
     eligibleDependingOnIncomeNoEntitlement:
@@ -443,7 +443,7 @@ const fr: Translations = {
       eligibleIncomeTooHigh:
         'Vous êtes probablement admissible à cette prestation, mais votre revenu est trop élevé pour recevoir un paiement mensuel pour le moment.',
       futureEligibleIncomeTooHigh:
-        'Vous pourriez être admissible lorsque vous aurez 65 ans. Puisque votre revenu est trop élevé, vous ne recevrez peut-être pas de paiement mensuel.',
+        'Vous pourriez être admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}. Puisque votre revenu est trop élevé, vous ne recevrez peut-être pas de paiement mensuel.',
       serviceCanadaReviewYourPayment:
         'Si vous présentez une demande, Service Canada révisera le montant de votre paiement chaque année en fonction de votre déclaration de revenus.',
       automaticallyBePaid:
@@ -455,17 +455,17 @@ const fr: Translations = {
       youShouldHaveReceivedLetter:
         "Vous devriez avoir reçu une lettre au sujet de votre statut d'inscription le mois après votre 64e anniversaire.",
       ifYouDidnt:
-        "Si vous ne l'avez pas reçue, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a> pour savoir si vous devez présenter une demande.",
+        "Si vous ne l'avez pas reçue, <a id='oasLink2' class='text-default-text' style='text-decoration: underline' target='_blank' aria-label='ouvre dans un nouvel onglet' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a> pour savoir si vous devez présenter une demande.",
       applyOnline:
         "Si vous ne l'avez pas reçue, vous pouvez présenter une demande en ligne.",
       over70:
         'Si vous avez plus de 70 ans et ne recevez pas la pension la Sécurité de la vieillesse, présentez votre demande dès que possible.',
       eligibleWhenTurn65:
         "Vous pourriez être admissible lorsque vous aurez 65 ans. Vous pouvez <a class='text-default-text' style='text-decoration: underline' href='/fr/questions#age'>modifier vos réponses</a> pour voir ce que vous pourriez recevoir à un âge futur.",
       ifNotReceiveLetter64:
-        "Si vous ne l'avez pas reçue, <a class='addOpenNew text-default-text' style='text-decoration: underline' target='_blank' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a> pour savoir si vous devez présenter une demande.",
+        "Si vous ne l'avez pas reçue, <a class='addOpenNew text-default-text' style='text-decoration: underline' target='_blank' aria-label='ouvre dans un nouvel onglet' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a> pour savoir si vous devez présenter une demande.",
       chooseToDefer:
-        "Vous pouvez choisir de reporter votre pension ou augmenter vos années de résidence au Canada. Pour savoir quelle option serait la meilleure pour vous, <a class='addOpenNew text-default-text' style='text-decoration: underline' target='_blank' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a>.",
+        "Vous pouvez choisir de reporter votre pension ou augmenter vos années de résidence au Canada. Pour savoir quelle option serait la meilleure pour vous, <a class='addOpenNew text-default-text' style='text-decoration: underline' target='_blank' aria-label='ouvre dans un nouvel onglet' href='https://www.canada.ca/fr/emploi-developpement-social/ministere/coordonnees/sv.html'>communiquez avec nous</a>.",
       receivePayment:
         'Vous pourriez recevoir un paiement pour un maximum des 11 derniers mois.',
     },
@@ -475,7 +475,7 @@ const fr: Translations = {
       incomeTooHigh:
         'Vous êtes probablement admissible à cette prestation, mais votre revenu est trop élevé pour recevoir un paiement mensuel pour le moment.',
       futureEligibleIncomeTooHigh:
-        'Vous pourriez être admissible lorsque vous aurez 65 ans. Si votre revenu reste le même, vous ne recevrez peut-être pas de paiement mensuel.',
+        'Vous pourriez être admissible lorsque vous aurez {EARLIEST_ELIGIBLE_AGE}. Si votre revenu reste le même, vous ne recevrez peut-être pas de paiement mensuel.',
       ifYouApply:
         'Si vous présentez une demande, Service Canada révisera votre déclaration de revenus chaque année. Vous recevrez automatiquement des paiements si votre revenu  est admissible.',
       canApplyOnline:

i18n/tooltips/en.ts

@@ -69,7 +69,7 @@ const en: TooltipTranslations = {
     moreinfo: 'Will this income be used in your application?',
     text: "<div style='margin-bottom: 16px;'> \
             <p style='padding-bottom: 8px; color: rgba(92, 92, 92, 1);'> \
-            No, this is an estimation. Your actual <a style='text-decoration: underline; color: rgba(40, 65, 98, 1);' href='https://www.canada.ca/en/services/benefits/publicpensions/cpp/old-age-security/guaranteed-income-supplement/apply.html#h2.2-3.1' target='_blank'>income and exemptions<img style='padding: 0px 0px 3px 4px; display: inline-block;' src='/openNewTab.svg'/></a> will be assessed when you apply. \
+            No, this is an estimation. Your actual <a class='hintText' style='text-decoration: underline;' href='https://www.canada.ca/en/services/benefits/publicpensions/cpp/old-age-security/guaranteed-income-supplement/apply.html#h2.2-3.1' target='_blank' aria-label='opens a new tab'>income and exemptions</a> will be assessed when you apply. \
             </p> \
           </div> \
           ",
@@ -89,7 +89,7 @@ const en: TooltipTranslations = {
     moreinfo: 'Will this income be used in your application?',
     text: "<div style='margin-bottom: 16px;'> \
             <p style='padding-bottom: 8px; color: rgba(92, 92, 92, 1);'> \
-            No, this is an estimation. Your partner’s actual <a style='text-decoration: underline; color: rgba(40, 65, 98, 1); display: flex;' href='https://www.canada.ca/en/services/benefits/publicpensions/cpp/old-age-security/guaranteed-income-supplement/apply.html#h2.2-3.1' target='_blank'>income and exemptions<img style='padding: 0px 0px 3px 4px;' src='/openNewTab.svg'/></a> will be assessed when you apply. \
+            No, this is an estimation. Your partner’s actual <a class='hintText' style='text-decoration: underline; display: flex;' href='https://www.canada.ca/en/services/benefits/publicpensions/cpp/old-age-security/guaranteed-income-supplement/apply.html#h2.2-3.1' target='_blank' aria-label='opens a new tab'>income and exemptions</a> will be assessed when you apply. \
             </p> \
           </div> \
           ",