Merge pull request #1471 from GSA/1367-zero-benefits-view

1367 zero benefits view

benefit-finder/cypress/e2e/storybook/axe-a11y.cy.js

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 
 import * as utils from '../../support/utils.js'
+import * as BENEFITS_ELIBILITY_DATA from '../../fixtures/benefits-eligibility.json'
 import * as EN_LOCALE_DATA from '../../../../benefit-finder/src/shared/locales/en/en.json'
 import * as EN_DOLO_MOCK_DATA from '../../../../benefit-finder/src/shared/api/mock-data/current.json'
 import { pageObjects } from '../../support/pageObjects'
@@ -107,16 +108,27 @@ describe(`Validate code passes axe scanning`, () => {
   })
 
   it('Has no detectable a11y violations on see benefits', () => {
-    pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click()
-    utils.dataInputs({ dob, relation, status })
-    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
-    utils.dataInputs({ dod })
-    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
-    pageObjects
-      .button()
-      .contains(EN_LOCALE_DATA.reviewSelectionModal.buttonGroup[1].value)
-      .click()
-    runA11y()
+    const selectedData = BENEFITS_ELIBILITY_DATA.scenario_1_covid.en.param
+    const scenario = utils.encodeURIFromObject(selectedData)
+    delete selectedData.shared // We don't want to include the "shared" param
+
+    cy.visit(`${utils.storybookUri}${scenario}`)
+    cy.injectAxe() // we inject axe again because of the reload -> visit
+    // get a node list of all accordions
+    // get the heading of the first in the list
+    cy.get(`[data-analytics="bf-usa-accordion"]`).then(accordionItems => {
+      pageObjects
+        .benefitResultsView()
+        .invoke('attr', 'data-analytics')
+        .should('eq', 'bf-result-view')
+
+      pageObjects
+        .accordion(
+          `${accordionItems[0].getAttribute('data-analytics-content')}`
+        )
+        .click()
+      runA11y()
+    })
   })
 
   it('Has no detectable a11y violations on see benefits you did not qualify for', () => {
@@ -131,8 +143,17 @@ describe(`Validate code passes axe scanning`, () => {
       .click()
     pageObjects
       .button()
-      .contains(EN_LOCALE_DATA.resultsView.notEligibleResults.cta)
+      .contains(EN_LOCALE_DATA.resultsView.zeroBenefits.cta)
       .click()
-    runA11y()
+    // get a node list of all accordions
+    // get the heading of the first in the list
+    cy.get(`[data-analytics="bf-usa-accordion"]`).then(accordionItems => {
+      pageObjects
+        .accordion(
+          `${accordionItems[0].getAttribute('data-analytics-content')}`
+        )
+        .click()
+      runA11y()
+    })
   })
 })

benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap

@@ -348,7 +348,7 @@ exports[`loads window query scenario 1 1`] = `
               >
                 <h4
                   aria-level="4"
-                  class="bf-usa-summary-box__heading usa-summary-box__heading font-family-sans"
+                  class=""
                   id="bf-summary-box-key-information"
                   role="heading"
                 >
@@ -6728,7 +6728,7 @@ exports[`loads window query scenario 1 1`] = `
             >
               <h3
                 aria-level="3"
-                class="bf-result-view-unmet-heading font-family-sans"
+                class=""
                 id=""
                 role="heading"
               >
@@ -7104,7 +7104,7 @@ exports[`loads window query scenario 2 1`] = `
               >
                 <h4
                   aria-level="4"
-                  class="bf-usa-summary-box__heading usa-summary-box__heading font-family-sans"
+                  class=""
                   id="bf-summary-box-key-information"
                   role="heading"
                 >
@@ -13496,7 +13496,7 @@ exports[`loads window query scenario 2 1`] = `
             >
               <h3
                 aria-level="3"
-                class="bf-result-view-unmet-heading font-family-sans"
+                class=""
                 id=""
                 role="heading"
               >

benefit-finder/src/shared/components/ResultsView/index.jsx

