Results uat changes (#260)

* implement UAT changes to results page

Author: jonathan-lewis-esdc

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

@@ -181,14 +181,14 @@
           "intro": "The monthly benefit amount you could receive depends on whether your partner is receiving the Canada Disability Benefit.",
           "non-cdb-partner-result": "If your partner is not receiving the Canada Disability Benefit, you could receive a monthly amount of <strong>{{result}}</strong>."
         },
-        "note": "<strong>Please note that you may be able to receive retroactive payments for past months that you were elligible, but not for months before June 2025.</strong>",
+        "note": "<strong>Please note that you may be able to receive back payments for past months that you were eligible, but not for any time before the launch of the benefit (July 2025).</strong>",
         "single": {
           "intro": "You could be eligible to receive:",
           "result": "A monthly amount of <strong>{{result}}</strong> from the Canada Disability Benefit."
         }
       }
     },
-    "disclaimer-alert": "This estimate is based on the information you provided and assumes that you meet the eligibility criteria for the Canada Disability Benefit.",
+    "disclaimer-alert": "This is only an estimate based on the information you provided.",
     "form-data-summary": {
       "edit-aria-labels": {
         "marital-status": "Edit your marital status",

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

@@ -184,14 +184,14 @@
           "intro": "Le montant de la prestation mensuelle que vous pourriez recevoir dépend du fait que votre partenaire reçoive ou non la Prestation canadienne pour les personnes handicapées.",
           "non-cdb-partner-result": "Si votre partenaire ne reçoit pas la Prestation canadienne pour les personnes handicapées, vous pourriez recevoir un montant mensuel de <strong>{{result}}</strong>."
         },
-        "note": "<strong>Veuillez noter que vous pourriez recevoir des paiements rétroactifs pour les mois précédents auxquels vous étiez admissible, mais pas pour les mois antérieurs à juin 2025.</strong>",
+        "note": "<strong>Veuillez noter que vous pourriez recevoir des paiements rétroactifs pour les mois passés durant lesquels vous étiez admissible, mais pas pour la période antérieure au lancement de la prestation (juillet 2025).</strong>",
         "single": {
           "intro": "Vous pourriez être admissible à recevoir\u00a0:",
           "result": "Un montant mensuel de <strong>{{result}}</strong> provenant de la Prestation canadienne pour les personnes handicapées."
         }
       }
     },
