refactor: move spa to frontend folder

frontend/spa/src/components/Banner.vue

@@ -10,7 +10,30 @@
         @slideChange="onSlideChange"
     >
       <SwiperSlide v-for="slide in slides" :key="slide.id">
-        <img :src="slide.image" :alt="slide.title">
+        <RouterLink
+            v-if="slide?.link?.type === 'category'"
+            :to="{name: 'product.categories.show', params: {category_id: slide.link.value.category_id}}"
+            @click="sliderClick(slide)"
+        >
+          <img :src="slide.image" :alt="slide.title">
+        </RouterLink>
+
+        <RouterLink
+            v-else-if="slide?.link?.type === 'product'"
+            :to="{name: 'product.show', params: {id: slide.link.value.product_id}}"
+            @click="sliderClick(slide)"
+        >
+          <img :src="slide.image" :alt="slide.title">
+        </RouterLink>
+
+        <img
+            v-else-if="slide?.link?.type === 'url'"
+            :src="slide.image"
+            :alt="slide.title"
+            @click="openExternalLink(slide.link.value.url, slide)"
+        >
+
+        <img v-else :src="slide.image" :alt="slide.title"/>
       </SwiperSlide>
     </Swiper>
   </div>
@@ -22,7 +45,10 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import {onMounted, ref} from "vue";
 import {fetchBanner} from "@/utils/ftch.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 
+const yaMetrika = useYaMetrikaStore();
 const slides = ref([]);
 
 const onSwiper = (swiper) => {
@@ -32,6 +58,24 @@ const onSlideChange = () => {
   console.log('slide change');
 };
 
+function sliderClick(slide) {
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
+    banner: slide.title,
+  });
+}
+
+function openExternalLink(link, slide) {
+  if (! link) {
+    return;
+  }
+
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
+    banner: slide.title,
+  });
+
+  window.Telegram.WebApp.openLink(link, {try_instant_view: false});
+}
+
 onMounted(async () => {
   const response = await fetchBanner();
   slides.value = response.data;
@@ -39,13 +83,9 @@ onMounted(async () => {
 </script>
 
 <style>
-.app-banner {
-  overflow: hidden;
-}
-
 .app-banner .swiper-horizontal > .swiper-pagination-bullets {
   position: relative;
-  bottom: 0;
+  bottom: 10px;
 }
 
 .app-banner .swiper-horizontal .swiper-slide {
@@ -54,7 +94,7 @@ onMounted(async () => {
   justify-content: center;
 }
 
-.app-banner .swiper-horizontal .swiper-slide > img {
+.app-banner .swiper-horizontal .swiper-slide img {
   border-radius: var(--radius-box);
 }
 </style>

frontend/spa/src/constants/yaMetrikaGoals.js

@@ -12,4 +12,5 @@ export const YA_METRIKA_GOAL = {
     FILTERS_RESET: 'filters_reset',
     VIEW_SEARCH: 'view_search',
     PERFORM_SEARCH: 'perform_search',
+    SLIDER_HOME_CLICK: 'slider_home_click',
 };

frontend/spa/src/style.css

@@ -60,11 +60,6 @@ html {
     padding-top: calc(var(--tg-content-safe-area-inset-top, 0rem) + var(--tg-safe-area-inset-top, 0rem) + var(--tc-navbar-min-height));
 }
 
-.swiper-pagination-bullets > .swiper-pagination-bullet {
-    background-color: red;
-    color: red;
-}
-
 .swiper-pagination-bullets {
     top: 10px;
 }