wip migration

components/CookieUsageNotification.vue

@@ -0,0 +1,82 @@
+<template>
+  <ClientOnly>
+    <BAlert class="cookies" :show="show">
+      <div class="cookies-container">
+        <span class="title">Uso de cookies</span>
+        <p>
+          Utilizamos cookies propias y de terceros para mejorar la navegación.
+          Si continúa navegando, consideramos que acepta su uso. Puede obtener
+          más información, o bien conocer cómo cambiar la configuración, en
+          nuestra <NuxtLink to="/page/cookies">Política de cookies</NuxtLink>.
+        </p>
+        <BButton size="sm" variant="success" @click="close">Aceptar</BButton>
+      </div>
+    </BAlert>
+  </ClientOnly>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+import { mapActions } from 'pinia'
+export default {
+  name: 'CookieUsageNotification',
+  data() {
+    return {
+      show: undefined,
+    }
+  },
+
+  mounted() {
+    const auth = useAuthStore()
+    if (auth.cookiesAccepted === true) {
+      this.show = false
+    } else {
+      this.show = true
+    }
+  },
+
+  methods: {
+    ...mapActions(useAuthStore, ['acceptCookies']),
+    close() {
+      this.show = false
+      this.acceptCookies()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.cookies {
+  z-index: 999;
+  position: fixed;
+  bottom: 0px;
+  background-color: $color-navy;
+  border: none;
+  color: $color-light;
+  a {
+    color: $color-light;
+    text-decoration: underline;
+  }
+  span {
+    font-size: $m;
+    font-weight: $bold;
+  }
+  p {
+    font-size: $s;
+  }
+}
+.cookies-container {
+  font-weight: $regular;
+}
+.btn {
+  background-color: $color-navy;
+  color: $color-light;
+  border: 2px solid $color-orange;
+  padding: 0.5em 1em;
+  margin: auto;
+
+  &:hover {
+    background-color: $color-orange;
+  }
+}
+</style>