From 7f0a6290da8dac769dd465e208d311f7294f7225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaume=20Sol=C3=ADs?= <jaume.solis@baldarian.com>
Date: Tue, 19 Dec 2023 11:50:44 +0100
Subject: [PATCH] Secciones

---
 .../dropdown/DropdownItem.vue                 | 20 +++--
 src/components/sections/InfoSection.vue       |  7 +-
 src/components/sections/QuestionSection.vue   | 90 ++-----------------
 src/components/sections/ReasonsSection.vue    |  7 +-
 4 files changed, 33 insertions(+), 91 deletions(-)

diff --git a/src/components/quasar-components/dropdown/DropdownItem.vue b/src/components/quasar-components/dropdown/DropdownItem.vue
index 085fe2e..e1aea2f 100644
--- a/src/components/quasar-components/dropdown/DropdownItem.vue
+++ b/src/components/quasar-components/dropdown/DropdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-item clickable v-close-popup @click="onItemClick">
+  <q-item clickable v-close-popup @click="onItemClick(currentLang)">
     <q-item-section>
       <q-item-label>
         <slot></slot>
@@ -9,17 +9,27 @@
 </template>
 
 <script lang="ts">
+import { storeToRefs } from 'pinia';
+import { useLanguageStore } from 'src/stores/language';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  name: 'DropdownItem',
+  props: {
+    currentLang: {
+      type: String,
+      default: '',
+    },
+  },
   setup() {
+    const langStore = useLanguageStore();
+    const { lang } = storeToRefs(langStore);
+
     return {
-      onItemClick() {
-        // console.log('Clicked on an Item')
+      onItemClick(currentLang: string) {
+        lang.value = currentLang;
       },
     };
   },
 });
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/sections/InfoSection.vue b/src/components/sections/InfoSection.vue
index ce214a4..7f09d55 100644
--- a/src/components/sections/InfoSection.vue
+++ b/src/components/sections/InfoSection.vue
@@ -12,9 +12,12 @@
           sin intermediarios.
         </p>
 
-        <RouterLink class="btn rounded outlined green-color pd-icon" to="/">
+        <a
+          href="#question-section"
+          class="btn rounded outlined green-color pd-icon"
+        >
           ¿Quieres saber más? <IconChatRoundedFill />
-        </RouterLink>
+        </a>
       </div>
     </div>
 
diff --git a/src/components/sections/QuestionSection.vue b/src/components/sections/QuestionSection.vue
index d8857af..714c42b 100644
--- a/src/components/sections/QuestionSection.vue
+++ b/src/components/sections/QuestionSection.vue
@@ -1,9 +1,10 @@
 <template>
   <section
     class="question-container"
-    style="background-image: url('assets/question-bg.png')"
+    style="background-image: url('../../assets/question-bg.png')"
+    id="question-section"
   >
-    <container class="question-container-form" role="main">
+    <Container class="question-container-form">
       <header class="question-content">
         <LogoWhite />
 
@@ -25,72 +26,23 @@
           <h5 class="question-form-title">Pregunta a nuestro especialista</h5>
         </header>
 
-        <form class="question-form-body" @submit="handleSubmit" role="main">
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Nombre"
-            class="name"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Apellidos"
-            class="nickname"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            type="email"
-            label="Email"
-            class="email"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            type="tel"
-            label="Teléfono"
-            class="telephone"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Motivo de consulta"
-            class="consult"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Mensaje"
-            class="message"
-            type="textarea"
-            autogrow
-            standout
-          />
-          <q-checkbox
-            v-model="checkbox"
-            label="*Acepto los términos y condiciones (Ver), y recibir respuesta comercial por parte de Verdnatura"
-          />
-        </form>
+        <QuestionForm />
       </div>
-    </container>
+    </Container>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+
 import IconQuestion from '../icons/IconQuestion.vue';
 import LogoWhite from '../logo/LogoWhite.vue';
 import Container from '../ui/Container.vue';
+import QuestionForm from '../ui/QuestionForm.vue';
 
 export default defineComponent({
   name: 'question-component',
-  components: { Container, LogoWhite, IconQuestion },
+  components: { Container, LogoWhite, IconQuestion, QuestionForm },
   setup() {
     const handleSubmit = () => {
       console.log('Foi submit');
@@ -188,32 +140,6 @@ p {
           }
         }
       }
-
-      & .question-form-body {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-
-        & .q-field {
-          &.name,
-          &.nickname,
-          &.email,
-          &.telephone {
-            flex: 1 0 min(100%, 218px);
-          }
-
-          &.consult,
-          &.message {
-            flex: 1 0 100%;
-          }
-          /* & .q-field__native {
-            color: $black !important;
-          } */
-        }
-      }
-      & .q-checkbox {
-        color: $white;
-      }
     }
 
     @media only screen and (max-width: $med-xmd) {
diff --git a/src/components/sections/ReasonsSection.vue b/src/components/sections/ReasonsSection.vue
index 8fd45a4..3234a2b 100644
--- a/src/components/sections/ReasonsSection.vue
+++ b/src/components/sections/ReasonsSection.vue
@@ -41,9 +41,12 @@
           </li>
         </ul>
 
-        <RouterLink class="btn rounded outlined white-color pd-icon" to="/">
+        <a
+          href="#question-section"
+          class="btn rounded outlined white-color pd-icon"
+        >
           ¿Tienes dudas? hablemos <IconChatRoundedFill />
-        </RouterLink>
+        </a>
       </div>
     </Container>