New results

components/Forms/Button.tsx

@@ -6,22 +6,24 @@ interface ButtonProps {
   style: 'primary' | 'secondary' | 'supertask' | 'danger' | 'link'
   custom?: string
   href?: string
+  imgHref?: string
   text: string
   type?: ButtonType
   locale?: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
   ariaLabel?: string
   attributes?: any
+  alt?: string
 }
 
 type ButtonType = 'submit' | 'reset' | 'button'
 
 const BUTTON_STYLES = {
   primary:
-    'text-white bg-[#26374A] hover:bg-[#2B4380] focus:bg-[#0535D2] border-transparent border-[2px]',
+    'text-white visited:text-white bg-[#26374A] hover:bg-[#2B4380] focus:bg-[#0535D2] border-transparent border-[2px]',
   secondary:
-    'text-[#2B4380] focus:text-white bg-white hover:bg-[#D7E5F5] focus:bg-[#0535D2] border-[#2B4380] border-[2px]',
+    'text-[#2B4380] visited:text-[#2B4380] focus:text-white bg-white hover:bg-[#D7E5F5] focus:bg-[#0535D2] border-[#2B4380] border-[2px]',
   supertask: 'text-white bg-[#318000] hover:bg-[#1D4D00] focus:bg-[#1D4D00]',
   danger: 'text-white bg-[#BC3331] hover:bg-[#942826] focus:bg-[#942826]',
   link: 'text-[#2B4380] hover:text-[#0535D2] focus:text-[#0535D2]n hover:underline focus:underline',
@@ -32,13 +34,15 @@ export const Button: React.FC<ButtonProps> = ({
   style,
   custom = '',
   href,
+  imgHref,
   text,
   type = 'button',
   locale,
   onClick,
   disabled,
   ariaLabel,
   attributes,
+  alt = 'Image alt',
 }) => {
   const btnStyle = BUTTON_STYLES[style]
 
@@ -47,7 +51,7 @@ export const Button: React.FC<ButtonProps> = ({
   return href ? (
     <Link href={href} locale={locale}>
       <a className={classes} aria-label={ariaLabel} {...attributes}>
-        {text}
+        {imgHref && <img src={imgHref} alt={alt} className="pr-3" />} {text}
       </a>
     </Link>
   ) : (
@@ -60,6 +64,7 @@ export const Button: React.FC<ButtonProps> = ({
       aria-label={ariaLabel}
       {...attributes}
     >
+      {imgHref && <img src={imgHref} alt={alt} className="pr-3" />}
       {text}
     </button>
   )

components/ResultsPage/BenefitCard.tsx

@@ -1,7 +1,10 @@
-import Image from 'next/image'
+import { Button } from '../Forms/Button'
 import React from 'react'
 import { NextStepText } from '../../utils/api/definitions/types'
-import { CustomCollapse } from './CustomCollapse'
+import { Router, useRouter } from 'next/router'
+import { useTranslation } from '../Hooks'
+import { WebTranslations } from '../../i18n/web'
+import { BenefitKey } from '../../utils/api/definitions/enums'
 
 const AA_BUTTON_CLICK_ATTRIBUTE =
   'ESDC-EDSC:Canadian OAS Benefits Est. Result card link click'
@@ -11,6 +14,7 @@ export const BenefitCard: React.VFC<{
   benefitName: string
   isEligible: boolean
   future: boolean
+  liveInCanada: boolean
   eligibleText: string
   collapsedDetails: any
   children: React.ReactNode
@@ -27,6 +31,7 @@ export const BenefitCard: React.VFC<{
   benefitName,
   isEligible,
   future,
+  liveInCanada,
   eligibleText,
   collapsedDetails,
   children,
@@ -37,61 +42,43 @@ export const BenefitCard: React.VFC<{
   const eligibleFlag: JSX.Element = (
     <span
       data-cy="eligibility-flag"
-      className={`px-2 py-1 ml-2 border-left border-l-4 font-semibold text-[15px] ${
-        isEligible
-          ? future
-            ? 'border-[#269ABC] bg-[#D7FAFF]'
-            : ' border-success bg-[#D8EECA] '
+      className={` px-2 py-1 ml-2 h-7 flex items-center justify-center border-left border-l-4 font-semibold text-[15px] ${
+        benefitKey !== BenefitKey.oas && liveInCanada
+          ? 'border-[#6e6e6e] bg-[#EAEBED] '
+          : isEligible || future
+          ? ' border-success bg-[#D8EECA] '
           : ' border-[#EE7100] bg-[#F9F4D4] '
       }`}
     >
       {eligibleText}
     </span>
   )
 
+  const router = useRouter()
+  const tsln = useTranslation<WebTranslations>()
+
   return (
     <div
       className="my-6 py-6 px-8 border border-[#6F6F6F] rounded"
       data-cy={benefitKey}
     >
-      <div className="ss:inline block">
-        <h2
+      <div className="flex h-auto w-full justify-between items-center mb-2">
+        <h3
           data-cy="benefit-title"
           id={benefitKey}
-          className="ss:inline block align-sub h2"
+          className="ss:inline block align-sub h3 mb-0"
         >
           {benefitName}
-        </h2>
+        </h3>
         {eligibleFlag}
       </div>
 
       <div data-cy="benefit-detail" className={`py-1`}>
         {children}
       </div>
-      {collapsedDetails &&
-        collapsedDetails.map((detail, index) => (
-          <CustomCollapse
-            datacy={`collapse-${benefitKey}-${index}`}
-            key={`collapse-${benefitName}-${index}`}
-            id={`collapse-${benefitName}-${index}`}
-            title={detail.heading}
-          >
-            <p
-              className="leading-[26px]"
-              dangerouslySetInnerHTML={{ __html: detail.text }}
-            />
-          </CustomCollapse>
-        ))}
 
       {nextStepText.nextStepTitle && (
         <div>
-          <p
-            data-cy="next-step-title"
-            className="mb-2 mt-6
-            font-bold text-[24px]"
-          >
-            {nextStepText.nextStepTitle}
-          </p>
           <p
             data-cy="next-step-content"
             dangerouslySetInnerHTML={{ __html: nextStepText.nextStepContent }}
@@ -102,24 +89,25 @@ export const BenefitCard: React.VFC<{
       <div className="mt-4" data-cy="benefit-links">
         {links &&
           links.map(({ text, url, icon, alt, action }, index) => (
-            <div key={index} className="flex items-center py-4 text-content">
-              <div>
-                <Image src={`/${icon}.png`} alt={alt} width="40" height="40" />
-              </div>
+            <div key={index} className="flex items-center  text-content">
               <div className="pl-1 w-full block">
                 <span
                   className="ds-font-body ds-text-lg ds-leading-22px ds-font-medium ds-text-multi-neutrals-grey90a ds-mb-4"
                   data-gc-analytics-customclick={`${AA_BUTTON_CLICK_ATTRIBUTE}:${action}`}
                 >
-                  <a
-                    id={`${benefitKey}Link${index}`}
+                  <Button
+                    style={icon == 'info' ? 'secondary' : 'primary'}
+                    custom="ds-my-3"
+                    type="button"
+                    text={text}
+                    imgHref={
+                      icon == 'info'
+                        ? `/openNewTab.svg`
+                        : `/openNewTabWhite.svg`
+                    }
+                    alt={tsln.openNewTab}
                     href={url}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="align-top"
-                  >
-                    {text}
-                  </a>
+                  />
                 </span>
               </div>
             </div>

components/ResultsPage/BenefitCards.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { getTranslations } from '../../i18n/api'
 import { WebTranslations } from '../../i18n/web'
-import { ResultKey, BenefitKey } from '../../utils/api/definitions/enums'
+import {
+  ResultKey,
+  BenefitKey,
+  ResultReason,
+} from '../../utils/api/definitions/enums'
 import { BenefitResult, NextStepText } from '../../utils/api/definitions/types'
 import { useTranslation } from '../Hooks'
 import { BenefitCard } from './BenefitCard'
@@ -24,10 +28,16 @@ export const BenefitCards: React.VFC<{
   results: BenefitResult[]
   futureClientResults: any
   partnerResults: BenefitResult[]
-}> = ({ inputAge, results, futureClientResults, partnerResults }) => {
+  liveInCanada?: boolean
+}> = ({
+  inputAge,
+  results,
+  futureClientResults,
+  partnerResults,
+  liveInCanada,
+}) => {
   const tsln = useTranslation<WebTranslations>()
   const apiTsln = getTranslations(tsln._language)
-
   const receivingOAS: boolean = results[0]?.cardDetail?.meta?.receiveOAS
 
   /**
@@ -109,20 +119,43 @@ export const BenefitCards: React.VFC<{
 
     // get... code below was moved to another file to make it a bit cleaner
     if (benefitKey === BenefitKey.gis) {
-      getGisNextSteps(result, receivingOAS, nextStepText, apiTsln, tsln)
+      getGisNextSteps(
+        result,
+        receivingOAS,
+        liveInCanada,
+        nextStepText,
+        apiTsln,
+        tsln
+      )
     } else if (benefitKey === BenefitKey.oas) {
       getOasNextSteps(
         result,
         inputAge,
         receivingOAS,
+        liveInCanada,
         nextStepText,
         apiTsln,
         tsln
       )
     } else if (benefitKey === BenefitKey.alw) {
-      getAlwNextSteps(result, inputAge, nextStepText, apiTsln, tsln)
+      getAlwNextSteps(
+        result,
+        partnerResults,
+        inputAge,
+        liveInCanada,
+        nextStepText,
+        apiTsln,
+        tsln
+      )
     } else if (benefitKey === BenefitKey.alws) {
-      getAlwsNextSteps(result, inputAge, nextStepText, apiTsln, tsln)
+      getAlwsNextSteps(
+        result,
+        inputAge,
+        liveInCanada,
+        nextStepText,
+        apiTsln,
+        tsln
+      )
     }
 
     nextStepText.nextStepContent = replaceTextVariables(
@@ -164,11 +197,13 @@ export const BenefitCards: React.VFC<{
       result.eligibility.result === ResultKey.ELIGIBLE ||
       result.eligibility.result === ResultKey.INCOME_DEPENDENT
 
-    const eligibleText = eligibility
-      ? future
-        ? apiTsln.result.willBeEligible
-        : apiTsln.result.eligible
-      : apiTsln.result.ineligible
+    const eligibleText =
+      result.benefitKey !== BenefitKey.oas &&
+      result.eligibility.reason === ResultReason.LIVING_COUNTRY
+        ? apiTsln.result.almostEligible
+        : eligibility
+        ? apiTsln.result.eligible
+        : apiTsln.result.ineligible
 
     const nextStepText = getNextStepText(result.benefitKey, result)
 
@@ -181,6 +216,9 @@ export const BenefitCards: React.VFC<{
           benefitName={titleText}
           isEligible={eligibility}
           future={future}
+          liveInCanada={
+            result.eligibility.reason === ResultReason.LIVING_COUNTRY
+          }
           eligibleText={eligibleText}
           nextStepText={nextStepText}
           collapsedDetails={collapsedDetails}
@@ -199,8 +237,8 @@ export const BenefitCards: React.VFC<{
               __html: result.cardDetail.mainText,
             }}
           />
-          <div>{OASdeferralTable}</div>
-          <div>{oasApply(result.benefitKey, result)}</div>
+          {/* <div>{OASdeferralTable}</div> */}
+          {/* <div>{oasApply(result.benefitKey, result)}</div> */}
         </BenefitCard>
       </div>
     )

components/ResultsPage/CTA.tsx

@@ -33,9 +33,9 @@ export function CTA({
           </div>
         </div>
         <div className="ds-pt-0 ds-pl-5">
-          <h3 className={`ds-heading2 ds-text-multi-neutrals-grey100`}>
+          <h2 className={`ds-heading2 ds-text-multi-neutrals-grey100`}>
             {heading}
-          </h3>
+          </h2>
           <p className="ds-body">{body}</p>
           <Button
             style="primary"

components/ResultsPage/CustomCollapse.tsx

@@ -4,20 +4,20 @@ export const CustomCollapse = (props) => {
     <details
       key={id}
       id={id}
-      className="my-6 text-h6 border-none"
+      className="my-6 text-h6 bg-white border group"
       data-testid={`${id}-${props.dataTestId}`}
       data-cy={datacy}
     >
       <summary
         key={`summary-${id}`}
-        className="border-none pl-0 text-multi-blue-blue70b mb-[15px] cursor-pointer select-none"
+        className="border-none pl-0 ds-text-multi-blue-blue70b p-3 ds-cursor-pointer ds-select-none pl-4"
       >
         <span
-          className="ml-[15px] underline"
+          className="ml-[5px] group-open:underline"
           dangerouslySetInnerHTML={{ __html: title }}
         />
       </summary>
-      <div className="border-none">{children}</div>
+      <div className="border p-4">{children}</div>
     </details>
   )
 }