survey

the-clothing-loop · May 1, 2024 · ba3f79a · ba3f79a
1 parent 67588b7
commit ba3f79a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/frontend/astro-i18next.config.mjs b/frontend/astro-i18next.config.mjs
@@ -5,7 +5,14 @@ const languages = getLanguages(false);
 /** @type {import('astro-i18next').AstroI18nextConfig} */
 export default {
   locales: languages,
-  namespaces: ["about", "faq", "testimonials", "translation", "contribute"],
+  namespaces: [
+    "about",
+    "faq",
+    "testimonials",
+    "translation",
+    "contribute",
+    "survey",
+  ],
   defaultNamespace: "translation",
   load: ["server", "client"], // load i18next server and client side
   i18nextServerPlugins: {

diff --git a/frontend/public/locales/en/survey.json b/frontend/public/locales/en/survey.json
@@ -0,0 +1,5 @@
+{
+  "title": "Can we please ask you some questions?",
+  "body": "We are very curious how you experience the Clothing Loop! It only takes about five minutes to fill in our short survey. Your answers will be of great help to us.",
+  "btnSubmit": "Form"
+}
diff --git a/frontend/public/locales/nl/survey.json b/frontend/public/locales/nl/survey.json
@@ -0,0 +1,5 @@
+{
+  "title": "Mogen we je een paar vragen stellen?",
+  "body": "We zijn erg benieuwd hoe jij de Clothing Loop ervaart! Het duurt slechts vijf minuten om onze korte enquête in te vullen. Jouw mening is belangrijk voor ons!",
+  "btnSubmit": "Enquête"
+}
diff --git a/frontend/src/components/react/components/PopupForm.tsx b/frontend/src/components/react/components/PopupForm.tsx
@@ -7,7 +7,7 @@ const maxDate = new Date(2024, 6, 1);
 const url = "http://google.com";
 
 export default function PopupForm() {
-  const { t } = useTranslation();
+  const { t } = useTranslation("survey");
   const [open, setOpen] = useState(false);
   useEffect(() => {
     if (isSSR()) return;
@@ -40,28 +40,23 @@ export default function PopupForm() {
       <div className="bg-white">
         <form className="bg-purple/10 border-2 max-w-screen-xs md:border-e-0 border-purple shadow-lg p-4">
           <h1 className="text-lg font-bold text-purple font-serif mb-2">
-            Lorem, ipsum dolor sit amet consectetur
+            {t("title")}
           </h1>
-          <p>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus,
-            aperiam eligendi neque aliquam error voluptatibus commodi,
-            distinctio hic facere in vitae facilis vero magnam similique!
-            Mollitia saepe blanditiis veritatis magnam.
-          </p>
+          <p>{t("body")}</p>
           <div className="flex flex-col md:flex-row justify-between md:justify-start gap-2 mt-4">
             <button
               type="button"
               className="btn md:btn-sm bg-purple text-white"
               onClick={submit}
             >
-              Form
+              {t("btnSubmit")}
             </button>
             <button
               type="button"
               className="btn md:btn-sm btn-ghost bg-white"
               onClick={close}
             >
-              {t("close")}
+              {t("close", { ns: "translation" })}
             </button>
           </div>
         </form>