Iterate the pre-check to include an interoperability check

.github/workflows/test-build-deploy.yml

@@ -26,7 +26,6 @@ jobs:
 
   build-and-push-image:
     needs: [check-and-test-shared]
-    if: ${{ github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-latest
     permissions:
       contents: read

packages/dito/app/components/Accordion.tsx

@@ -0,0 +1,23 @@
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
+
+export default function Accordion({
+  items,
+  boldAppearance,
+}: {
+  items: AccordionItemProps[];
+  boldAppearance?: boolean;
+}) {
+  return (
+    <div className="bg-white border-b-2 border-b-blue-800">
+      {items.map((item, index) => (
+        <AccordionItem
+          key={index}
+          headline={item.headline}
+          content={item.content}
+          id={item.id}
+          boldAppearance={boldAppearance}
+        />
+      ))}
+    </div>
+  );
+}

packages/dito/app/components/AccordionItem.tsx

@@ -0,0 +1,52 @@
+import RichText from "@digitalcheck/shared/components/RichText.tsx";
+import { Add, Remove } from "@digitalservicebund/icons";
+import classNames from "classnames";
+import { ReactNode, useState } from "react";
+
+export type AccordionItemProps = {
+  headline: string;
+  content?: string | ReactNode;
+  id?: string;
+  boldAppearance?: boolean;
+};
+
+export default function AccordionItem(props: AccordionItemProps) {
+  const { headline, content, id, boldAppearance } = props;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <details
+      onToggle={() => setIsExpanded(!isExpanded)}
+      className="border-t-2 border-t-blue-800 group"
+      id={id}
+    >
+      <summary
+        role="button"
+        aria-expanded={isExpanded}
+        className="accordion-summary w-full p-24 flex items-center justify-between hover:bg-blue-200 focus:bg-blue-200 focus:outline focus:outline-4 focus:outline-blue-800 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 cursor-pointer group-open:bg-blue-200"
+      >
+        <div
+          className={classNames(
+            "pr-10 font-bold text-left text-16 leading-22 md:text-18 md:leading-24",
+            { "text-blue-800": boldAppearance },
+          )}
+        >
+          {headline}
+        </div>
+        <Add className="w-24 h-24 flex-shrink-0 fill-blue-800 group-open:hidden" />
+        <Remove className="w-24 h-24 flex-shrink-0 fill-blue-800 hidden group-open:block" />
+      </summary>
+      <div
+        className={classNames("p-24 pr-24", {
+          "pr-48 md:pb-64 md:pr-64 text-18": boldAppearance,
+        })}
+      >
+        {typeof content === "string" ? (
+          <RichText markdown={content} />
+        ) : (
+          content
+        )}
+      </div>
+    </details>
+  );
+}

packages/dito/app/components/LinkBar.tsx

@@ -6,18 +6,24 @@ const LinkBar = <T extends { url: string }>({
 }: {
   elements: T[];
   currentElement: T;
-}) => (
-  <div className="flex justify-center space-x-8 mt-20">
-    {elements.map((element) => (
-      <Link
-        key={element.url}
-        to={element.url}
-        className={`h-6 flex-1 transition-all duration-300 ${
-          element.url == currentElement.url ? "bg-blue-800" : "bg-blue-300"
-        }`}
-      />
-    ))}
-  </div>
-);
+}) => {
+  const currentIndex = elements.findIndex(
+    (element) => element.url === currentElement.url,
+  );
+
+  return (
+    <div className="flex justify-center space-x-8 mt-20">
+      {elements.map((element, index) => (
+        <Link
+          key={element.url}
+          to={element.url}
+          className={`h-6 flex-1 transition-all duration-300 ${
+            index <= currentIndex ? "bg-blue-800" : "bg-blue-300"
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
 
 export default LinkBar;

packages/dito/app/resources/constants.ts

@@ -0,0 +1 @@
+export const PRE_CHECK_START_BUTTON_ID = "preCheck-start-button";

packages/dito/app/resources/staticRoutes.ts

@@ -19,7 +19,7 @@ export const ROUTE_PRECHECK_STATIC_PDF: Route = {
 
 export const ROUTE_PRECHECK: Route = {
   url: "/vorpruefung",
-  title: "Vorprüfung",
+  title: "Vorprüfung: Digitalbezug einschätzen",
   parent: ROUTE_LANDING.url,
 };
 export const ROUTE_RESULT: Route = {

packages/dito/app/routes/vorpruefung.$questionId/route.tsx

@@ -103,6 +103,11 @@ export type TQuestion = {
   question: string;
   positiveResult: string;
   negativeResult: string;
+  resultHint?: {
+    positiveResult?: string;
+    negativeResult?: string;
+    unsureResult?: string;
+  };
   text?: string;
   url: string;
   prevLink: string;
@@ -115,6 +120,7 @@ export type TQuestion = {
     title: string;
     text: string;
   };
+  interoperability?: boolean;
 };
 
 export type PreCheckAnswerOption = {

packages/dito/app/routes/vorpruefung._index.tsx

@@ -2,10 +2,15 @@ import Background from "@digitalcheck/shared/components/Background";
 import Box from "@digitalcheck/shared/components/Box";
 import ButtonContainer from "@digitalcheck/shared/components/ButtonContainer";
 import Container from "@digitalcheck/shared/components/Container";
+import DetailsSummary from "@digitalcheck/shared/components/DetailsSummary.tsx";
+import Heading from "@digitalcheck/shared/components/Heading.tsx";
+import Image from "@digitalcheck/shared/components/Image.tsx";
 import InfoBox from "@digitalcheck/shared/components/InfoBox";
-import InlineNotice from "@digitalcheck/shared/components/InlineNotice";
+import RichText from "@digitalcheck/shared/components/RichText.tsx";
 import { MetaFunction } from "@remix-run/react";
+import Accordion from "components/Accordion.tsx";
 import SupportBanner from "components/SupportBanner";
+import { PRE_CHECK_START_BUTTON_ID } from "resources/constants";
 import { preCheck } from "resources/content";
 import { ROUTE_LANDING, ROUTE_PRECHECK } from "resources/staticRoutes";
 import prependMetaTitle from "utils/metaTitle";
@@ -35,10 +40,19 @@ export default function Index() {
           ></Box>
         </Container>
         <Container paddingTop="0">
+          <div className="ds-stack-16 mb-40">
+            {preCheck.start.hints.map((hint, index) => (
+              <DetailsSummary
+                key={index}
+                title={hint.title}
+                content={hint.text}
+              />
+            ))}
+          </div>
           <ButtonContainer
             buttons={[
               {
-                id: "preCheck-start-button",
+                id: PRE_CHECK_START_BUTTON_ID,
                 text: preCheck.start.buttonText,
                 href: preCheck.questions[0].url,
                 type: "submit",
@@ -53,14 +67,6 @@ export default function Index() {
           />
         </Container>
       </Background>
-      <Container additionalClassNames="max-sm:!p-0">
-        <InlineNotice
-          look="tips"
-          title={preCheck.start.info.title}
-          tagName="h2"
-          content={preCheck.start.info.text}
-        ></InlineNotice>
-      </Container>
       <Container>
         <InfoBox
           heading={{
@@ -70,6 +76,34 @@ export default function Index() {
           items={preCheck.start.summary.items}
         ></InfoBox>
       </Container>
+      <Container paddingTop="0">
+        <Background backgroundColor="blue">
+          <div className="px-64 py-40 flex gap-64 items-center max-sm:flex-col-reverse max-sm:px-16 max-sm:gap-48">
+            <div className="md:pl-32 ds-stack-8 gap-20 md:w-1/3">
+              <Image
+                url={preCheck.start.info.image.src}
+                alternativeText={preCheck.start.info.image.alt}
+              />
+            </div>
+            <div>
+              <Heading
+                tagName="h3"
+                look="ds-heading-03-reg"
+                text={preCheck.start.info.title}
+              />
+              <RichText markdown={preCheck.start.info.text} />
+            </div>
+          </div>
+        </Background>
+      </Container>
+      <Container>
+        <Heading
+          tagName="h2"
+          look="ds-heading-02-reg text-center mb-64 max-sm:mb-56"
+          text={preCheck.faq.title}
+        />
+        <Accordion items={preCheck.faq.items} />
+      </Container>
       <SupportBanner />
     </>
   );

packages/dito/app/routes/vorpruefung.ergebnis/ResultForm.tsx

@@ -1,5 +1,4 @@
 import ButtonContainer from "@digitalcheck/shared/components/ButtonContainer";
-import Container from "@digitalcheck/shared/components/Container";
 import DetailsSummary from "@digitalcheck/shared/components/DetailsSummary";
 import Heading from "@digitalcheck/shared/components/Heading";
 import Input from "@digitalcheck/shared/components/Input";
@@ -10,15 +9,12 @@ import React, { useState } from "react";
 import { preCheck } from "resources/content";
 import { PreCheckAnswers } from "routes/vorpruefung.$questionId/route";
 import getResultValidatorForAnswers from "routes/vorpruefung.ergebnis/resultValidation";
-import { useFeatureFlag } from "utils/featureFlags";
 
 export default function ResultForm({
   answers,
 }: Readonly<{
   answers: PreCheckAnswers;
 }>) {
-  const quickSendNkrFlag = useFeatureFlag("digitalcheck.quicksend-nkr");
-
   const form = useForm({
     validator: getResultValidatorForAnswers(answers),
     method: "post",
@@ -39,32 +35,13 @@ export default function ResultForm({
   const isPositive = !!Object.values(answers).find((a) => a === "yes");
 
   return (
-    <Container
-      backgroundColor="white"
-      additionalClassNames="rounded-lg"
-      overhangingBackground
-    >
+    <>
       <form {...form.getFormProps()}>
         <fieldset className="ds-stack-32">
           <legend>
-            {quickSendNkrFlag ? (
-              <Heading tagName="h2" text={preCheck.result.form.formLegend} />
-            ) : (
-              <Heading
-                tagName="h2"
-                text="Vorprüfung ergänzen und herunterladen"
-              />
-            )}
+            <Heading tagName="h2" text={preCheck.result.form.formLegend} />
           </legend>
-          {quickSendNkrFlag && (
-            <RichText
-              markdown={
-                isPositive
-                  ? preCheck.result.form.instructionsPositive
-                  : preCheck.result.form.instructionsNegative
-              }
-            />
-          )}
+          <RichText markdown={preCheck.result.form.instructions} />
           {Object.keys(answers).map((answer) => (
             <input
               key={answer}
@@ -73,6 +50,12 @@ export default function ResultForm({
               type="hidden"
             />
           ))}
+          <Input
+            name="email"
+            type={"email"}
+            label={preCheck.result.form.emailLabel}
+            error={form.error("email")}
+          />
           <Input
             name="title"
             label={preCheck.result.form.policyTitleLabel}
@@ -88,54 +71,33 @@ export default function ResultForm({
             />
           )}
           <ButtonContainer
-            buttons={
-              quickSendNkrFlag
-                ? [
-                    {
-                      id: "result-email-button",
-                      name: "_action",
-                      value: "email",
-                      text: preCheck.result.form.sendEmailButton.text,
-                      look: "primary",
-                      className: "plausible-event-name=Quicksend+Click",
-                    },
-                    {
-                      id: "result-download-button",
-                      name: "_action",
-                      value: "download",
-                      text: preCheck.result.form.downloadPdfButton.text,
-                      look: "ghost",
-                    },
-                  ]
-                : [
-                    {
-                      id: "result-download-button",
-                      name: "_action",
-                      value: "download",
-                      text: preCheck.result.form.downloadPdfButton.text,
-                      look: "primary",
-                    },
-                  ]
-            }
+            buttons={[
+              {
+                id: "result-email-button",
+                name: "_action",
+                value: "email",
+                text: preCheck.result.form.sendEmailButton.text,
+                look: "primary",
+                className: "plausible-event-name=Quicksend+Click",
+              },
+            ]}
           />
         </fieldset>
       </form>
-      {quickSendNkrFlag && (
-        <div className="ds-stack-16 mt-40">
-          <Heading
-            tagName="h3"
-            className="ds-label-section"
-            text={preCheck.result.form.faqs.title}
+      <div className="ds-stack-16 mt-40">
+        <Heading
+          tagName="h3"
+          className="ds-label-section"
+          text={preCheck.result.form.faqs.title}
+        />
+        {preCheck.result.form.faqs.details.map((detail) => (
+          <DetailsSummary
+            key={detail.label}
+            title={detail.label}
+            content={detail.text}
           />
-          {preCheck.result.form.faqs.details.map((detail) => (
-            <DetailsSummary
-              key={detail.label}
-              title={detail.label}
-              content={detail.text}
-            />
-          ))}
-        </div>
-      )}
-    </Container>
+        ))}
+      </div>
+    </>
   );
 }