-    "disclaimer-alert": " Cette estimation est basée sur l'information que vous avez fournie et suppose que vous répondez aux critères d'admissibilité à la Prestation canadienne pour les personnes handicapées.",
+    "disclaimer-alert": "Cette estimation est basée sur l'information que vous avez fournie.",
     "form-data-summary": {
       "edit-aria-labels": {
         "marital-status": "Modifier votre état matrimonial",

frontend/app/routes/estimator/results.tsx

@@ -150,7 +150,7 @@ export default function Results({ actionData, loaderData, matches, params }: Rou
       <div className="flex flex-col space-y-12">
         <div className="md:grid md:grid-cols-3 md:gap-12">
           <section className="col-span-2 row-span-1 space-y-6">
-            <h2 className="font-lato mb-4 text-lg font-bold">{t('estimator:results.content.your-estimate.header')}</h2>
+            <h2 className="font-lato mb-4 text-2xl font-bold">{t('estimator:results.content.your-estimate.header')}</h2>
 
             {(loaderData.results.maritalStatus === 'single-divorced-separated-or-widowed' || estimationEqualsSplitBenefits) && (
               <>
@@ -210,34 +210,32 @@ export default function Results({ actionData, loaderData, matches, params }: Rou
               )}
             </p>
 
-            <h2 className="font-lato mb-4 text-lg font-bold">{t('estimator:results.content.next-steps.header')}</h2>
-
-            <div className="my-6 space-y-6 rounded border border-[#6F6F6F] px-8 py-6">
-              <div>
-                <ButtonLink
-                  target="_blank"
-                  data-gc-analytics-customclick={adobeAnalytics.getCustomClick('Results:Apply button')}
-                  to={i18n.language === 'fr' ? ESTIMATOR_CDB_APPLY_URL_FR : ESTIMATOR_CDB_APPLY_URL_EN}
-                  variant="primary"
-                  startIcon={faExternalLink}
-                  size="xl"
-                >
-                  {t('estimator:results.content.next-steps.apply-cdb')}
-                </ButtonLink>
-              </div>
-
-              <div>
-                <ButtonLink
-                  target="_blank"
-                  data-gc-analytics-customclick={adobeAnalytics.getCustomClick('Results:Learn more button')}
-                  to={i18n.language === 'fr' ? ESTIMATOR_CDB_URL_FR : ESTIMATOR_CDB_URL_EN}
-                  variant="alternative"
-                  startIcon={faExternalLink}
-                  size="xl"
-                >
-                  {t('estimator:results.content.next-steps.learn-more')}
-                </ButtonLink>
-              </div>
+            <h2 className="font-lato mt-15 mb-5 text-2xl font-bold">{t('estimator:results.content.next-steps.header')}</h2>
+
+            <div>
+              <ButtonLink
+                target="_blank"
+                data-gc-analytics-customclick={adobeAnalytics.getCustomClick('Results:Apply button')}
+                to={i18n.language === 'fr' ? ESTIMATOR_CDB_APPLY_URL_FR : ESTIMATOR_CDB_APPLY_URL_EN}
+                variant="primary"
+                startIcon={faExternalLink}
+                size="xl"
+              >
+                {t('estimator:results.content.next-steps.apply-cdb')}
+              </ButtonLink>
+            </div>
+
+            <div>
+              <ButtonLink
+                target="_blank"
+                data-gc-analytics-customclick={adobeAnalytics.getCustomClick('Results:Learn more button')}
+                to={i18n.language === 'fr' ? ESTIMATOR_CDB_URL_FR : ESTIMATOR_CDB_URL_EN}
+                variant="alternative"
+                startIcon={faExternalLink}
+                size="xl"
+              >
+                {t('estimator:results.content.next-steps.learn-more')}
+              </ButtonLink>
             </div>
           </section>
           <section className="col-span-1 row-span-2 space-y-4">{DataSummary(loaderData.formattedResults)}</section>

frontend/e2e/__snapshots__/estimator/results.spec.ts/Navigating-to-en-results-renders-the-english-results-page-1.txt

@@ -29,16 +29,13 @@
       </svg>
     </div>
     <div class="overflow-auto border-l-4 pt-4 pb-2.5 pl-6 border-l-cyan-700">
-      <p>
-        This estimate is based on the information you provided and assumes that
-        you meet the eligibility criteria for the Canada Disability Benefit.
-      </p>
+      <p>This is only an estimate based on the information you provided.</p>
     </div>
   </div>
   <div class="flex flex-col space-y-12">
     <div class="md:grid md:grid-cols-3 md:gap-12">
       <section class="col-span-2 row-span-1 space-y-6">
-        <h2 class="font-lato mb-4 text-lg font-bold">Your estimate</h2>
+        <h2 class="font-lato mb-4 text-2xl font-bold">Your estimate</h2>
         <p class="mb-4">You could be eligible to receive:</p>
         <ul class="list-disc space-y-1 pl-7">
           <li>
@@ -48,59 +45,57 @@
         </ul>
         <p>
           <strong
-            >Please note that you may be able to receive retroactive payments
-            for past months that you were elligible, but not for months before
-            June 2025.</strong
+            >Please note that you may be able to receive back payments for past
+            months that you were eligible, but not for any time before the
+            launch of the benefit (July 2025).</strong
           >
         </p>
-        <h2 class="font-lato mb-4 text-lg font-bold">Next steps</h2>
-        <div class="my-6 space-y-6 rounded border border-[#6F6F6F] px-8 py-6">
-          <div>
-            <a
-              class="font-lato inline-flex items-center justify-center rounded-sm border align-middle no-underline outline-offset-4 px-6 py-3.5 text-base border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800"
-              data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:Results:Apply button"
-              href="https://www.canada.ca/en/services/benefits/disability/canada-disability-benefit.html"
-              target="_blank"
-              ><svg
-                aria-hidden="true"
-                focusable="false"
-                data-prefix="fas"
-                data-icon="arrow-up-right-from-square"
-                class="svg-inline--fa fa-arrow-up-right-from-square fa-fw me-1"
-                role="img"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-              >
-                <path
-                  fill="currentColor"
-                  d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
-                ></path></svg
-              >Apply for the Canada Disability Benefit</a
+        <h2 class="font-lato mt-15 mb-5 text-2xl font-bold">Next steps</h2>
+        <div>
+          <a
+            class="font-lato inline-flex items-center justify-center rounded-sm border align-middle no-underline outline-offset-4 px-6 py-3.5 text-base border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800"
+            data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:Results:Apply button"
+            href="https://www.canada.ca/en/services/benefits/disability/canada-disability-benefit.html"
+            target="_blank"
+            ><svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="arrow-up-right-from-square"
+              class="svg-inline--fa fa-arrow-up-right-from-square fa-fw me-1"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
             >
-          </div>
-          <div>
-            <a
-              class="font-lato inline-flex items-center justify-center rounded-sm border align-middle no-underline outline-offset-4 px-6 py-3.5 text-base border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:bg-gray-100 focus:text-blue-700"
-              data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:Results:Learn more button"
-              href="https://www.canada.ca/en/services/benefits/disability/canada-disability-benefit.html"
-              target="_blank"
-              ><svg
-                aria-hidden="true"
-                focusable="false"
-                data-prefix="fas"
-                data-icon="arrow-up-right-from-square"
-                class="svg-inline--fa fa-arrow-up-right-from-square fa-fw me-1"
-                role="img"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 512 512"
-              >
-                <path
-                  fill="currentColor"
-                  d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
-                ></path></svg
-              >Learn more about the Canada Disability Benefit</a
+              <path
+                fill="currentColor"
+                d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
+              ></path></svg
+            >Apply for the Canada Disability Benefit</a
+          >
+        </div>
+        <div>
+          <a
+            class="font-lato inline-flex items-center justify-center rounded-sm border align-middle no-underline outline-offset-4 px-6 py-3.5 text-base border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:bg-gray-100 focus:text-blue-700"
+            data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:Results:Learn more button"
+            href="https://www.canada.ca/en/services/benefits/disability/canada-disability-benefit.html"
+            target="_blank"
+            ><svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="arrow-up-right-from-square"
+              class="svg-inline--fa fa-arrow-up-right-from-square fa-fw me-1"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
             >
-          </div>
+              <path
+                fill="currentColor"
+                d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
+              ></path></svg
+            >Learn more about the Canada Disability Benefit</a
+          >
         </div>
       </section>
       <section class="col-span-1 row-span-2 space-y-4">