From b867030c8d64ce45d763ad8cab9a1924b4f225fb Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Tue, 24 Jun 2025 12:09:22 +0200
Subject: [PATCH] pop-up

---
 components/CartPopup.vue                 | 25 +++++++++++--
 components/HeaderBlock.vue               |  4 +--
 components/{ => section}/FooterBlock.vue | 45 +++++++++++++-----------
 components/section/Product.vue           |  2 +-
 layouts/default.vue                      |  2 +-
 stores/productStore.ts                   | 36 +++++++++----------
 6 files changed, 69 insertions(+), 45 deletions(-)
 rename components/{ => section}/FooterBlock.vue (54%)

diff --git a/components/CartPopup.vue b/components/CartPopup.vue
index 810ea8f..033e008 100644
--- a/components/CartPopup.vue
+++ b/components/CartPopup.vue
@@ -1,7 +1,26 @@
 <template>
-    <div class="p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl">
-        <div class="" v-if="productStore.productList">
-            {{ productStore.productList }}
+    <div class="w-full p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-2xl h-full">
+        <div class="flex items-center h-[205px]" v-if="productStore.productList">
+            <div class="w-[205px] h-full flex items-center justify-center">
+                <img :src="`https://www.yourgold.cz/api/public/file/${productStore.productList[0]?.cover_picture_uuid}.webp`"
+                    alt="pics" class="w-auto h-full" />
+            </div>
+            <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px] max-w-[250px]"
+                @click="productStore.addToCart(productStore.productList[0])">
+                <h3
+                    class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+                    {{ productStore.productList[0]?.name }}
+                </h3>
+                <div class="">
+                    <p
+                        class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                        {{ productStore.productList[0]?.formatted_price }}
+                    </p>
+                    <div class="">
+
+                    </div>
+                </div>
+            </div>
         </div>
         <UiButtonArrow class="w-full" type="fill" :arrow="true">Přejít k pokladně</UiButtonArrow>
     </div>
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index 5e9f6c8..4b19924 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -30,7 +30,7 @@
               {{ $t('eshop') }}
             </button>
           </div>
-          <div v-if="openCart" class="max-w-[1067px] absolute top-[130px] z-50 right-20">
+          <div v-if="openCart" class="max-w-[1067px] w-full absolute top-[130px] z-50 right-20">
             <CartPopup />
           </div>
         </div>
@@ -222,7 +222,7 @@ const open = ref(false);
 const openCart = ref(false);
 const colorMode = useColorMode();
 
-productStore.getCart()
+// productStore.getCart()
 
 const route = useRoute()
 const isDark = computed({
diff --git a/components/FooterBlock.vue b/components/section/FooterBlock.vue
similarity index 54%
rename from components/FooterBlock.vue
rename to components/section/FooterBlock.vue
index 9bcdb5f..4838e59 100644
--- a/components/FooterBlock.vue
+++ b/components/section/FooterBlock.vue
@@ -2,40 +2,45 @@
   <div class="border-t border-border pt-[75px]">
     <UiContainer class="flex flex-col gap-24">
       <div
-        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
-      >
-        <div
-          v-for="(item, index) in menuStore.footerItems?.items[0].data"
-          :key="index"
-          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
-        >
+        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
+        <div v-for="(item, index) in component.section_lang_data" :key="index"
+          class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
           <h3 class="h4-uppercase-bold-inter">{{ item.title }}</h3>
-          <div
-            class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
-            v-for="(el, indexEl) in item.items"
-            :key="indexEl"
-          >
-            {{ el }}
+          <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
+            v-for="(el, indexEl) in item.children" :key="indexEl">
+            {{ el.title }}
           </div>
         </div>
       </div>
 
       <ClientOnly v-if="!colorMode?.forced">
-        <img
-          class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
-          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
-          alt="logo"
-          @click="menuStore.navigateToItem()"
-        />
+        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
+          :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()" />
       </ClientOnly>
     </UiContainer>
   </div>
 </template>
 
 <script lang="ts" setup>
-const menuStore = useMenuStore();
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    children: {
+      title: string;
+      value: 'email' | 'address' | 'certificate' | 'document' | 'form' | 'info';
+      link?: string;
+    }[];
+  }[];
+};
+
+
 const store = useStore();
 const open = ref(false);
+const menuStore = useMenuStore();
 const colorMode = useColorMode();
 
 const isDark = computed({
diff --git a/components/section/Product.vue b/components/section/Product.vue
index 4fed871..ff36f14 100644
--- a/components/section/Product.vue
+++ b/components/section/Product.vue
@@ -19,7 +19,7 @@
         </p>
         <button
           class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
-          <UButton icon="i-lucide-shopping-cart" variant="ghost" class="sm:text-[25px] md:text-2xl text-bg-light" />
+          <i class="uil uil-shopping-cart text-[10px] sm:text-[25px] md:text-2xl cursor-pointer"></i>
         </button>
       </div>
     </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index a2b9a47..60edd0a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,7 @@
       class="flex-1 py-[25px] sm:py-[55px] md:py-[75px] space-y-[55px] sm:space-y-[75px] md:space-y-[100px] text-inter">
       <slot />
     </div>
-    <FooterBlock />
+    <!-- <FooterBlock /> -->
   </div>
 </template>
 
diff --git a/stores/productStore.ts b/stores/productStore.ts
index 88b94f8..de1a0c4 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -73,26 +73,26 @@ export const useProductStore = defineStore("productStore", () => {
   }
 
   const cart = ref();
-  async function getCart() {
-    try {
-      const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
+  // async function getCart() {
+  //   try {
+  //     const res = await fetch(`http://127.0.0.1:4000/api/public/user/cart`, {
+  //       headers: {
+  //         "Content-Type": "application/json",
+  //       },
+  //     });
 
-      if (!res.ok) {
-        throw new Error(`HTTP error: ${res.status}`);
-      }
+  //     if (!res.ok) {
+  //       throw new Error(`HTTP error: ${res.status}`);
+  //     }
 
-      const data = await res.json();
-      console.log(data);
+  //     const data = await res.json();
+  //     console.log(data);
 
-      cart.value = data;
-    } catch (error) {
-      console.error("getList error:", error);
-    }
-  }
+  //     cart.value = data;
+  //   } catch (error) {
+  //     console.error("getList error:", error);
+  //   }
+  // }
 
   return {
     productList,
@@ -100,6 +100,6 @@ export const useProductStore = defineStore("productStore", () => {
     getList,
     getModules,
     addToCart,
-    getCart,
+    // getCart,
   };
 });