From 6e96db472f97bb8dfed26cd6bdb4703a54023bb2 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Thu, 15 Feb 2024 11:39:17 +0100
Subject: [PATCH 1/2] fix(marketplace): Links to faq questions

---
 .../src/components/FAQCollapse.vue            | 55 ++++++++++-
 frontend/marketplace/src/pages/FAQPage.vue    | 97 +++++++++++++++----
 2 files changed, 131 insertions(+), 21 deletions(-)

diff --git a/frontend/marketplace/src/components/FAQCollapse.vue b/frontend/marketplace/src/components/FAQCollapse.vue
index ce4040389..2197dc6a3 100644
--- a/frontend/marketplace/src/components/FAQCollapse.vue
+++ b/frontend/marketplace/src/components/FAQCollapse.vue
@@ -1,15 +1,62 @@
 <script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 export interface FAQCollapseProps {
+  id: string;
   title: string;
   content: string;
+  name: string;
 }
-defineProps<FAQCollapseProps>();
+const props = defineProps<FAQCollapseProps>();
+const rootElRef = ref<HTMLElement | null>(null);
+const route = useRoute();
+const router = useRouter();
+const isChecked = computed(() => {
+  const { hash } = route;
+  return hash === `#${props.id}`;
+});
+
+onMounted(() => {
+  const { hash } = route;
+  if (hash === `#${props.id}` && rootElRef.value) {
+    const topPos = rootElRef.value.getBoundingClientRect().top + window.scrollY;
+    // need to push it back to the next tick to ensure the element is in the DOM
+    setTimeout(() => {
+      window.scrollTo({
+        top: topPos, // scroll so that the element is at the top of the view
+        behavior: "smooth", // smooth scroll
+      });
+    }, 1);
+  }
+});
+
+const handleClick = () => {
+  if (isChecked.value) {
+    router.push({ hash: "" });
+  } else {
+    router.push({ hash: `#${props.id}` });
+  }
+};
 </script>
 <template>
-  <div tabindex="0" class="collapse group collapse-arrow mb-1">
-    <div class="flex collapse-title text-white bg-mediumGray">
+  <div
+    :id="props.id"
+    ref="rootElRef"
+    class="collapse group collapse-arrow mb-1"
+  >
+    <input
+      type="radio"
+      :name="props.name"
+      :checked="isChecked"
+      :onClick="handleClick"
+    />
+    <div
+      class="flex collapse-title text-white bg-mediumGray"
+      :onClick="handleClick"
+    >
       <div
-        class="w-7 h-7 border-2 border-white rounded-full mr-3 group-focus:bg-greenPrimary"
+        class="w-7 h-7 border-2 border-white rounded-full mr-3"
+        :class="{ 'bg-greenPrimary': isChecked }"
       />
       {{ title }}
     </div>
diff --git a/frontend/marketplace/src/pages/FAQPage.vue b/frontend/marketplace/src/pages/FAQPage.vue
index 59065dc98..37d7e8a17 100644
--- a/frontend/marketplace/src/pages/FAQPage.vue
+++ b/frontend/marketplace/src/pages/FAQPage.vue
@@ -1,5 +1,79 @@
 <script setup lang="ts">
 import FAQCollapse from "@/components/FAQCollapse.vue";
+const faqData = [
+  {
+    id: "foo",
+    title: "Frequently asked q 1",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "bar",
+    title: "Lorem ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "baz",
+    title: "Ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "qux",
+    title: "Sit amet lorem ipsum",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "foo1",
+    title: "Frequently asked q 1",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "bar1",
+    title: "Lorem ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "baz1",
+    title: "Ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "qux1",
+    title: "Sit amet lorem ipsum",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "foo2",
+    title: "Frequently asked q 1",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "bar2",
+    title: "Lorem ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "baz2",
+    title: "Ipsum dolor sit amet",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+  {
+    id: "qux2",
+    title: "Sit amet lorem ipsum",
+    content:
+      "Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy",
+  },
+];
 </script>
 
 <template>
@@ -8,23 +82,12 @@ import FAQCollapse from "@/components/FAQCollapse.vue";
 
     <div class="my-5 text-title18">
       <FAQCollapse
-        title="Frequently asked question"
-        content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
-      />
-
-      <FAQCollapse
-        title="Frequently asked question"
-        content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
-      />
-
-      <FAQCollapse
-        title="Frequently asked question"
-        content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
-      />
-
-      <FAQCollapse
-        title="Frequently asked question"
-        content="Decentralizing the new (circular) economy so everyone can get a fair share of the upside of making the world a cleaner and better place. Decentralizing the new (circular) economy"
+        v-for="faqItem in faqData"
+        :key="faqItem.id"
+        :id="faqItem.id"
+        :title="faqItem.title"
+        :content="faqItem.content"
+        name="faq"
       />
     </div>
   </div>

From 5f32abf2eafde4f1e7340ae81d46602d75ce2093 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Wed, 21 Feb 2024 14:13:13 +0100
Subject: [PATCH 2/2] fix(marketplace): Fix scrolling on FAQ

---
 frontend/marketplace/src/router/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index 2a2403354..6cab6443c 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -35,8 +35,11 @@ declare module "vue-router" {
 }
 
 const router = createRouter({
-  scrollBehavior: () => {
+  scrollBehavior: (to, from) => {
     // always scroll to top after navigation
+    if (to.name === "FAQPage" && to.name === from.name) {
+      return undefined;
+    }
     return { top: 0 };
   },
   history: createWebHistory(import.meta.env.BASE_URL),