STL-2729 | Update start page (#1007)

* STL-2729 | Update start page * STL-2729 | Remove accordion and CTA to grundsteuer on landing page * STL-2729 | Update frontend test
digitalservicebund · Aug 15, 2022 · b8ac510 · b8ac510
1 parent 99734f8
commit b8ac510
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 66 deletions.
diff --git a/webapp/client/cypress/integration/landingPage.spec.js b/webapp/client/cypress/integration/landingPage.spec.js
@@ -1,10 +1,22 @@
 describe("Landing page", () => {
-  it("Clicking button to eligibility check", () => {
+  it("Clicking 1st box", () => {
     cy.visit("/");
-    // Clicking button
-    cy.get("a").contains("Jetzt prüfen").click();
+    // Clicking 1st box
+    cy.get("h2").contains("Ich bin neu hier").parent().click();
 
-    // Should redirect to first step of eligibility steps
-    cy.url().should("include", "/eligibility/step/tax_year");
+    // Should redirect to retirement page
+    cy.url().should("include", "/ende");
+  });
+
+  it("Clicking 2nd box", () => {
+    cy.visit("/");
+    // Clicking 1st box
+    cy.get("h2")
+      .contains("Ich habe bereits einen Freischaltcode")
+      .parent()
+      .click();
+
+    // Should redirect to retirement page
+    cy.url().should("include", "/unlock_code_activation/step/data_input");
   });
 });
diff --git a/webapp/client/src/components/CardsComponent.js b/webapp/client/src/components/CardsComponent.js
@@ -29,8 +29,8 @@ const Card = styled.a`
   height: 100%;
   text-decoration: none;
   color: black;
-  width: 33.33%;
-  min-height: 450px;
+  width: 50%;
+  min-height: 227px;
   position: relative;
 
   @media (max-width: 767px) {

diff --git a/webapp/client/src/lib/translations.js b/webapp/client/src/lib/translations.js
@@ -1021,25 +1021,15 @@ const translations = {
       listItem1: "mit Schritt-für-Schritt-Anleitung",
       listItem2: "kostenlos und ohne ELSTER-Konto",
       listItem3: "schnell und unkompliziert",
-      eligibilityTest:
-        "Möchten Sie wissen, ob Sie den Steuerlotsen nutzen können?",
-      checkUseButton: "Jetzt prüfen",
       plausibleGoal: "Nutzung prüfen",
     },
     Cards: {
       cardOne: {
-        header: "Herausfinden, ob Sie den Steuerlotsen nutzen können",
-        text: "Prüfen Sie durch die Beantwortung weniger Fragen, ob Sie die Voraussetzungen für die Nutzung des Steuerlotsen erfüllen.",
-        url: "/eligibility/step/tax_year?link_overview=False",
+        header: "Ich bin neu hier",
+        url: "/ende#retirementSection-1",
       },
       cardTwo: {
-        header: "Registrieren und Freischaltcode beantragen",
-        text: "Mit Ihrer Registrierung beantragen Sie einen Freischaltcode. Dieser wird Ihnen nach erfolgreicher Beantragung von Ihrer Finanzverwaltung zugeschickt.",
-        url: "/unlock_code_request/step/data_input?link_overview=False",
-      },
-      cardThree: {
-        header: "Mit Freischaltcode anmelden und Steuererklärung machen",
-        text: "Sie sind vorbereitet und haben Ihren Freischaltcode erhalten? Dann können Sie mit Ihrer Steuererklärung 2021 beginnen.",
+        header: "Ich habe bereits einen Freischaltcode",
         url: "/unlock_code_activation/step/data_input?link_overview=False",
       },
     },

diff --git a/webapp/client/src/pages/LandingPage.js b/webapp/client/src/pages/LandingPage.js
@@ -2,11 +2,7 @@ import React from "react";
 import { t } from "i18next";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import AccordionComponent from "../components/AccordionComponent";
-import faqAnchorList from "../lib/faqAnchors";
-import ButtonAnchor from "../components/ButtonAnchor";
 import CardsComponent from "../components/CardsComponent";
-import InfoBoxGrundsteuer from "../components/InfoBoxGrundsteuer";
 import CallToActionBox from "../components/CallToActionBox";
 
 const LandingPageHeroWrapper = styled.div`
@@ -80,37 +76,15 @@ const Figure = styled.div`
   }
 `;
 
-const AccordionWrapper = styled.div`
-  width: 60%;
-  margin: var(--spacing-11) auto;
-
-  & h2 {
-    margin-bottom: var(--spacing-03);
-    font-size: var(--text-3xl);
-  }
-
-  @media (max-width: 767px) {
-    width: 100%;
-    padding: 0 15px;
-  }
-`;
-
 const cardsInfo = [
   {
     header: t("LandingPage.Cards.cardOne.header"),
-    text: t("LandingPage.Cards.cardOne.text"),
     url: t("LandingPage.Cards.cardOne.url"),
   },
   {
     header: t("LandingPage.Cards.cardTwo.header"),
-    text: t("LandingPage.Cards.cardTwo.text"),
     url: t("LandingPage.Cards.cardTwo.url"),
   },
-  {
-    header: t("LandingPage.Cards.cardThree.header"),
-    text: t("LandingPage.Cards.cardThree.text"),
-    url: t("LandingPage.Cards.cardThree.url"),
-  },
 ];
 
 export default function LandingPage({ plausibleDomain }) {
@@ -125,15 +99,6 @@ export default function LandingPage({ plausibleDomain }) {
             <li>{t("LandingPage.Hero.listItem2")}</li>
             <li>{t("LandingPage.Hero.listItem3")}</li>
           </ul>
-          <p>{t("LandingPage.Hero.eligibilityTest")}</p>
-          <ButtonAnchor
-            url="/eligibility/step/first_input_step"
-            plausibleGoal={t("LandingPage.Hero.plausibleGoal")}
-            plausibleDomain={plausibleDomain}
-            marginVariant
-          >
-            {t("LandingPage.Hero.checkUseButton")}
-          </ButtonAnchor>
         </LandingPageHeroContentWrapper>
         <Figure>
           <picture>
@@ -153,13 +118,6 @@ export default function LandingPage({ plausibleDomain }) {
         </Figure>
       </LandingPageHeroWrapper>
       <CardsComponent cards={cardsInfo} />
-      <AccordionWrapper>
-        <AccordionComponent
-          title={t("LandingPage.Accordion.heading")}
-          items={faqAnchorList}
-          variant
-        />
-      </AccordionWrapper>
       <CallToActionBox
         colorVariant
         multipleButtons
@@ -175,7 +133,6 @@ export default function LandingPage({ plausibleDomain }) {
         secondButtonPlausibleGoal="Zum Hilfebereich"
         secondButtonPlausibleProps="Start / Zum Hilfebereich"
       />
-      <InfoBoxGrundsteuer />
     </div>
   );
 }

diff --git a/webapp/client/src/pages/LandingPage.test.js b/webapp/client/src/pages/LandingPage.test.js
@@ -32,13 +32,13 @@ describe("Landing Page", () => {
     const text = screen.getByText(
       "Mit dem Steuerlotsen können Sie Ihre Steuererklärung für das Steuerjahr 2021 einfach und ohne besonderes Vorwissen online machen."
     );
-    const text2 = screen.getByText(
+    const text2 = screen.queryByText(
       "Möchten Sie wissen, ob Sie den Steuerlotsen nutzen können?"
     );
 
     expect(headline).toBeInTheDocument();
     expect(text).toBeInTheDocument();
-    expect(text2).toBeInTheDocument();
+    expect(text2).not.toBeInTheDocument();
   });
 
   it("should render the Cards component", () => {
@@ -50,6 +50,6 @@ describe("Landing Page", () => {
   it("should render the Accordion component", () => {
     setup();
 
-    expect(screen.getByText("Accordion Component")).toBeInTheDocument();
+    expect(screen.queryByText("Accordion Component")).not.toBeInTheDocument();
   });
 });
diff --git a/webapp/client/src/pages/RetirementPage.js b/webapp/client/src/pages/RetirementPage.js
@@ -45,6 +45,7 @@ export default function RetirementPage({ plausibleDomain }) {
           title={t("retirementPage.accordion.heading")}
           items={accordionRetirementPage}
           variant="marginTop"
+          id="retirementSection"
         />
       </ContentWrapper>