feat: refactor feedback and footer to components

- removed footer and feedback from App.tsx to individual components - added all text sections to translation.json for clean structure
technologiestiftung · Feb 12, 2024 · fcfad09 · fcfad09
1 parent 8a506e5
commit fcfad09
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 75 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,12 +4,11 @@ import { Progress } from "./components/progress";
 import { HomeButton } from "./components/buttons/home-button";
 import { HeaderTitle } from "./components/header-title";
 import { useProgressStore } from "./components/steps/store";
-import { useI18nStore } from "../src/i18n/store";
-import { availableLanguages } from "../src/i18n/store/types.ts";
+import { Feedback } from "./components/feedback/index.tsx";
+import { Footer } from "./components/footer/index.tsx";
 
 function App() {
   const currentStep = useProgressStore((state) => state.currentStep);
-  const language = useI18nStore((state) => state.language);
 
   return (
     <>
@@ -34,19 +33,7 @@ function App() {
         <Steps />
       </main>
 
-      {language === availableLanguages[0] && (
-        <div className="flex w-full flex-wrap justify-center gap-x-2 px-8 py-4 text-sm">
-          Wie gefällt Dir die Anwendung?
-          <a
-            className="text-blue-500 underline"
-            href="https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Beantworte uns gerne einige Fragen.
-          </a>
-        </div>
-      )}
+      <Feedback />
 
       <div className="hidden w-full print:hidden md:flex">
         <Progress id={"desktop-progress-bar"} />
@@ -58,63 +45,7 @@ function App() {
         } `}
       ></div>
 
-      <footer
-        className={`flex py-4
-        ${currentStep === 0 || currentStep === 16 ? "flex" : "hidden md:flex"}
-      `}
-        id="footer"
-      >
-        <div className="flex w-full flex-wrap justify-start gap-y-5">
-          <div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-5 px-8 py-2 text-sm sm:justify-center md:gap-x-20 md:px-5">
-            <div className="flex flex-col gap-4">
-              Durchgeführt von
-              <img
-                src="/images/logo-citylab-berlin-outline.svg"
-                alt="Logo von CityLab Berlin"
-                className="w-32"
-                loading="lazy"
-              />
-            </div>
-            <div className="flex flex-col gap-4">
-              Ein Projekt der
-              <img
-                src="/images/logo-technologiestiftung-berlin-de.svg"
-                alt="Logo von Technologiestiftung Berlin"
-                className="w-32"
-                loading="lazy"
-              />
-            </div>
-            <div className="flex flex-col gap-4">
-              Mit Unterstützung von
-              <img
-                src="/images/logo-senatskanzlei-buergermeister-vertikal.svg"
-                alt="Logo von Berlins Regierender Bürgermeister"
-                className="w-28"
-                loading="lazy"
-              />
-            </div>
-          </div>
-
-          <div className="flex w-full flex-wrap justify-center  gap-x-5 px-5 text-sm	">
-            <a
-              className="flex flex-col gap-4 text-gray-400 underline"
-              href="https://www.technologiestiftung-berlin.de/datenschutz"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Datenschutz
-            </a>
-            <a
-              className="flex flex-col gap-4 text-gray-400 underline"
-              href="https://www.technologiestiftung-berlin.de/impressum"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Impressum
-            </a>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </>
   );
 }

diff --git a/src/components/feedback/index.tsx b/src/components/feedback/index.tsx
@@ -0,0 +1,25 @@
+import { t } from "../../i18n/translations";
+import { useI18nStore } from "../../i18n/store";
+import { availableLanguages } from "../../../src/i18n/store/types";
+
+export function Feedback() {
+  const language = useI18nStore((state) => state.language);
+
+  return (
+    <>
+      {language === availableLanguages[0] && (
+        <div className="flex w-full flex-wrap justify-center gap-x-2 px-8 py-4 text-sm">
+          {t("feedback.question", language)}
+          <a
+            className="text-blue-500 underline"
+            href={t("feedback.link", language)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("feedback.link.label", language)}
+          </a>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -0,0 +1,68 @@
+import { t } from "../../i18n/translations";
+import { useI18nStore } from "../../i18n/store";
+import { useProgressStore } from "../steps/store";
+
+export function Footer() {
+  const language = useI18nStore((state) => state.language);
+  const currentStep = useProgressStore((state) => state.currentStep);
+
+  return (
+    <footer
+      className={`flex py-4
+  ${currentStep === 0 || currentStep === 16 ? "flex" : "hidden md:flex"}
+`}
+      id="footer"
+    >
+      <div className="flex w-full flex-wrap justify-start gap-y-5">
+        <div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-5 px-8 py-2 text-sm sm:justify-center md:gap-x-20 md:px-5">
+          <div className="flex flex-col gap-4">
+            {t("logo.t1", language)}
+            <img
+              src="/images/logo-citylab-berlin-outline.svg"
+              alt="Logo von CityLab Berlin"
+              className="w-32"
+              loading="lazy"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            {t("logo.t2", language)}
+            <img
+              src="/images/logo-technologiestiftung-berlin-de.svg"
+              alt="Logo von Technologiestiftung Berlin"
+              className="w-32"
+              loading="lazy"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            {t("logo.t3", language)}
+            <img
+              src="/images/logo-senatskanzlei-buergermeister-vertikal.svg"
+              alt="Logo von Berlins Regierender Bürgermeister"
+              className="w-28"
+              loading="lazy"
+            />
+          </div>
+        </div>
+
+        <div className="flex w-full flex-wrap justify-center  gap-x-5 px-5 text-sm	">
+          <a
+            className="flex flex-col gap-4 text-gray-400 underline"
+            href="https://www.technologiestiftung-berlin.de/datenschutz"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("dataProtection", language)}
+          </a>
+          <a
+            className="flex flex-col gap-4 text-gray-400 underline"
+            href="https://www.technologiestiftung-berlin.de/impressum"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("imprint", language)}
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/i18n/translations/translations.json b/src/i18n/translations/translations.json
@@ -32,6 +32,10 @@
     "intro.p2": "Du hast noch keinen Termin?",
     "intro.p2.link": "Termin buchen.",
 
+    "feedback.question": "Wie gefällt Dir die Anwendung?",
+    "feedback.link": "https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist",
+    "feedback.link.label": "Beantworte uns gerne einige Fragen.",
+
     "first-registration.q1": "Meldest Du Dich zum ersten Mal in Berlin an?",
     "first-registration.q1.tooltip": "Wenn ja, müssen eventuell Dokumente wie Geburts- oder Heiratsurkunde vorgezeigt werden.",
     "first-registration.q2": "Bist Du verheiratet?",
@@ -104,7 +108,14 @@
     "nonEuIdOrPassportOrReplacement": "Reisepass oder Passersatzpapiere",
     "nonEuIdOrPassportOrReplacement.tooltip": "Dieses Dokument ist notwendig, um Dich auszuweisen.",
     "supplement": "Beiblatt zur Anmeldung/Hauptwohnungserklärung",
-    "supplement.tooltip": "Dieses Dokument ist notwendig, weil Du weiterhin in einer weiteren Wohnung gemeldet bleiben möchtest."
+    "supplement.tooltip": "Dieses Dokument ist notwendig, weil Du weiterhin in einer weiteren Wohnung gemeldet bleiben möchtest.",
+
+    "logo.t1": "Durchgeführt von",
+    "logo.t2": "Ein Projekt der",
+    "logo.t3": "Mit Unterstützung von",
+
+    "dataProtection": "Datenschutz",
+    "imprint": "Impressum"
   },
   "en-DE": {
     "de-DE.mobile": "DE",
@@ -139,6 +150,10 @@
     "intro.p2": "Don't have an appointment yet?",
     "intro.p2.link": " Book an appointment.",
 
+    "feedback.question": "How do you like the application?",
+    "feedback.link": "https://citylabberlin.typeform.com/to/kCdnCgvC?product_id=checklist",
+    "feedback.link.label": "Feel free to give us some feedback",
+
     "first-registration.q1": "Are you registering in Berlin for the first time?",
     "first-registration.q1.tooltip": "If yes, documents such as a birth or marriage certificate may need to be presented.",
     "first-registration.q2": "Are you married?",
@@ -211,6 +226,13 @@
     "nonEuIdOrPassportOrReplacement": "Passport or Passport Replacement Documents",
     "nonEuIdOrPassportOrReplacement.tooltip": "This document is necessary to identify yourself.",
     "supplement": "Supplement to Registration/Main Residence Declaration",
-    "supplement.tooltip": "This document is necessary because you want to remain registered in another apartment."
+    "supplement.tooltip": "This document is necessary because you want to remain registered in another apartment.",
+
+    "logo.t1": "Executed by",
+    "logo.t2": "A project by",
+    "logo.t3": "Supported by",
+
+    "dataProtection": "Data protection",
+    "imprint": "Imprint"
   }
 }