PXBF-1975-more-info-return-to-form: include back to start cta with mo…

…re information needed criteria list
GSA · Dec 9, 2024 · d5882d2 · d5882d2
1 parent 14b3f8a
commit d5882d2
Show file tree

Hide file tree

Showing 6 changed files with 339 additions and 7 deletions.
diff --git a/benefit-finder/src/Routes/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/Routes/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap
diff --git a/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx b/benefit-finder/src/Routes/ResultsView/components/Results/index.jsx
@@ -1,4 +1,7 @@
+import { useContext } from 'react'
 import PropTypes from 'prop-types'
+import { RouteContext } from '@/App'
+import { useNavigate } from 'react-router-dom'
 import {
   BenefitAccordionGroup,
   Button,
@@ -29,6 +32,8 @@ const Results = ({
   relevantBenefits,
   ui,
 }) => {
+  const ROUTES = useContext(RouteContext)
+  const navigate = useNavigate()
   // Results view components
   const ResultsBannerBlock = ({ notEligibleView, zeroBenefitsResult, ui }) => {
     const { eligible, notEligible, zeroBenefits } = ui
@@ -140,12 +145,7 @@ const Results = ({
         >
           {resultsRelativeBenefits?.heading}
         </Heading>
-        {relevantBenefits && (
-          <RelativeBenefitList
-            data={relevantBenefits}
-            carrotType="carrot"
-          ></RelativeBenefitList>
-        )}
+        {relevantBenefits && <RelativeBenefitList data={relevantBenefits} />}
       </div>
     )
   }
@@ -176,6 +176,9 @@ const Results = ({
           }
           isExpandAll={isExpandAll}
           setExpandAll={setExpandAll}
+          returnToForm={() =>
+            navigate(`/${ROUTES.indexPath}/${ROUTES.formPaths[0]}`)
+          }
           ui={ui}
         />
       </div>

diff --git a/...r/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap b/...r/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap
@@ -133,6 +133,14 @@ exports[`BenefitAccordionGroup > renders a match to the previous snapshot 1`] =
                 You paid for funeral or burial expenses and were not reimbursed
               </li>
             </ul>
+            <button
+              class="bf-step-back-button bf-usa-button usa-button bf-usa-button--unstyled usa-button--unstyled"
+              data-test="button"
+              data-testid="bf-step-back-button"
+              type="button"
+            >
+              Go back to start
+            </button>
           </div>
           <div
             class="bf-usa-accordion-group-cta-wrapper"

diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx
@@ -5,6 +5,7 @@ import {
   Button,
   Heading,
   KeyElegibilityCrieriaList,
+  StepBackButton,
   ObfuscatedLink,
 } from '@components'
 import './_index.scss'
@@ -18,6 +19,7 @@ import './_index.scss'
  * @param {bool} isExpandAll - determines if all the accordions in the group are expanded
  * @param {function} setExpandAll - inherited useState function
  * @param {function} notEligibleView - inherited bolean state
+ * @param {object} returnToForm - inherited object for more info cta
  * @param {object} ui - inherited ui content
  * @return {html} returns html
  */
@@ -28,6 +30,7 @@ const BenefitAccordionGroup = ({
   isExpandAll,
   setExpandAll,
   notEligibleView,
+  returnToForm,
   ui,
 }) => {
   const { benefitAccordion, benefitAccordionGroup } = ui
@@ -37,6 +40,7 @@ const BenefitAccordionGroup = ({
     visitLabel,
     unmetLabel,
     sourceIsEnglish,
+    backcta,
   } = benefitAccordion
   const { closedState, openState } = benefitAccordionGroup
   const { benefitLink, openAllBenefitAccordions } =
@@ -151,6 +155,9 @@ const BenefitAccordionGroup = ({
             )
           })}
         </ul>
+        <StepBackButton onClick={() => returnToForm()}>
+          {backcta?.link}
+        </StepBackButton>
       </div>
     )
   }
@@ -236,7 +243,9 @@ const BenefitAccordionGroup = ({
                 <NotEligibleList items={notEligibleBenefits} />
               )}
               {moreInformationNeeded.length > 0 && (
-                <MoreInfoList items={moreInformationNeeded} />
+                <>
+                  <MoreInfoList items={moreInformationNeeded} />
+                </>
               )}
               <div className="bf-usa-accordion-group-cta-wrapper">
                 <ObfuscatedLink

diff --git a/benefit-finder/src/shared/locales/en/en.json b/benefit-finder/src/shared/locales/en/en.json
@@ -139,6 +139,10 @@
         "More information needed",
         "Not eligible"
       ],
+      "backcta": {
+        "text": "",
+        "link": "Go back to start"
+      },
       "agencyPrefix": "By",
       "benefitSummary": "Key eligibility criteria",
       "benefitSummaryPrefix": "Met ",

diff --git a/benefit-finder/src/shared/locales/es/es.json b/benefit-finder/src/shared/locales/es/es.json
@@ -139,6 +139,10 @@
         "Más información requerida",
         "No elegible"
       ],
+      "backcta": {
+        "text": "",
+        "link": "Volver al inicio"
+      },
       "agencyPrefix": "",
       "benefitSummary": "Criterios de elegibilidad",
       "benefitSummaryPrefix": "Cumple ",