@@ -16,6 +16,8 @@ import {
 import { createMarkup } from '../../utils'
 import './_index.scss'
 
+// Results View is a single view with three states, eligible, not eligible, and zero benefits
+
 /**
  * a functional component that renders a view of the form benefit state values
  * @component
@@ -37,6 +39,7 @@ const ResultsView = ({
     stepBackLink,
     notEligible,
     eligible,
+    zeroBenefits,
     notEligibleResults,
     resultsRelativeBenefits,
     shareResults,
@@ -87,6 +90,8 @@ const ResultsView = ({
     resetElement.current.focus()
   }
 
+  const zeroBenefitsResult = eligibilityCount.eligible === 0
+
   useEffect(() => {
     window.scrollTo(0, 0)
     setEligibilityCount({
@@ -104,22 +109,27 @@ const ResultsView = ({
 
   // handle dataLayer
   useEffect(() => {
-    window.dataLayer &&
+    eligibilityCount.notEligible >= 0 &&
+      window.dataLayer &&
       window.dataLayer.push({
         event: 'bf_page_change',
         bfData: {
           pageView: 'bf-result-view',
           viewTitle:
             notEligibleView === false
-              ? eligible.chevron.heading
-              : notEligible.chevron.heading,
+              ? (zeroBenefitsResult && zeroBenefits.chevron.heading) ||
+                eligible.chevron.heading
+              : (zeroBenefitsResult && zeroBenefits.chevron.heading) ||
+                notEligible.chevron.heading,
           viewState:
             notEligibleView === true
-              ? 'bf-not-eligible-view'
-              : 'bf-eligible-view',
+              ? (zeroBenefitsResult && 'bf-not-eligible-view-zero-benefits') ||
+                'bf-not-eligible-view'
+              : (zeroBenefitsResult && 'bf-eligible-view-zero-benefits') ||
+                'bf-eligible-view',
         },
       })
-  }, [notEligibleView])
+  }, [notEligibleView, zeroBenefitsResult, eligibilityCount])
 
   useEffect(() => {
     eligibilityCount.notEligible >= 0 &&
@@ -145,13 +155,17 @@ const ResultsView = ({
       <Chevron
         heading={
           notEligibleView === false
-            ? eligible.chevron.heading
-            : notEligible.chevron.heading
+            ? (zeroBenefitsResult && zeroBenefits.chevron.heading) ||
+              eligible.chevron.heading
+            : (zeroBenefitsResult && zeroBenefits.chevron.heading) ||
+              notEligible.chevron.heading
         }
         description={
           notEligibleView === false
-            ? eligible.chevron.description
-            : notEligible.chevron.description
+            ? (zeroBenefitsResult && zeroBenefits.chevron.description) ||
+              eligible.chevron.description
+            : (zeroBenefitsResult && zeroBenefits.chevron.description) ||
+              notEligible.chevron.description
         }
       />
       <div className="bf-grid-container grid-container">
@@ -173,22 +187,42 @@ const ResultsView = ({
             </Button>
           )}
           <Heading className="bf-result-view-heading" headingLevel={2}>
-            {notEligibleView ? notEligible.heading : eligible.heading}
+            {notEligibleView
+              ? (zeroBenefitsResult && zeroBenefits.heading) ||
+                notEligible.heading
+              : (zeroBenefitsResult && zeroBenefits.heading) ||
+                eligible.heading}
           </Heading>
           <Heading
             className="bf-result-view-description"
             headingLevel={3}
             dangerouslySetInnerHTML={
               notEligibleView
-                ? createMarkup(notEligible.description)
-                : createMarkup(eligible.description)
+                ? createMarkup(
+                    (zeroBenefitsResult && zeroBenefits.description) ||
+                      notEligible.description
+                  )
+                : createMarkup(
+                    (zeroBenefitsResult && zeroBenefits.description) ||
+                      eligible.description
+                  )
             }
           />
-          <Summary
-            heading={summaryBox.heading}
-            listItems={summaryBox.list}
-            cta={summaryBox.cta}
-          />
+          {zeroBenefitsResult === false && (
+            <Summary
+              heading={summaryBox.heading}
+              listItems={summaryBox.list}
+              cta={summaryBox.cta}
+            />
+          )}
+
+          {zeroBenefitsResult && !notEligibleView && (
+            <div className="bf-result-view-zero-benefits">
+              <Button onClick={handleViewToggle} secondary>
+                {zeroBenefits?.cta}
+              </Button>
+            </div>
+          )}
           {/* map all the benefits into cards */}
           <div className="bf-result-view-benefits">
             <BenefitAccordionGroup
@@ -201,11 +235,14 @@ const ResultsView = ({
               }
               entryKey={'benefit'}
               notEligibleView={notEligibleView}
-              expandAll
+              expandAll={
+                zeroBenefitsResult === false ||
+                (zeroBenefitsResult && notEligibleView)
+              }
               ui={ui}
             />
           </div>
-          {notEligibleView === false && (
+          {notEligibleView === false && zeroBenefitsResult === false && (
             <div className="bf-result-view-unmet">
               <Heading
                 className="bf-result-view-unmet-heading"

benefit-finder/src/shared/locales/en/en.json

@@ -105,6 +105,15 @@
       "heading": "Results",
       "description": "<strong>Based on your answers you are not eligible for these benefits.</strong>You may become eligible if you enter additional information or your situation changes."
     },
+    "zeroBenefits": {
+      "chevron": {
+        "heading": "You are likely not eligible for benefits",
+        "description": "<div><p>If you  reached these results by mistake, please go back to review your answers.</p></div>"
+      },
+      "heading": "No eligible results",
+      "description": "Based on your answers you are likely not eligible for benefits. You may become eligible if you enter more information or your situation changes.",
+      "cta": "See all benefits"
+    },
     "stepBackLink": "Back",
     "eligibleResults": {
       "heading": "Results",

benefit-finder/vite.config.mjs

@@ -44,6 +44,9 @@ const server = test ? testServer : devServer
 export default defineConfig({
   base: './',
   plugins: [react(), eslint(), copy(copyConfig)],
+  optimizeDeps: {
+    exclude: ['@storybook/blocks'],
+  },
   css: {
     postcss: poscssConfig,
   },