New results

components/Forms/Button.tsx

@@ -6,13 +6,15 @@ 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'
@@ -31,13 +33,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]
 
@@ -46,7 +50,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>
   ) : (
@@ -59,6 +63,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,9 @@
-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'
 
 const AA_BUTTON_CLICK_ATTRIBUTE =
   'ESDC-EDSC:Canadian OAS Benefits Est. Result card link click'
@@ -38,27 +40,28 @@ export const BenefitCard: React.VFC<{
     <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] '
+        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">
+      <div className="flex h-auto w-full justify-between items-center mb-2">
         <h2
           data-cy="benefit-title"
           id={benefitKey}
-          className="ss:inline block align-sub h2"
+          className="ss:inline block align-sub h2 mb-0"
         >
           {benefitName}
         </h2>
@@ -68,30 +71,9 @@ export const BenefitCard: React.VFC<{
       <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 +84,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

@@ -120,7 +120,14 @@ export const BenefitCards: React.VFC<{
         tsln
       )
     } else if (benefitKey === BenefitKey.alw) {
-      getAlwNextSteps(result, inputAge, nextStepText, apiTsln, tsln)
+      getAlwNextSteps(
+        result,
+        partnerResults,
+        inputAge,
+        nextStepText,
+        apiTsln,
+        tsln
+      )
     } else if (benefitKey === BenefitKey.alws) {
       getAlwsNextSteps(result, inputAge, nextStepText, apiTsln, tsln)
     }
@@ -165,9 +172,7 @@ export const BenefitCards: React.VFC<{
       result.eligibility.result === ResultKey.INCOME_DEPENDENT
 
     const eligibleText = eligibility
-      ? future
-        ? apiTsln.result.willBeEligible
-        : apiTsln.result.eligible
+      ? apiTsln.result.eligible
       : apiTsln.result.ineligible
 
     const nextStepText = getNextStepText(result.benefitKey, result)
@@ -199,8 +204,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/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"
       data-testid={`${id}-${props.dataTestId}`}
       data-cy={datacy}
     >
       <summary
         key={`summary-${id}`}
-        className="border-none pl-0 ds-text-multi-blue-blue70b mb-[15px] ds-cursor-pointer ds-select-none"
+        className="border-none pl-0 ds-text-multi-blue-blue70b p-3 ds-cursor-pointer ds-select-none"
       >
         <span
-          className="ml-[15px] ds-underline"
+          className="ml-[5px] ds-underline"
           dangerouslySetInnerHTML={{ __html: title }}
         />
       </summary>
-      <div className="border-none">{children}</div>
+      <div className="border p-4">{children}</div>
     </details>
   )
 }

components/ResultsPage/EstimatedTotalItem.tsx

@@ -1,20 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { numberToStringCurrency } from '../../i18n/api'
 import { WebTranslations } from '../../i18n/web'
 import { Language } from '../../utils/api/definitions/enums'
 import { BenefitResult } from '../../utils/api/definitions/types'
 import { useTranslation } from '../Hooks'
+import { Modal } from './Modal'
+import Image from 'next/image'
 
 export const EstimatedTotalItem: React.VFC<{
   heading: string
   result: BenefitResult
   displayAmount: boolean
-}> = ({ heading, result, displayAmount }) => {
+  partner: boolean
+  maritalStatus
+}> = ({ heading, result, displayAmount, partner, maritalStatus }) => {
   const tsln = useTranslation<WebTranslations>()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [modalPosition, setModalPosition] = useState({ x: 0, y: 0 })
   /*
     returns benefit name with from/de and proper article. ... french nuances.
   */
 
+  const openModal = (e) => {
+    setModalPosition({ x: e.clientX, y: e.clientY })
+    setModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setModalOpen(false)
+  }
+
   function displayBenefitName(
     benefitName: string,
     result: number,
@@ -39,12 +54,31 @@ export const EstimatedTotalItem: React.VFC<{
   if (!result.entitlement) return null
 
   return (
-    <li>
-      <strong>
-        {displayAmount &&
-          numberToStringCurrency(result.entitlement.result, tsln._language)}
-      </strong>
+    <li className="align-middle">
+      {displayAmount &&
+        numberToStringCurrency(result.entitlement.result, tsln._language)}
       {displayBenefitName(heading, result.entitlement.result, displayAmount)}
+      {result.entitlement.result == 0 && (
+        <>
+          <span className="align-middle ml-2">
+            <Image
+              className="cursor-pointer"
+              src="/moreInfo.png"
+              alt="info"
+              width="25"
+              height="25"
+              onClick={openModal}
+            />
+            <Modal
+              isOpen={modalOpen}
+              onClose={closeModal}
+              position={modalPosition}
+              partner={partner}
+              maritalStatus={maritalStatus}
+            />
+          </span>
+        </>
+      )}
     </li>
   )
 }