feat: add link for typeform datenschutz and impressum (#25)

* feat: add link for typeform datenschutz and impressum - typeform link only shows when german is selected * feat: exchange german tag with variable * 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 * fix: exchange imprint link and data privacy name * feat: change all link colors to blue-700
technologiestiftung · Feb 15, 2024 · eb1e8af · eb1e8af
1 parent 1bce679
commit eb1e8af
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 40 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,8 @@ 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 { Feedback } from "./components/feedback/index.tsx";
+import { Footer } from "./components/footer/index.tsx";
 
 function App() {
   const currentStep = useProgressStore((state) => state.currentStep);
@@ -31,6 +33,8 @@ function App() {
         <Steps />
       </main>
 
+      <Feedback />
+
       <div className="hidden w-full print:hidden md:flex">
         <Progress id={"desktop-progress-bar"} />
       </div>
@@ -41,42 +45,7 @@ function App() {
         } `}
       ></div>
 
-      <footer
-        className={`flex py-5
-        ${currentStep === 0 || currentStep === 16 ? "flex" : "hidden md:flex"}
-      `}
-        id="footer"
-      >
-        <div className="flex w-full flex-wrap justify-start gap-x-10 gap-y-8 px-8 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>
-      </footer>
+      <Footer />
     </>
   );
 }

diff --git a/src/components/appointment/index.tsx b/src/components/appointment/index.tsx
@@ -34,7 +34,7 @@ export function Appointment() {
           <a
             href="https://www.google.de/maps/place/Schlesische+Str.+27A,+10997+Berlin/@52.4984664,13.4448928,17z/data=!3m1!4b1!4m6!3m5!1s0x47a84e53becc02e7:0x39bee44340592b1!8m2!3d52.4984664!4d13.4474677!16s%2Fg%2F11b_242msd?entry=ttu"
             target="_blank"
-            className="text-blue-500 underline visited:text-purple-500"
+            className="text-blue-700 underline visited:text-purple-500"
           >
             {t("plan-route", language)}
           </a>
@@ -46,7 +46,7 @@ export function Appointment() {
           <a
             href="https://service.berlin.de/dienstleistung/120686/"
             target="_blank"
-            className="text-blue-500 underline visited:text-purple-500"
+            className="text-blue-700 underline visited:text-purple-500"
           >
             {t("intro.p2.link", language)}
           </a>

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-700 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("dataPrivacy", language)}
+          </a>
+          <a
+            className="flex flex-col gap-4 text-gray-400 underline"
+            href={t("imprint.link", language)}
+            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,15 @@
     "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",
+
+    "dataPrivacy": "Datenschutz",
+    "imprint": "Impressum",
+    "imprint.link": "https://www.technologiestiftung-berlin.de/impressum"
   },
   "en-DE": {
     "de-DE.mobile": "DE",
@@ -139,6 +151,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 +227,14 @@
     "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",
+
+    "dataPrivacy": "Data Privacy",
+    "imprint": "Imprint",
+    "imprint.link": "https://www.technologiestiftung-berlin.de/en/imprint"
   }
 }