changed out warning alert and changed the messaging

DTS-STN · Oct 28, 2024 · 470ac13 · 470ac13
1 parent 287026f
commit 470ac13
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 17 deletions.
diff --git a/components/Forms/Warning.tsx b/components/Forms/Warning.tsx
@@ -0,0 +1,40 @@
+interface WarningAlertProps {
+  id: string
+  heading: string
+  body: Body
+  asHtml?: boolean
+}
+type Body = string | React.ReactElement | React.ReactElement[]
+
+export const WarningAlert: React.FC<WarningAlertProps> = ({
+  id,
+  heading,
+  body,
+  asHtml,
+}) => {
+  return (
+    <div id={id} className="alert-box">
+      {asHtml ? (
+        <h2
+          className="font-header-gc font-[700] text-[25.31px] leading-[32px] text-gray-900"
+          dangerouslySetInnerHTML={{ __html: heading }}
+        />
+      ) : (
+        <h2 className="font-header-gc font-[700] text-[25.31px] leading-[32px] text-gray-900">
+          {heading}
+        </h2>
+      )}
+
+      {asHtml && typeof body === 'string' ? (
+        <div
+          className=" leading-[24px] mt-2"
+          dangerouslySetInnerHTML={{ __html: body }}
+        />
+      ) : (
+        <div className=" leading-[24px] mt-2">{body}</div>
+      )}
+    </div>
+  )
+}
+
+export default WarningAlert
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -147,7 +147,11 @@ export const Layout: React.VFC<{
               logoAltText: tsln.logoAltText,
             }}
           />
-
+          {router.pathname !== '/questions' && (
+            <h1 id="applicationTitle" className="h1 my-8">
+              {title}
+            </h1>
+          )}
           <div>
             <div className="my-6">
               <Message

diff --git a/components/StepperPage/index.tsx b/components/StepperPage/index.tsx
@@ -28,6 +28,7 @@ import {
   getVisisbleErrorsForActiveStep,
 } from './utils'
 import { Stepper } from '../Stepper'
+import Warning from '../Forms/Warning'
 
 interface StepperPageProps {
   setPageTitle: (title: string) => void
@@ -299,12 +300,9 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
                   formError={formError}
                 />
                 {field.error && alertError && (
-                  <div className="mt-6 md:pr-12 msg-container border-warning">
-                    <Message
+                  <div className="mt-6">
+                    <Warning
                       id={field.key}
-                      iconId={field.key}
-                      iconAltText={tsln.warningText}
-                      type={'warning'}
                       heading={tsln.unableToProceed}
                       body={field.error}
                       asHtml
@@ -348,12 +346,9 @@ const StepperPage: React.FC<StepperPageProps> = ({ setPageTitle }) => {
                     formError={formError}
                   />
                   {field.error && alertError && (
-                    <div className="mt-6 md:pr-12 msg-container border-warning">
-                      <Message
+                    <div className="mt-6">
+                      <Warning
                         id={field.key}
-                        iconId={field.key}
-                        iconAltText={tsln.warningText}
-                        type={'warning'}
                         heading={tsln.unableToProceed}
                         body={field.error}
                         asHtml

diff --git a/i18n/web/en.ts b/i18n/web/en.ts
@@ -444,7 +444,7 @@ const en: WebTranslations = {
     [ValidationErrors.yearsInCanadaNotEnough10]:
       'You need to have lived in Canada for at least 10&nbsp;years to receive any of the benefits covered by this tool.',
     [ValidationErrors.yearsInCanadaNotEnough20]:
-      'You need to have lived in Canada for at least 20&nbsp;years to receive any of the benefits covered by this tool.',
+      'You need to have at least 20&nbsp;years of Canadian residence to receive the Old Age Security pension outside Canada.',
     [ValidationErrors.partnerYearsInCanadaMinusAge]:
       "Your partner's number of years in Canada should be no more than their age minus 18.",
     [ValidationErrors.maritalUnavailable]:
@@ -454,9 +454,9 @@ const en: WebTranslations = {
     [ValidationErrors.socialCountryUnavailable10]:
       "This tool can't estimate your benefits because you have lived in Canada for less than 10&nbsp;years. To find out if you're eligible for old age benefits, please {LINK_SERVICE_CANADA}.",
     [ValidationErrors.socialCountryUnavailable20]:
-      "This tool can't estimate your benefits because you have lived in Canada for less than 20&nbsp;years. To find out if you're eligible for old age benefits, please {LINK_SERVICE_CANADA}.",
+      'You need to have at least 20&nbsp;years of Canadian residence to receive the Old Age Security pension outside Canada. Since you lived in a country with a social security agreement with Canada, {LINK_SERVICE_CANADA} to find out if you’re eligible.',
   },
-  unableToProceed: 'Unable to proceed',
+  unableToProceed: 'We can’t estimate your benefits',
   yes: 'Yes',
   no: 'No',
   unavailable: 'unavailable',

diff --git a/i18n/web/fr.ts b/i18n/web/fr.ts
@@ -455,7 +455,7 @@ const fr: WebTranslations = {
     [ValidationErrors.yearsInCanadaNotEnough10]:
       "Votre devez avoir vécu au Canada pendant au moins 10 ans pour recevoir l'une des prestations incluses dans cet outil.",
     [ValidationErrors.yearsInCanadaNotEnough20]:
-      "Votre devez avoir vécu au Canada pendant au moins 20 ans pour recevoir l'une des prestations incluses dans cet outil.",
+      'Vous devez avoir au moins 20 ans de résidence canadienne pour recevoir la pension de la Sécurité de la vieillesse à l’extérieur du Canada.',
     [ValidationErrors.partnerYearsInCanadaMinusAge]:
       "Le nombre d'années de votre partenaire au Canada ne doit pas dépasser son âge moins 18 ans.",
     [ValidationErrors.maritalUnavailable]:
@@ -465,9 +465,9 @@ const fr: WebTranslations = {
     [ValidationErrors.socialCountryUnavailable10]:
       'Cet outil ne peut pas estimer vos prestations parce que vous avez vécu au Canada pendant moins de 10&nbsp;ans. Pour savoir si vous êtes admissible aux prestations de vieillesse, {LINK_SERVICE_CANADA}.',
     [ValidationErrors.socialCountryUnavailable20]:
-      'Cet outil ne peut pas estimer vos prestations parce que vous avez vécu au Canada pendant moins de 20&nbsp;ans. Pour savoir si vous êtes admissible aux prestations de vieillesse, {LINK_SERVICE_CANADA}.',
+      'Vous devez avoir au moins 20&nbsp;ans de résidence canadienne pour recevoir la pension de la Sécurité de la vieillesse à l’extérieur du Canada. Puisque vous avez vécu dans un pays avec un accord de sécurité sociale avec le Canada, {LINK_SERVICE_CANADA} pour savoir si vous êtes admissible.',
   },
-  unableToProceed: 'Impossible de continuer',
+  unableToProceed: 'Nous ne pouvons pas estimer vos prestations',
   yes: 'Oui',
   no: 'Non',
   unavailable: 'indisponible',

diff --git a/styles/globals.css b/styles/globals.css
@@ -201,6 +201,12 @@ html {
     opacity: 1;
   }
 
+  .alert-box {
+    @apply bg-[#FAEDD1] p-4 mx-auto;
+    border-left: 6px solid #b3800f;
+    padding: 20px 24px 24px 24px;
+  }
+
   /* css reset for number input types*/
   /* Chrome, Safari, Edge, Opera */
   input::-webkit-outer-spin-button,