From 9063846282c9c17e3da7736c2308ab203dd05125 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Thu, 3 Jul 2025 15:24:28 +0200
Subject: [PATCH] fix eslint

---
 components/CartPopup.vue               | 234 +++----------
 components/HeaderBlock.vue             |   9 +-
 components/section/AboutUsMain.vue     |  49 ++-
 components/section/CheckoutSummary.vue | 467 +++++++++++--------------
 components/section/LoginMain.vue       |  84 ++---
 components/section/Product.vue         |  77 ++--
 components/section/ProductBlock.vue    |  11 -
 components/section/ShopMain.vue        | 213 ++++-------
 stores/checkoutStore.ts                | 317 ++++++++---------
 stores/menuStore.ts                    | 226 ++++++------
 stores/productStore.ts                 | 163 ++++-----
 types/checkout.ts                      |  55 ++-
 12 files changed, 784 insertions(+), 1121 deletions(-)

diff --git a/components/CartPopup.vue b/components/CartPopup.vue
index 8d53fea..9cc57ab 100644
--- a/components/CartPopup.vue
+++ b/components/CartPopup.vue
@@ -1,167 +1,55 @@
 <template>
-    <div ref="dropdownRef">
-        <div @click="openCart = !openCart" class="relative cursor-pointer">
-            <i class="uil uil-shopping-cart text-[31px]"></i>
-            <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
-                class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
-                {{ checkoutStore.products.length }}</div>
-        </div>
-        <div v-if="openCart" @click.self="openCart = !openCart"
-            class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]">
-            <div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
-                <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
-                    class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
-                    <div>
-                        <div v-for="item in checkoutStore.products"
-                            class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
-                            <div class="flex items-center h-[100px] sm:h-[205px]">
-                                <div
-                                    class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
-                                    <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
-                                        class="max-w-full max-h-full object-contain">
-                                </div>
-
-                                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
-                                    <div class="w-full flex items-center justify-between">
-                                        <h3
-                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
-                                            {{ item.name }}
-                                        </h3>
-                                        <i @click="productStore.deleteCartItem(item.cart_item_id)"
-                                            class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"></i>
-                                    </div>
-                                    <div class="flex flex-col gap-[10px]">
-                                        <p
-                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                                            {{ menuStore.formatPrice(Number(item.total_price)) }}
-                                        </p>
-                                        <div class="flex items-center gap-[2px] sm:gap-2 text-xl">
-                                            <div
-                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
-                                                <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
-                                                    @click="productStore.decrementCartItem(item.cart_item_id)"></i>
-                                            </div>
-                                            <div
-                                                class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
-                                                {{ item.quantity }}
-                                            </div>
-                                            <div
-                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
-                                                <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
-                                                    @click="productStore.incrementCartItem(item.product_id)"></i>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">{{
-                            $t('total_amount') }}</h4>
-                        <p
-                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                            {{ menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
-                        </p>
-                    </div>
-                    <UiButtonArrow @click="() => {
-                        if (userStore.isLogged) {
-                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
-                        } else {
-                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
-                        }
-                        openCart = false
-                    }" class="w-full" type="fill" :arrow="true" :full="true">{{ userStore.isLogged ?
-                        $t('to_checkout') : $t('login') }}
-                    </UiButtonArrow>
-                </div>
-                <div v-else
-                    class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
-                    <div
-                        class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
-                        <h4
-                            class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
-                            {{ $t('empty_cart') }}</h4>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div ref="dropdownRef">
+    <div class="relative cursor-pointer" @click="openCart = !openCart">
+      <i class="uil uil-shopping-cart text-[31px]"></i>
+      <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
+           class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
+        {{ checkoutStore.products.length }}
+      </div>
     </div>
-    <div
-      v-if="openCart"
-      class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]"
-      @click.self="openCart = !openCart"
-    >
+    <div v-if="openCart"
+         class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[100px] sm:top-[100px] md:top-[140px]"
+         @click.self="openCart = !openCart">
       <div class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
-        <div
-          v-if="
-            productStore.cart.cart_items
-              && productStore.cart.cart_items.length > 0
-          "
-          class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55"
-        >
+        <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
+             class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] h-full space-25-55">
           <div>
-            <!-- product -->
-            <div
-              v-for="item in productStore.cart.cart_items" :key="item.product_id"
-              class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block"
-            >
+            <div v-for="(item, index) in checkoutStore.products" :key="index"
+                 class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
               <div class="flex items-center h-[100px] sm:h-[205px]">
-                <div
-                  class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]"
-                >
-                  <img
-                    :src="`/api/public/file/${item.picture_uuid}.webp`"
-                    alt=""
-                    class="max-w-full max-h-full object-contain"
-                  >
+                <div class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
+                  <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
+                       class="max-w-full max-h-full object-contain">
                 </div>
 
-                <div
-                  class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]"
-                >
+                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
                   <div class="w-full flex items-center justify-between">
                     <h3
-                      class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]"
-                    >
+                      class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
                       {{ item.name }}
                     </h3>
-                    <i
-                      class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"
-                      @click="productStore.deleteCartItem(item.cart_item_id)"
-                    />
+                    <i class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"
+                       @click="productStore.deleteCartItem(item.cart_item_id)"></i>
                   </div>
                   <div class="flex flex-col gap-[10px]">
                     <p
-                      class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
-                    >
-                      {{ item.total_price }}
+                      class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                      {{ menuStore.formatPrice(Number(item.total_price)) }}
                     </p>
                     <div class="flex items-center gap-[2px] sm:gap-2 text-xl">
                       <div
-                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center"
-                      >
-                        <i
-                          class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
-                          @click="
-                            productStore.decrementCartItem(item.cart_item_id)
-                          "
-                        />
+                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                        <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
+                           @click="productStore.decrementCartItem(item.cart_item_id)"></i>
                       </div>
                       <div
-                        class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]"
-                      >
+                        class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
                         {{ item.quantity }}
                       </div>
                       <div
-                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center"
-                      >
-                        <i
-                          class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
-                          @click="
-                            productStore.incrementCartItem(item.product_id)
-                          "
-                        />
+                        class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                        <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
+                           @click="productStore.incrementCartItem(item.product_id)"></i>
                       </div>
                     </div>
                   </div>
@@ -170,52 +58,34 @@
             </div>
           </div>
           <div class="flex items-center justify-between">
-            <h4
-              class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]"
-            >
-              {{ $t("total_amount") }}
+            <h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">
+              {{
+                $t('total_amount') }}
             </h4>
             <p
-              class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
-            >
-              {{ productStore.cart.total_value }}
+              class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+              {{ menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
             </p>
           </div>
-          <UiButtonArrow
-            class="w-full"
-            type="fill"
-            :arrow="true"
-            :full="true"
-            @click="
-              () => {
-                if (userStore.isLogged) {
-                  menuStore.navigateToItem(
-                    menuStore.menuItems?.find((item) => item.id === 12),
-                  );
-                }
-                else {
-                  menuStore.navigateToItem(
-                    menuStore.menuItems?.find((item) => item.id === 11),
-                  );
-                }
-                openCart = false;
-              }
-            "
-          >
-            {{ userStore.isLogged ? $t("to_checkout") : $t("login") }}
+          <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true" @click="() => {
+            if (userStore.isLogged) {
+              menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
+            }
+            else {
+              menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
+            }
+            openCart = false
+          }">
+            {{ userStore.isLogged
+              ? $t('to_checkout') : $t('login') }}
           </UiButtonArrow>
         </div>
-        <div
-          v-else
-          class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center"
-        >
+        <div v-else
+             class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-xl sm:rounded-[32px] flex items-center justify-center">
           <div
-            class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]"
-          >
-            <h4
-              class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl"
-            >
-              {{ $t("empty_cart") }}
+            class="border border-block inline-flex items-center justify-center h-[140px] sm:h-[200px] text-center rounded-[8px]">
+            <h4 class="font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] px-4 sm:px-10 md:text-xl">
+              {{ $t('empty_cart') }}
             </h4>
           </div>
         </div>
@@ -229,7 +99,7 @@ import { onClickOutside } from '@vueuse/core'
 
 const productStore = useProductStore()
 const checkoutStore = useCheckoutStore()
-const openCart = ref(false);
+const openCart = ref(false)
 
 const menuStore = useMenuStore()
 const userStore = useUserStore()
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index 9c89bfa..e79a519 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -34,8 +34,8 @@
             <div class="flex items-center gap-[30px]">
               <div>
                 <i v-if="!userStore.isLogged"
-                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
-                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                   class="uil uil-user text-[31px] cursor-pointer"
+                   @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"></i>
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
@@ -375,11 +375,10 @@ import CountryCurrencySelector from './CountryCurrencySelector.vue'
 import LangSwitcher from './LangSwitcher.vue'
 
 const userStore = useUserStore()
-const productStore = useProductStore()
 const open = ref(false)
 const colorMode = useColorMode()
-const menuStore = useMenuStore();
-const checkoutStore = useCheckoutStore();
+const menuStore = useMenuStore()
+const checkoutStore = useCheckoutStore()
 
 checkoutStore.getUserCart()
 
diff --git a/components/section/AboutUsMain.vue b/components/section/AboutUsMain.vue
index c4029cc..02fb36d 100644
--- a/components/section/AboutUsMain.vue
+++ b/components/section/AboutUsMain.vue
@@ -14,35 +14,30 @@
           {{ component.front_section_lang[0].data.main_subtitle }}
         </h4>
       </div>
-      <div
-        class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
-        :style="{
-          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }"
-      ></div>
+      <div class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
+           :style="{
+             backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+             backgroundSize: 'cover',
+             backgroundPosition: 'center',
+           }"></div>
     </div>
     <div class="space-25-55-75">
       <h2 class="h2-bold-bounded">
         {{ component.front_section_lang[0].data.story_title }}
       </h2>
       <div class="flex flex-col-reverse md:flex-row w-full gap-6">
-        <div
-          class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
-          :style="{
-            backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-          }"
-        ></div>
+        <div class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]" :style="{
+          backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"></div>
         <div class="flex flex-col">
-          <p v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
-            {{ item }}
-          </p><div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
-            <br>
+          <div v-for="(item, index) in component.front_section_lang[0].data.story_description" :key="index">
+            <p>{{ item }}</p>
+            <div v-if="index < component.front_section_lang[0].data.story_description.length - 1">
+              <br>
+            </div>
           </div>
-          </p>
         </div>
       </div>
       <div class="flex flex-col w-full gap-6">
@@ -50,14 +45,12 @@
           {{ component.front_section_lang[0].data.story_subtitle }}
         </h4>
         <div class="flex flex-col justify-between xl:max-w-[70%]">
-          <p v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description"
-             :key="indexEl"
-          >
-            {{ el }}
-          </p><div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
-            <br>
+          <div v-for="(el, indexEl) in component.front_section_lang[0].data.story_sub_description" :key="indexEl">
+            <p>{{ el }}</p>
+            <div v-if="indexEl < component.front_section_lang[0].data.story_sub_description.length - 1">
+              <br>
+            </div>
           </div>
-          </p>
         </div>
       </div>
     </div>
diff --git a/components/section/CheckoutSummary.vue b/components/section/CheckoutSummary.vue
index cdc43f8..3df6f10 100644
--- a/components/section/CheckoutSummary.vue
+++ b/components/section/CheckoutSummary.vue
@@ -1,160 +1,173 @@
 <template>
+  <UiContainer v-if="checkoutStore.modalMadeOrder">
+    <NuxtLink to="/" class="mt-6 text-blue-500 underline" @click="checkoutStore.modalMadeOrder = false">Go back home
+    </NuxtLink>
+  </UiContainer>
 
-    <UiContainer v-if="checkoutStore.modalMadeOrder">
-        <NuxtLink to="/" class="mt-6 text-blue-500 underline" @click="checkoutStore.modalMadeOrder = false">Go back home
-        </NuxtLink>
-    </UiContainer>
-
-    <UiContainer v-else>
-        <div class="xl:w-[85%] mx-auto space-25-55">
-            <div class="space-25-55">
-                <div class="w-full flex items-center sm:justify-center">
-                    <div
-                        class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
-                        <div class="sm:px-6 sm:py-3 mx-auto">
-                            {{ $t("login") }}
-                        </div>
-                        <div class="sm:px-6 sm:py-3 mx-auto">
-                            {{ $t("address") }}
-                        </div>
-                        <div
-                            class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
-                            {{ $t("summary") }}
-                        </div>
-                        <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
-                            {{ $t("order_placed") }}
-                        </div>
-                    </div>
-                </div>
+  <UiContainer v-else>
+    <div class="xl:w-[85%] mx-auto space-25-55">
+      <div class="space-25-55">
+        <div class="w-full flex items-center sm:justify-center">
+          <div
+            class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
+            <div class="sm:px-6 sm:py-3 mx-auto">
+              {{ $t("login") }}
             </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[30px]">
-                <div class="col-start-1 col-end-2 sm:col-end-3 space-y-5">
-                    <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.product_list }}</h4>
-                    <div class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-25-55">
-                        <div v-for="(item, index) in checkoutStore.products" :key="index">
-                            <div class="flex items-center h-[100px] sm:h-[150px]">
-                                <div
-                                    class="min-w-[100px] sm:min-w-[150px] flex items-center justify-center h-[100px] sm:h-[150px]">
-                                    <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
-                                        class="max-w-full max-h-full object-contain">
-                                </div>
-
-                                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
-                                    <div class="w-full flex items-center justify-between">
-                                        <h3
-                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
-                                            {{ item.name }}
-                                        </h3>
-                                    </div>
-                                    <div class="flex w-full justify-between gap-[10px]">
-                                        <p
-                                            class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                                            {{ item.total_price }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="col-start-1 col-end-2 sm:col-end-3 xl:col-auto flex flex-col sm:flex-row xl:flex-col items-center gap-[30px]">
-                    <div class="space-y-5 w-full">
-                        <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.account_address }}
-                        </h4>
-                        <div
-                            class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-sm sm:text-lg md:text-xl">
-                            <span>{{ checkoutStore.defaultAddress?.address.name }} {{
-                                checkoutStore.defaultAddress?.address.surname }}</span>
-                            <span>{{ checkoutStore.defaultAddress?.address.street }}</span>
-                            <span>{{ checkoutStore.defaultAddress?.address.postcode }} {{
-                                checkoutStore.defaultAddress?.address.city }}</span>
-                        </div>
-                    </div>
-                    <div class="flex flex-col space-y-5 w-full h-full">
-                        <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.note }}</h4>
-                        <textarea v-model="checkoutStore.vNote"
-                            class="border-2 border-block rounded-[8px] p-[15px] w-full flex-1 resize-none placeholder:text-button"
-                            name="rty" id="1" :placeholder="component.front_section_lang[0].data.note"></textarea>
-                    </div>
-                </div>
-                <div class="col-start-1 col-end-2 xl:col-end-3 space-y-5">
-                    <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.delivery_type }}</h4>
-                    <div
-                        class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-y-[25px] text-sm sm:text-lg md:text-xl">
-                        <div @click="checkoutStore.setCurrentDelivery(delivery)"
-                            v-for="delivery in checkoutStore.deliveryOption" class="flex flex-col cursor-pointer">
-                            <div class="flex items-end justify-between">
-                                <div class="flex gap-[15px]">
-                                    <div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
-                                        <div v-if="checkoutStore.currentDelivery === delivery"
-                                            class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
-                                        </div>
-                                    </div>
-                                    <div class="flex flex-col">
-                                        <span>{{ delivery.delivery_supplier_name }}</span>
-                                        <span>{{ delivery.country_name }}</span>
-                                    </div>
-                                </div>
-                                <p class="font-inter text-lg sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                                    {{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="space-y-5 w-full flex flex-col h-full">
-                    <h4 class="h4-uppercase-bold-inter">{{ component.front_section_lang[0].data.payment_method }}</h4>
-                    <div
-                        class="border-2 border-block rounded-[8px] px-[25px] py-[25px] sm:py-[15px] flex-1 flex flex-col gap-1 text-sm sm:text-xl overflow-auto">
-                        <UCarousel :prevIcon="'i-lucide-chevron-left'" :nextIcon="'i-lucide-chevron-right'" :ui="{
-                            viewport: 'h-full w-full',
-                            container: 'h-full w-full',
-                            item: 'h-full w-full pl-7',
-                            prev: '-start-8 sm:-start-12 ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
-                            next: '-end-8 sm:-end-12 ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
-                            arrows: ''
-                        }" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
-                            class="relative sm:max-w-full mx-4 sm:mx-10 h-full">
-                            <template #default="{ item }">
-                                <div
-                                    class="flex flex-col items-start justify-between h-full leading-[250%] sm:leading-[150%]">
-                                    <span>{{ item.bank_name }}</span>
-                                    <span>{{ item.country_name }}</span>
-                                    <span>{{ item.street_and_number }}</span>
-                                    <span>{{ item.iban }}</span>
-                                    <span>{{ item.swift }}</span>
-                                </div>
-                            </template>
-                        </UCarousel>
-                    </div>
-                </div>
+            <div class="sm:px-6 sm:py-3 mx-auto">
+              {{ $t("address") }}
             </div>
-            <div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px]">
-                <div class="flex items-center justify-between">
-                    <p class="text-sm sm:text-xl">{{ component.front_section_lang[0].data.subtotal }}</p>
-                    <p class="text-lg sm:text-xl font-medium">{{
-                        menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
-                    </p>
+            <div
+              class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
+              {{ $t("summary") }}
+            </div>
+            <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
+              {{ $t("order_placed") }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[30px]">
+        <div class="col-start-1 col-end-2 sm:col-end-3 space-y-5">
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.product_list }}
+          </h4>
+          <div class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-25-55">
+            <div v-for="(item, index) in checkoutStore.products" :key="index">
+              <div class="flex items-center h-[100px] sm:h-[150px]">
+                <div class="min-w-[100px] sm:min-w-[150px] flex items-center justify-center h-[100px] sm:h-[150px]">
+                  <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
+                       class="max-w-full max-h-full object-contain">
                 </div>
-                <div class="flex items-center justify-between">
-                    <p class="text-sm sm:text-xl">{{ component.front_section_lang[0].data.shipping_cost }}</p>
-                    <p class="text-lg sm:text-xl font-medium">{{
-                        menuStore.formatPrice(Number(checkoutStore.shippingPrice)) }}</p>
-                </div>
-                <div class="flex items-center justify-between uppercase text-lg sm:text-xl">
-                    <p>{{ component.front_section_lang[0].data.total }}</p>
+
+                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
+                  <div class="w-full flex items-center justify-between">
+                    <h3
+                      class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
+                      {{ item.name }}
+                    </h3>
+                  </div>
+                  <div class="flex w-full justify-between gap-[10px]">
                     <p
-                        class="text-accent-green-light dark:text-accent-green-dark font-inter text-xl sm:text-2xl leading-[150%] font-bold">
-                        {{ menuStore.formatPrice(Number(checkoutStore.fullPrice)) }}
+                      class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                      {{ item.total_price }}
                     </p>
+                  </div>
                 </div>
+              </div>
             </div>
-            <div class="flex flex-col sm:flex-row items-center justify-between mt-1 gap-[55px]">
-                <div class="flex flex-col gap-1 text-white w-full">
-                    <div class="flex gap-3 text-black dark:text-white items-center">
-                        <input v-model="checkoutStore.vLegal" type="checkbox" id="first" name="first" />
-                        <!-- <label for="first" class="text-sm leading-snug">
+          </div>
+        </div>
+        <div
+          class="col-start-1 col-end-2 sm:col-end-3 xl:col-auto flex flex-col sm:flex-row xl:flex-col items-center gap-[30px]">
+          <div class="space-y-5 w-full">
+            <h4 class="h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.account_address }}
+            </h4>
+            <div
+              class="border-2 border-block rounded-[8px] px-[25px] py-[15px] flex flex-col gap-1 text-sm sm:text-lg md:text-xl">
+              <span>{{ checkoutStore.defaultAddress?.address.name }} {{
+                checkoutStore.defaultAddress?.address.surname }}</span>
+              <span>{{ checkoutStore.defaultAddress?.address.street }}</span>
+              <span>{{ checkoutStore.defaultAddress?.address.postcode }} {{
+                checkoutStore.defaultAddress?.address.city }}</span>
+            </div>
+          </div>
+          <div class="flex flex-col space-y-5 w-full h-full">
+            <h4 class="h4-uppercase-bold-inter">
+              {{ component.front_section_lang[0].data.note }}
+            </h4>
+            <textarea id="1" v-model="checkoutStore.vNote"
+                      class="border-2 border-block rounded-[8px] p-[15px] w-full flex-1 resize-none placeholder:text-button"
+                      name="rty" :placeholder="component.front_section_lang[0].data.note"></textarea>
+          </div>
+        </div>
+        <div class="col-start-1 col-end-2 xl:col-end-3 space-y-5">
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.delivery_type }}
+          </h4>
+          <div
+            class="border-2 border-block rounded-[15px] p-[25px] sm:p-[50px] space-y-[25px] text-sm sm:text-lg md:text-xl">
+            <div v-for="(delivery, index) in checkoutStore.deliveryOption" :key="index"
+                 class="flex flex-col cursor-pointer" @click="checkoutStore.setCurrentDelivery(delivery)">
+              <div class="flex items-end justify-between">
+                <div class="flex gap-[15px]">
+                  <div class="mt-1 w-4 h-4 border-2 border-button rounded-full">
+                    <div v-if="checkoutStore.currentDelivery === delivery"
+                         class="w-full h-full border-3 border-bg-light dark:border-bg-dark rounded-full bg-button">
+                    </div>
+                  </div>
+                  <div class="flex flex-col">
+                    <span>{{ delivery.delivery_supplier_name }}</span>
+                    <span>{{ delivery.country_name }}</span>
+                  </div>
+                </div>
+                <p class="font-inter text-lg sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+                  {{ menuStore.formatPrice(Number(delivery.shippment_price)) }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="space-y-5 w-full flex flex-col h-full">
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.front_section_lang[0].data.payment_method }}
+          </h4>
+          <div
+            class="border-2 border-block rounded-[8px] px-[25px] py-[25px] sm:py-[15px] flex-1 flex flex-col gap-1 text-sm sm:text-xl overflow-auto">
+            <UCarousel :prev-icon="'i-lucide-chevron-left'" :next-icon="'i-lucide-chevron-right'" :ui="{
+                         viewport: 'h-full w-full',
+                         container: 'h-full w-full',
+                         item: 'h-full w-full pl-7',
+                         prev: '-start-8 sm:-start-12 ring-0 text-button disable:text-block p-0 ring-inset ring-accented bg-inherit disabled:bg-inherit',
+                         next: '-end-8 sm:-end-12 ring-0 text-button disable:text-block p-0 text-[30px] bg-inherit disabled:bg-inherit',
+                         arrows: '',
+                       }" :prev="{ size: 'xl' }" :next="{ size: 'xl' }" arrows :items="checkoutStore.paymentMethods"
+                       class="relative sm:max-w-full mx-4 sm:mx-10 h-full">
+              <template #default="{ item }">
+                <div class="flex flex-col items-start justify-between h-full leading-[250%] sm:leading-[150%]">
+                  <span>{{ item.bank_name }}</span>
+                  <span>{{ item.country_name }}</span>
+                  <span>{{ item.street_and_number }}</span>
+                  <span>{{ item.iban }}</span>
+                  <span>{{ item.swift }}</span>
+                </div>
+              </template>
+            </UCarousel>
+          </div>
+        </div>
+      </div>
+      <div class="w-full border-y-2 border-block p-[25px] flex flex-col gap-[15px]">
+        <div class="flex items-center justify-between">
+          <p class="text-sm sm:text-xl">
+            {{ component.front_section_lang[0].data.subtotal }}
+          </p>
+          <p class="text-lg sm:text-xl font-medium">
+            {{
+              menuStore.formatPrice(Number(checkoutStore.fullProductsPrice)) }}
+          </p>
+        </div>
+        <div class="flex items-center justify-between">
+          <p class="text-sm sm:text-xl">
+            {{ component.front_section_lang[0].data.shipping_cost }}
+          </p>
+          <p class="text-lg sm:text-xl font-medium">
+            {{
+              menuStore.formatPrice(Number(checkoutStore.shippingPrice)) }}
+          </p>
+        </div>
+        <div class="flex items-center justify-between uppercase text-lg sm:text-xl">
+          <p>{{ component.front_section_lang[0].data.total }}</p>
+          <p
+            class="text-accent-green-light dark:text-accent-green-dark font-inter text-xl sm:text-2xl leading-[150%] font-bold">
+            {{ menuStore.formatPrice(Number(checkoutStore.fullPrice)) }}
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-col sm:flex-row items-center justify-between mt-1 gap-[55px]">
+        <div class="flex flex-col gap-1 text-white w-full">
+          <div class="flex gap-3 text-black dark:text-white items-center">
+            <input id="first" v-model="checkoutStore.vLegal" type="checkbox" name="first" />
+            <!-- <label for="first" class="text-sm leading-snug">
                             {{ $t("I accept ") }}
                             <NuxtLink target="_blank"
                                 :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'legal_statement.html' } }"
@@ -162,15 +175,17 @@
                                 {{ $t("the legal statement*") }}
                             </NuxtLink>
                         </label> -->
-                        <p class="text-sm sm:text-lg"> {{ $t("I accept ") }} {{ $t("the legal statement*") }}</p>
-                    </div>
-                    <span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
-                        {{ $t("You need to accept this") }}
-                    </span>
+            <p class="text-sm sm:text-lg">
+              {{ $t("I accept ") }} {{ $t("the legal statement*") }}
+            </p>
+          </div>
+          <span v-if="checkoutStore.legalValidation" class="text-xs text-red-600 ml-6">
+            {{ $t("You need to accept this") }}
+          </span>
 
-                    <div class="flex gap-3 text-black dark:text-white items-center mt-2">
-                        <input v-model="checkoutStore.vTerms" type="checkbox" id="second" name="second" />
-                        <!-- <label for="second" class="text-sm leading-snug">
+          <div class="flex gap-3 text-black dark:text-white items-center mt-2">
+            <input id="second" v-model="checkoutStore.vTerms" type="checkbox" name="second" />
+            <!-- <label for="second" class="text-sm leading-snug">
                             {{ $t("I accept ") }}
                             <NuxtLink target="_blank"
                                 :to="{ name: 'lang-info-name', params: { lang: menuStore.selectedLanguage.iso_code, name: 'general_terms_and_conditions.html' } }"
@@ -178,83 +193,27 @@
                                 {{ $t("general terms and conditions*") }}
                             </NuxtLink>
                         </label> -->
-                        <p class="text-sm sm:text-lg"> {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}
-                        </p>
-                    </div>
-                    <span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
-                        {{ $t("You need to accept this") }}
-                    </span>
-                </div>
+            <p class="text-sm sm:text-lg">
+              {{ $t("I accept ") }} {{ $t("general terms and conditions*") }}
+            </p>
+          </div>
+          <span v-if="checkoutStore.termsValidation" class="text-xs text-red-600 ml-6">
+            {{ $t("You need to accept this") }}
+          </span>
+        </div>
 
-                <UiButtonArrow @click="checkoutStore.sendSummaryForm" type="fill" :arrow="true">
-                    {{ $t("Buy") }}
-                </UiButtonArrow>
-            </div>
-            <div
-                class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
-                {{ $t("summary") }}
-            </div>
-            <div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
-                {{ $t("order_placed") }}
-            </div>
-        </div>
-        </div>
-        </div>
-        <div class="grid grid-cols-3 gap-[30px]">
-            <div class="col-start-1 col-end-3 space-y-5">
-                <h4 class="h4-uppercase-bold-inter">
-                    Seznam produktů
-                </h4>
-                <div class="border-2 border-block rounded-2xl p-[50px] space-25-55">
-                    <div v-for="(item, index) in checkoutStore.products" :key="index">
-                        <div class="flex items-center h-[150px]">
-                            <div class="min-w-[150px] flex items-center justify-center h-[150px]">
-                                <img :src="`/api/public/file/${item.picture_uuid}.webp`" alt=""
-                                    class="max-w-full max-h-full object-contain">
-                            </div>
-
-                            <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
-                                <div class="w-full flex items-center justify-between">
-                                    <h3
-                                        class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
-                                        {{ item.name }}
-                                    </h3>
-                                </div>
-                                <div class="flex w-full justify-between gap-[10px]">
-                                    <p
-                                        class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-                                        {{ item.total_price }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="">
-                <div class="space-y-5">
-                    <h4 class="h4-uppercase-bold-inter">
-                        Adresa účtu
-                    </h4>
-                    <div class="border-2 border-block rounded-2xl px-2 py-3 flex flex-col gap-1">
-                        <span>{{ checkoutStore.defaultAddress?.address.name }}
-                            {{ checkoutStore.defaultAddress?.address.surname }}</span>
-                        <span>{{ checkoutStore.defaultAddress?.address.street }}</span>
-                        <span>{{ checkoutStore.defaultAddress?.address.postcode }}
-                            {{ checkoutStore.defaultAddress?.address.city }}</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        </div>
-    </UiContainer>
+        <UiButtonArrow type="fill" :arrow="true" @click="checkoutStore.sendSummaryForm">
+          {{ $t("Buy") }}
+        </UiButtonArrow>
+      </div>
+    </div>
+  </UiContainer>
 </template>
 
 <script setup lang="ts">
-import { UCarousel } from '#components';
+import { UCarousel } from '#components'
 
-const checkoutStore = useCheckoutStore();
-const productStore = useProductStore()
+const checkoutStore = useCheckoutStore()
 const menuStore = useMenuStore()
 
 checkoutStore.getOrder()
@@ -264,30 +223,30 @@ checkoutStore.getDeliveryOptions()
 checkoutStore.getDefAddress()
 
 defineProps<{
-    component: {
-        id: number
-        name: string
-        img: string[]
-        component_name: string
-        is_no_lang: boolean
-        page_name: string
-        front_section_lang: {
-            data: {
-                product_list: string
-                account_address: string
-                note: string
-                delivery_type: string
-                payment_method: string
-                subtotal: string
-                shipping_cost: string
-                total: string
-                accept: string
-                legal: string
-                terms: string
-            }
-            id_front_section: number
-            id_lang: number
-        }[]
-    }
-}>();
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        product_list: string
+        account_address: string
+        note: string
+        delivery_type: string
+        payment_method: string
+        subtotal: string
+        shipping_cost: string
+        total: string
+        accept: string
+        legal: string
+        terms: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>()
 </script>
diff --git a/components/section/LoginMain.vue b/components/section/LoginMain.vue
index 05b1ec2..68b437d 100644
--- a/components/section/LoginMain.vue
+++ b/components/section/LoginMain.vue
@@ -1,15 +1,10 @@
 <template>
-  <UiContainer v-if="!userStore.vCodeVerify"
-               class="flex py-20 sm:py-14"
-  >
-    <div
-      class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]"
-      :style="{
-        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }"
-    />
+  <UiContainer v-if="!userStore.vCodeVerify" class="flex py-20 sm:py-14">
+    <div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
+      backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+    }" />
     <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
       <div class="space-25-55">
         <div class="flex flex-wrap-reverse gap-y-4 justify-between">
@@ -18,8 +13,7 @@
           </h2>
           <button
             class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
-            @click="menuStore.navigateToItem()"
-          >
+            @click="menuStore.navigateToItem()">
             {{ $t("back_to_home") }}
           </button>
         </div>
@@ -27,37 +21,22 @@
           <p class="pl-6">
             {{ $t("email") }}
           </p>
-          <input
-            v-model="userStore.email"
-            :placeholder="$t('email')"
-            type="text"
-            class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
-          >
+          <input v-model="userStore.email" :placeholder="$t('email')" type="text"
+                 class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
         </div>
         <div class="space-y-[15px]">
           <p class="pl-6">
             {{ $t("password") }}
           </p>
-          <input
-            v-model="userStore.password"
-            :placeholder="$t('placeholder_password')"
-            type="text"
-            class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
-          >
+          <input v-model="userStore.password" :placeholder="$t('placeholder_password')" type="text"
+                 class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
         </div>
       </div>
-      <p
-        class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer"
-      >
+      <p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">
         {{ $t("forgot_password_question") }}
       </p>
-      <div
-        class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full"
-      >
-        <UiButtonArrow type="fill"
-                       :arrow="true"
-                       @click="userStore.logIn()"
-        >
+      <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
+        <UiButtonArrow type="fill" :arrow="true" @click="userStore.logIn()">
           {{
             $t("login")
           }}
@@ -74,17 +53,12 @@
     </div>
   </UiContainer>
 
-  <UiContainer v-if="userStore.vCodeVerify"
-               class="flex py-20 sm:py-14"
-  >
-    <div
-      class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]"
-      :style="{
-        backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      }"
-    />
+  <UiContainer v-if="userStore.vCodeVerify" class="flex py-20 sm:py-14">
+    <div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
+      backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+    }" />
     <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
       <div class="space-25-55">
         <div class="flex flex-wrap-reverse gap-y-4 justify-between">
@@ -93,8 +67,7 @@
           </h2>
           <button
             class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
-            @click="menuStore.navigateToItem()"
-          >
+            @click="menuStore.navigateToItem()">
             {{ $t("back_to_home") }}
           </button>
         </div>
@@ -108,21 +81,13 @@
             <p class="pl-6">
               {{ $t("code") }}
             </p>
-            <input
-              v-model="userStore.vCode"
-              :placeholder="$t('code')"
-              type="text"
-              class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
-            >
+            <input v-model="userStore.vCode" :placeholder="$t('code')" type="text"
+                   class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
           </div>
         </div>
       </div>
       <div class="py-[25px] sm:py-12 flex justify-center w-full">
-        <UiButtonArrow
-          type="fill"
-          :arrow="true"
-          @click="userStore.sendFormCode(true)"
-        >
+        <UiButtonArrow type="fill" :arrow="true" @click="userStore.sendFormCode(true)">
           {{ $t("confirm") }}
         </UiButtonArrow>
       </div>
@@ -140,7 +105,6 @@ defineProps<{
     is_no_lang: boolean
     page_name: string
     front_section_lang: {
-      data: {}
       id_front_section: number
       id_lang: number
     }[]
diff --git a/components/section/Product.vue b/components/section/Product.vue
index ecd2b79..49f42db 100644
--- a/components/section/Product.vue
+++ b/components/section/Product.vue
@@ -1,54 +1,40 @@
 <template>
   <div>
-    <nuxt-link
-      :to="{
-        name: `id-slug___${$i18n.locale}`,
-        params: {
-          id: menuStore.getProductMenu()?.id,
-          slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
-        },
-        query: {
-          prod_id: props.product?.id,
-          name: props.product?.link_rewrite,
-        },
-      }"
-    >
+    <nuxt-link :to="{
+      name: `id-slug___${$i18n.locale}`,
+      params: {
+        id: menuStore.getProductMenu()?.id,
+        slug: menuStore.getProductMenu()?.front_menu_lang.at(0)?.link_rewrite,
+      },
+      query: {
+        prod_id: product.id,
+        name: product.link_rewrite,
+      },
+    }">
       <div
-        class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px]"
-      >
-        <img
-          :src="`/api/public/file/${props.product?.cover_picture_uuid}.webp`"
-          alt="Product Image"
-          class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]"
-          onerror="this.onerror=null; this.src='/photo.svg';"
-        >
+        class="w-[150px] sm:w-[260px] md:w-[330px] px-2 py-3 sm:py-5 sm:px-[15px] bg-block rounded-2xl flex flex-col items-center gap-[15px] sm:gap-[50px] h-full">
+        <img :src="`/api/public/file/${product.cover_picture_uuid}.webp`" alt="Product Image"
+             class="h-[95px] sm:h-[180px] md:h-[205px] rounded-[5px]" @error="handleImageError" />
 
-        <div
-          class="flex flex-col justify-between h-full w-full gap-[7px] sSm:gap-[15px]"
-        >
+        <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px]">
           <div class="flex flex-col gap-[7px] sm:gap-[15px] w-full">
             <h3
-              class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark"
-            >
-              {{ props.product?.name }}
+              class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] text-bg-dark">
+              {{ product.name }}
             </h3>
             <p class="text-[9px] sm:text-[12px] text-sm text-bg-dark">
-              {{ props.product?.tax_name }}
+              {{ product.tax_name }}
             </p>
           </div>
           <div class="flex items-center justify-between">
             <p
-              class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold"
-            >
-              {{ props.product?.formatted_price }}
+              class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+              {{ product.formatted_price }}
             </p>
             <button
               class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"
-              @click.self="productStore.incrementCartItem(props.product?.id)"
-            >
-              <i
-                class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"
-              />
+              @click.stop.prevent="productStore.incrementCartItem(product.id)">
+              <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px]" />
             </button>
           </div>
         </div>
@@ -58,17 +44,22 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  product: Object,
-})
+interface Product {
+  id: number
+  name: string
+  link_rewrite: string
+  tax_name: string
+  formatted_price: string
+  cover_picture_uuid: string
+}
+
+defineProps<{ product: Product }>()
 
 const productStore = useProductStore()
 const menuStore = useMenuStore()
 
-const isError = ref(false);
-
 function handleImageError(event: Event) {
-  isError.value = true;
-  (event.target as HTMLImageElement).src = '/photo.svg';
+  const img = event.target as HTMLImageElement
+  img.src = '/photo.svg'
 }
 </script>
diff --git a/components/section/ProductBlock.vue b/components/section/ProductBlock.vue
index 2486f2b..06e967b 100644
--- a/components/section/ProductBlock.vue
+++ b/components/section/ProductBlock.vue
@@ -248,17 +248,6 @@ const goRight = () => {
     curImage.value = product.value.picture_uuids[0]
   }
 }
-
-/**
- * INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','product','0','13');
- * INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','13','0','0','13');
- * INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('Product','2','13','product');
- * INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('produkt','13','1','Produkt');
- * INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('Produkt','3','13','produkt');
- * INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('32','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','product','[]','ProductBlock','1');
- * INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('13','1','32');
- * INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('13','2','4');
- */
 </script>
 
 <style>
diff --git a/components/section/ShopMain.vue b/components/section/ShopMain.vue
index da0ae09..fcfd168 100644
--- a/components/section/ShopMain.vue
+++ b/components/section/ShopMain.vue
@@ -8,89 +8,50 @@
       <div class="xl:hidden flex items-center w-full">
         <button
           class="h-[40px] w-full cursor-pointer rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover"
-          @click="openCategories = !openCategories"
-        >
+          @click="openCategories = !openCategories">
           Otevřené kategorie a filtry
         </button>
       </div>
 
       <Transition>
-        <div v-if="openCategories"
-             class="min-w-[250px] px-5 sm:p-0 xl:hidden"
-        >
-          <h1
-            class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]"
-          >
+        <div v-if="openCategories" class="min-w-[250px] px-5 sm:p-0 xl:hidden">
+          <h1 class="font-bounded leading-[140%] font-bold text-[24px] mb-[25px]">
             {{ $t("category") }}
           </h1>
           <div class="flex flex-col gap-[25px]">
             <div>
-              <div
-                v-if="categoriesList && categoriesList.length < 1"
-                class="animate-pulse"
-              >
-                <div
-                  class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
-                >
+              <div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
+                <div class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
                   <div class="w-32 h-4 bg-gray-200 rounded" />
                   <div class="w-4 h-4 bg-gray-200 rounded-full" />
                 </div>
               </div>
-              <CategoryTree
-                :data="categoriesList"
-                :active="categoryId"
-                @change-category="changeCategory($event)"
-              />
+              <CategoryTree :data="categoriesList" :active="categoryId" @change-category="changeCategory($event)" />
             </div>
             <div>
-              <p
-                class="mb-[25px] text-lg font-extrabold text-black dark:text-white"
-              >
+              <p class="mb-[25px] text-lg font-extrabold text-black dark:text-white">
                 {{ $t("filtered_by") }}
               </p>
 
-              <div
-                v-for="(item, itemIndex) in filters"
-                :key="itemIndex"
-                :class="[
-                  'mb-[30px]',
-                  visibleFeatures[item.feature] && 'border-b border-block pb-2',
-                ]"
-              >
-                <span
-                  class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
-                  @click="toggleFeature(item.feature)"
-                >
+              <div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="[
+                'mb-[30px]',
+                visibleFeatures[item.feature] && 'border-b border-block pb-2',
+              ]">
+                <span class="flex justify-between items-center font-bold cursor-pointer mb-[25px] text-base"
+                      @click="toggleFeature(item.feature)">
                   {{ item.feature }}
-                  <span
-                    :class="[
-                      visibleFeatures[item.feature] && 'rotate-180',
-                      'transition-all',
-                    ]"
-                  ><i
-                    class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
-                  /></span>
+                  <span :class="[
+                    visibleFeatures[item.feature] && 'rotate-180',
+                    'transition-all',
+                  ]"><i class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto" /></span>
                 </span>
-                <ul
-                  v-show="visibleFeatures[item.feature]"
-                  class="flex flex-col gap-5"
-                >
-                  <li
-                    v-for="filter in item.feature_values"
-                    :key="filter.value_id"
-                    class="flex items-center gap-[10px] cursor-pointer"
-                  >
-                    <input
-                      :id="`${filter.value_id}`"
-                      v-model="selectedFilters"
-                      :value="`${filter.parent}.${filter.value_id}`"
-                      type="checkbox"
-                      class="border-button !bg-inherit"
-                    >
-                    <label
-                      :for="`${filter.value_id}`"
-                      class="cursor-pointer flex items-center justify-between w-full text-base"
-                    >
+                <ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
+                  <li v-for="filter in item.feature_values" :key="filter.value_id"
+                      class="flex items-center gap-[10px] cursor-pointer">
+                    <input :id="`${filter.value_id}`" v-model="selectedFilters"
+                           :value="`${filter.parent}.${filter.value_id}`" type="checkbox" class="border-button !bg-inherit">
+                    <label :for="`${filter.value_id}`"
+                           class="cursor-pointer flex items-center justify-between w-full text-base">
                       <span>{{ filter.value }}</span>
                       <span>12</span>
                     </label>
@@ -109,22 +70,13 @@
         </h1>
         <div class="flex flex-col gap-12">
           <div>
-            <div
-              v-if="categoriesList && categoriesList.length < 1"
-              class="animate-pulse"
-            >
-              <div
-                class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24"
-              >
+            <div v-if="categoriesList && categoriesList.length < 1" class="animate-pulse">
+              <div class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
                 <div class="w-32 h-4 bg-gray-200 rounded" />
                 <div class="w-4 h-4 bg-gray-200 rounded-full" />
               </div>
             </div>
-            <CategoryTree
-              :data="categoriesList"
-              :active="categoryId"
-              @change-category="changeCategory($event)"
-            />
+            <CategoryTree :data="categoriesList" :active="categoryId" @change-category="changeCategory($event)" />
           </div>
           <div>
             <p class="mb-10 text-2xl font-extrabold text-black dark:text-white">
@@ -139,52 +91,28 @@
                             </div>
                         </div> -->
 
-            <div
-              v-for="(item, itemIndex) in filters"
-              :key="itemIndex"
-              :class="[
-                'mb-[30px]',
-                visibleFeatures[item.feature] && 'border-b border-block pb-2',
-              ]"
-            >
-              <span
-                class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
-                @click="toggleFeature(item.feature)"
-              >
+            <div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="[
+              'mb-[30px]',
+              visibleFeatures[item.feature] && 'border-b border-block pb-2',
+            ]">
+              <span class="flex justify-between items-center font-bold cursor-pointer mb-[25px]"
+                    @click="toggleFeature(item.feature)">
                 {{ item.feature }}
-                <span
-                  :class="[
-                    visibleFeatures[item.feature] && 'rotate-180',
-                    'transition-all',
-                  ]"
-                ><i
-                  class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto"
-                /></span>
+                <span :class="[
+                  visibleFeatures[item.feature] && 'rotate-180',
+                  'transition-all',
+                ]"><i class="iconify i-lucide:chevron-down text-button shrink-0 size-6 ms-auto" /></span>
               </span>
-              <ul
-                v-show="visibleFeatures[item.feature]"
-                class="flex flex-col gap-5"
-              >
-                <li
-                  v-for="filter in item.feature_values"
-                  :key="filter.value_id"
-                  class="flex items-center gap-[10px] cursor-pointer"
-                >
+              <ul v-show="visibleFeatures[item.feature]" class="flex flex-col gap-5">
+                <li v-for="filter in item.feature_values" :key="filter.value_id"
+                    class="flex items-center gap-[10px] cursor-pointer">
                   <!-- <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
                                         v-model="selectedFilters" type="checkbox" class="border-button !bg-inherit" />
                                     <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label> -->
 
-                  <input
-                    :id="`${filter.value_id}`"
-                    v-model="selectedFilters"
-                    :value="`${filter.parent}.${filter.value_id}`"
-                    type="checkbox"
-                    class="border-button !bg-inherit"
-                  >
-                  <label
-                    :for="`${filter.value_id}`"
-                    class="cursor-pointer flex items-center justify-between w-full"
-                  >
+                  <input :id="`${filter.value_id}`" v-model="selectedFilters"
+                         :value="`${filter.parent}.${filter.value_id}`" type="checkbox" class="border-button !bg-inherit">
+                  <label :for="`${filter.value_id}`" class="cursor-pointer flex items-center justify-between w-full">
                     <span>{{ filter.value }}</span>
                     <span>12</span>
                   </label>
@@ -197,57 +125,33 @@
 
       <div class="w-full space-y-10">
         <!-- pop-up -->
-        <div
-          v-if="isInfo"
-          class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative"
-        >
-          <UButton
-            variant="ghost"
-            class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover"
-            size="xl"
-            icon="i-lucide-x"
-            @click="closeElement()"
-          />
+        <div v-if="isInfo"
+             class="w-full xl:w-[70%] mx-auto border-y border-block py-[15px] sm:p-[30px] flex gap-[55px] relative">
+          <UButton variant="ghost"
+                   class="p-0 absolute right-0 top-2 sm:right-2 sm:top-2 cursor-pointer text-button font-light hover:bg-inherit hover:text-button-hover"
+                   size="xl" icon="i-lucide-x" @click="closeElement()" />
 
           <div class="flex flex-col sm:flex-row gap-[25px]">
             <div class="flex flex-col justify-between gap-[25px]">
-              <h4
-                class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold"
-              >
+              <h4 class="font-inter text-lg sm:text-[24px] leading-[150%] md:leading-[120%] font-bold">
                 {{ component.front_section_lang[0].data.title }}
               </h4>
               <p>{{ component.front_section_lang[0].data.description }}</p>
             </div>
-            <img
-              class="max-w-[150px] mx-auto"
-              :src="`/api/public/file/${component.img[0]}_m.webp')`"
-            >
+            <img class="max-w-[150px] mx-auto" :src="`/api/public/file/${component.img[0]}_m.webp')`">
           </div>
         </div>
 
-        <div
-          v-if="products.length < 1"
-          class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3"
-        >
+        <div v-if="products.length < 1" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
           <!-- <TheProductSkeleton v-for="index in 6" :key="index" /> -->
         </div>
 
         <!-- products -->
-        <div
-          v-else
-          ref="loadingElement"
-          class="flex flex-wrap justify-center gap-5 sm:gap-10"
-        >
-          <Product
-            v-for="product in products"
-            :key="product.id"
-            :product="product"
-          />
+        <div v-else ref="loadingElement" class="flex flex-wrap justify-center gap-5 sm:gap-10">
+          <Product v-for="product in products" :key="product.id" :product="product" />
         </div>
 
-        <div v-if="reachedEnd"
-             class="w-full flex justify-center"
-        >
+        <div v-if="reachedEnd" class="w-full flex justify-center">
           <p>
             {{ $t("FrontTranslations", "You reached end of the list.") }}
           </p>
@@ -297,7 +201,7 @@ defineProps<{
 
 const openCategories = ref(false)
 const isInfo = ref<boolean>(true)
-const selectedFilters = ref<any>([])
+const selectedFilters = ref<string[]>([])
 const categoryId = ref<number>(1)
 
 const loading = ref(false)
@@ -482,7 +386,12 @@ async function loadMoreProducts() {
   }
 }
 
-const changeCategory = (item: any) => {
+interface CategoryItem {
+  id: number
+  name: string
+}
+
+const changeCategory = (item: CategoryItem) => {
   categoryId.value = item.id
 }
 
diff --git a/stores/checkoutStore.ts b/stores/checkoutStore.ts
index f8462a3..88788a8 100644
--- a/stores/checkoutStore.ts
+++ b/stores/checkoutStore.ts
@@ -1,26 +1,25 @@
-import type { GenericResponse, GenericResponseItems, UserCart } from "~/types";
+import { validation } from '../utils/validation'
+import { REGEX_PHONE } from '../utils/regex'
+import type { GenericResponse, GenericResponseItems, UserCart } from '~/types'
 import type {
-  Address,
   AddressesList,
   CheckoutOrder,
   Payment,
   UserAddressOfficial,
-} from "~/types/checkout";
-import { validation } from "../utils/validation";
-import { REGEX_PHONE } from "../utils/regex";
-import type { CartProduct } from "~/types/product";
+} from '~/types/checkout'
+import type { CartProduct } from '~/types/product'
 
-export const useCheckoutStore = defineStore("checkoutStore", () => {
-  const { $toast } = useNuxtApp();
-  const menuStore = useMenuStore();
+export const useCheckoutStore = defineStore('checkoutStore', () => {
+  const { $toast } = useNuxtApp()
+  const menuStore = useMenuStore()
 
-  const selectedIso = ref(menuStore.selectedCountry);
+  const selectedIso = ref(menuStore.selectedCountry)
 
-  const vLegal = ref(false);
-  const vTerms = ref(false);
-  const vNote = ref("");
-  const legalValidation = ref(false);
-  const termsValidation = ref(false);
+  const vLegal = ref(false)
+  const vTerms = ref(false)
+  const vNote = ref('')
+  const legalValidation = ref(false)
+  const termsValidation = ref(false)
 
   // get address list
   const addressesList = ref<AddressesList[]>()
@@ -154,7 +153,7 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
   const phoneValidation = ref<boolean | null>(null)
 
   // send checkout form
-  const userStore = useUserStore();
+  const userStore = useUserStore()
   async function sendForm() {
     const phoneNum = vUseAccountPhoneNumber.value
       ? accountPhoneNumber.value
@@ -197,18 +196,19 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
         },
       )
 
-      console.log(res);
+      console.log(res)
 
       if (res.status === 200) {
         $toast.success('Form successfully sent', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
+        })
         menuStore.navigateToItem(
-          menuStore.menuItems?.find((item) => item.id === 13)
-        );
-      } else {
-        $toast.error("Failed to send form. Please try again.", {
+          menuStore.menuItems?.find(item => item.id === 13),
+        )
+      }
+      else {
+        $toast.error('Failed to send form. Please try again.', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
         })
@@ -219,10 +219,6 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     }
   }
 
-  const changeActive = (item: any) => {
-    activeAddress.value = item
-  }
-
   // get checkout
   async function getCheckout() {
     try {
@@ -279,99 +275,80 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
   }
 
   // get delivery options
-  const deliveryOption = ref()
-  const currentDelivery = ref()
-  const shippingPrice = ref()
+  interface DeliveryOptionItem {
+    country_iso: string
+    country_name: string
+    delivery_supplier_id: number
+    delivery_supplier_name: string
+    id: number
+    shippment_price: string
+  }
+
+  const deliveryOption = ref<DeliveryOptionItem[]>([])
+  const currentDelivery = ref<DeliveryOptionItem | null>(null)
+  const shippingPrice = ref<number>(0)
+
   async function getDeliveryOptions() {
     try {
-      const res = await useMyFetch<
-        GenericResponseItems<object>
-        // {
-        //   items: [
-        //     {
-        //       country_iso: string;
-        //       country_name: string;
-        //       delivery_supplier_id: number;
-        //       delivery_supplier_name: string;
-        //       id: number;
-        //       shippment_price: string;
-        //     }
-        //   ];
-        // }
-      >(`/api/restricted/cart/checkout/delivery-options`, {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        onErrorOccured: async (_, status) => {
-          throw createError({
-            statusCode: status,
-            statusMessage: `HTTP error: ${status}`,
-          })
-        },
-      })
-
-      const data = {
-        items: [
-          {
-            id: 31,
-            shippment_price: "2",
-            delivery_supplier_id: 4,
-            delivery_supplier_name: "Personal collection",
-            country_iso: "pl",
-            country_name: "Poland",
+      const { data } = await useMyFetch<GenericResponseItems<DeliveryOptionItem[]>>(
+        `/api/restricted/cart/checkout/delivery-options`,
+        {
+          headers: {
+            'Content-Type': 'application/json',
           },
-          {
-            id: 34,
-            shippment_price: "20",
-            delivery_supplier_id: 1,
-            delivery_supplier_name: "Ceska Posta",
-            country_iso: "pl",
-            country_name: "Poland",
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            })
           },
-        ],
-        items_count: 2,
-      };
+        },
+      )
 
-      deliveryOption.value = data.items;
-      currentDelivery.value = data.items[0];
-      shippingPrice.value = data.items[0].shippment_price;
-      fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value);
-    } catch (error) {
-      console.error("getUserCart error:", error);
+      if (data.items && data.items.length > 0) {
+        deliveryOption.value = data.items
+        currentDelivery.value = data.items[0]
+        shippingPrice.value = Number(data.items[0].shippment_price)
+        fullPrice.value += shippingPrice.value
+      }
+    }
+    catch (error) {
+      console.error('getDeliveryOptions error:', error)
     }
   }
 
-  const setCurrentDelivery = (item: any) => {
-    shippingPrice.value = item.shippment_price;
-    currentDelivery.value = item;
-    fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value);
-  };
+  const setCurrentDelivery = (item: DeliveryOptionItem) => {
+    shippingPrice.value = Number(item.shippment_price)
+    currentDelivery.value = item
+    fullPrice.value = Number(fullPrice.value) + Number(shippingPrice.value)
+  }
+
+  interface Address {
+    is_default: boolean | string
+    country_iso: string
+  }
+
+  const defaultAddress = ref<Address | undefined>()
 
-  const defaultAddress = ref();
   async function getDefAddress() {
     try {
-      const { data } = await useMyFetch<
-        GenericResponse<{
-          addresses: [
-            {
-              is_default: string
-            },
-          ]
-        }>
-      >(`/api/public/user`, {
-        headers: {
-          'Content-Type': 'application/json',
+      const { data } = await useMyFetch<GenericResponse<{ addresses: Address[] }>>(
+        `/api/public/user`,
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          onErrorOccured: async (_, status) => {
+            throw createError({
+              statusCode: status,
+              statusMessage: `HTTP error: ${status}`,
+            })
+          },
         },
-        onErrorOccured: async (_, status) => {
-          throw createError({
-            statusCode: status,
-            statusMessage: `HTTP error: ${status}`,
-          })
-        },
-      })
+      )
 
       defaultAddress.value = data.addresses.find(
-        (el: any) => el.is_default === true,
+        el => el.is_default === true || el.is_default === 'true',
       )
     }
     catch (error) {
@@ -380,30 +357,31 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
   }
 
   // get bank data
-  const paymentMethods = ref([] as Payment[]);
-  const fullAddress = ref<Address>();
-  const currentPayment = ref<Payment | null>();
+  const paymentMethods = ref([] as Payment[])
+  const fullAddress = ref<Address>()
+  const currentPayment = ref<Payment | null>()
   async function getBankAccount() {
     try {
       const { data } = await useMyFetch<GenericResponse<Payment[]>>(
         `/api/restricted/suitable-bank-accounts/${menuStore.selectedCurrency.iso_code}/${fullAddress.value?.country_iso}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: async (_, status) => {
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
+        },
+      )
 
-      paymentMethods.value = data;
-      currentPayment.value = data[0];
-    } catch (error) {
-      console.error("getUserCart error:", error);
+      paymentMethods.value = data
+      currentPayment.value = data[0]
+    }
+    catch (error) {
+      console.error('getUserCart error:', error)
     }
   }
 
@@ -414,131 +392,132 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
         `/api/restricted/cart/checkout/order`,
         {
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: async (_, status) => {
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
+        },
+      )
 
-      fullAddress.value = data.delivery_details.address;
-      console.log(fullAddress.value);
-    } catch (error) {
-      console.error("getOrder error:", error);
+      fullAddress.value = data.delivery_details.address
+    }
+    catch (error) {
+      console.error('getOrder error:', error)
     }
   }
 
   async function setNewAddress(indexItem: number) {
     currentPayment.value = paymentMethods.value.find(
-      (item, index) => indexItem === index
-    );
+      (item, index) => indexItem === index,
+    )
   }
 
   // send summary form
   async function sendSummaryForm() {
-    vLegal.value
-      ? (legalValidation.value = false)
-      : (legalValidation.value = true);
-    vTerms.value
-      ? (termsValidation.value = false)
-      : (termsValidation.value = true);
+    legalValidation.value = !vLegal.value
+    termsValidation.value = !vTerms.value
+
     if (!vTerms.value && !vLegal.value) {
-      return;
+      return
     }
 
     try {
       await useMyFetch<GenericResponse<object>>(
         `/api/restricted/cart/checkout/delivery`,
         {
-          method: "PUT",
+          method: 'PUT',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
             accept_general_conditions: true,
             accept_long_purchase: true,
             address: fullAddress.value,
-            delivery_option_id: currentDelivery.value.id,
+            delivery_option_id: currentDelivery.value?.id,
             note: vNote.value,
           }),
           onErrorOccured: async (_, status) => {
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
+        },
+      )
 
-      await putCheckoutBankAccount();
-      await markOrder();
-      await getUserCart();
-    } catch (error) {
-      console.error("uploadAddress error:", error);
+      await putCheckoutBankAccount()
+      await markOrder()
+      await getUserCart()
+    }
+    catch (error) {
+      console.error('uploadAddress error:', error)
     }
   }
 
   // put checkout bank-account
   async function putCheckoutBankAccount() {
     try {
-      const res = await useMyFetch<GenericResponse<object>>(
+      await useMyFetch<GenericResponse<object>>(
         `/api/restricted/cart/checkout/bank-account/${currentPayment.value?.id}`,
         {
-          method: "PUT",
+          method: 'PUT',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: async (_, status) => {
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
-    } catch (error) {
-      console.error("uploadAddress error:", error);
+        },
+      )
+    }
+    catch (error) {
+      console.error('uploadAddress error:', error)
     }
   }
 
-  const modalMadeOrder = ref(false);
+  const modalMadeOrder = ref(false)
   async function markOrder() {
     try {
       const res = await useMyFetch<GenericResponse<object>>(
         `/api/restricted/cart/checkout/order`,
         {
-          method: "POST",
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: async (_, status) => {
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
+        },
+      )
 
       if (res.status === 200 || res.status === 201) {
-        $toast.success("Address successfully added", {
+        $toast.success('Address successfully added', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
-        modalMadeOrder.value = true;
-      } else {
-        $toast.error("Failed to add address. Please try again.", {
+        })
+        modalMadeOrder.value = true
+      }
+      else {
+        $toast.error('Failed to add address. Please try again.', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
+        })
       }
       // window.location.href = `/golden-panel/my-purchases/${res._data?.data.id}`;
-    } catch (error) {
-      console.error("uploadAddress error:", error);
+    }
+    catch (error) {
+      console.error('uploadAddress error:', error)
     }
   }
   return {
@@ -575,6 +554,7 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     defaultAddress,
     paymentMethods,
     currentPayment,
+    fullAddress,
 
     vLegal,
     vTerms,
@@ -587,7 +567,6 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     getCheckout,
     getAddressList,
     getUserData,
-    changeActive,
     uploadAddress,
     sendForm,
     getUserCart,
@@ -598,5 +577,5 @@ export const useCheckoutStore = defineStore("checkoutStore", () => {
     getOrder,
     setNewAddress,
     sendSummaryForm,
-  };
-});
+  }
+})
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index aef0538..53a41bf 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -1,4 +1,4 @@
-import { useStore } from "./store";
+import { useStore } from './store'
 import type {
   Country,
   Currency,
@@ -7,78 +7,78 @@ import type {
   GenericResponseItems,
   Language,
   UIFrontMenu,
-} from "~/types";
-import { useMyFetch } from "#imports";
+} from '~/types'
+import { useMyFetch } from '#imports'
 
 function buildTreeRecursive(
   data: (FrontMenu | UIFrontMenu)[],
-  parentId: number
+  parentId: number,
 ): UIFrontMenu[] {
   const children = data.filter(
     (item): item is UIFrontMenu =>
-      item.id_parent === parentId && !item.is_default
-  );
+      item.id_parent === parentId && !item.is_default,
+  )
 
-  return children.map((item) => ({
+  return children.map(item => ({
     ...item,
     children: buildTreeRecursive(data, item.id),
-  }));
+  }))
 }
 
-export const useMenuStore = defineStore("menuStore", () => {
-  const store = useStore();
-  const { $i18n } = useNuxtApp();
+export const useMenuStore = defineStore('menuStore', () => {
+  const store = useStore()
+  const { $i18n } = useNuxtApp()
   // const session = useSession();
-  const { $session } = useNuxtApp();
-  const router = useRouter();
-  const route = useRoute();
+  const { $session } = useNuxtApp()
+  const router = useRouter()
+  const route = useRoute()
 
-  const openMenu = ref(false);
-  const openDropDown = ref(false);
+  const openMenu = ref(false)
+  const openDropDown = ref(false)
 
-  const defaultMenu = ref();
+  const defaultMenu = ref()
 
-  const menu = ref([] as UIFrontMenu[]);
-  const menuItems = ref([] as FrontMenu[]);
+  const menu = ref([] as UIFrontMenu[])
+  const menuItems = ref([] as FrontMenu[])
 
   // curr/country
-  const selectedCountry = ref({} as Country);
-  const selectedPhoneCountry = ref({} as Country);
-  const selectedCurrency = ref({} as Currency);
-  const selectedLanguage = ref({} as Language);
+  const selectedCountry = ref({} as Country)
+  const selectedPhoneCountry = ref({} as Country)
+  const selectedCurrency = ref({} as Currency)
+  const selectedLanguage = ref({} as Language)
 
-  const countries = ref([] as Country[]);
-  const currencies = ref([] as Currency[]);
-  const languages = ref([] as Language[]);
+  const countries = ref([] as Country[])
+  const currencies = ref([] as Currency[])
+  const languages = ref([] as Language[])
 
   const getLocales = async () => {
     const { data: countriesList } = await useMyFetch<
       GenericResponse<Country[]>
-    >(`/api/public/country/list`);
-    countries.value = countriesList;
+    >(`/api/public/country/list`)
+    countries.value = countriesList
     selectedCountry.value = countriesList.find(
-      (country) => country.iso_code === $session.currentCountryIso.value
-    ) as Country;
+      country => country.iso_code === $session.currentCountryIso.value,
+    ) as Country
     selectedPhoneCountry.value = countriesList.find(
-      (country) => country.iso_code === $session.currentCountryIso.value
-    ) as Country;
+      country => country.iso_code === $session.currentCountryIso.value,
+    ) as Country
 
     const { data: currenciesList } = await useMyFetch<
       GenericResponseItems<Currency[]>
-    >(`/api/public/currencies`);
-    currencies.value = currenciesList.items;
+    >(`/api/public/currencies`)
+    currencies.value = currenciesList.items
     selectedCurrency.value = currenciesList.items.find(
-      (currency) => currency.iso_code === $session.currentCurrencyIso.value
-    ) as Currency;
+      currency => currency.iso_code === $session.currentCurrencyIso.value,
+    ) as Currency
 
     const { data: languagesList } = await useMyFetch<
       GenericResponseItems<Language[]>
-    >(`/api/public/languages`);
-    languages.value = languagesList.items;
+    >(`/api/public/languages`)
+    languages.value = languagesList.items
     selectedLanguage.value = languagesList.items.find(
-      (language) => language.iso_code === $session.currentLanguageIso.value
-    ) as Language;
-  };
+      language => language.iso_code === $session.currentLanguageIso.value,
+    ) as Language
+  }
 
   const loadMenu = async () => {
     try {
@@ -86,81 +86,84 @@ export const useMenuStore = defineStore("menuStore", () => {
         `/api/public/front/menu`,
         {
           onErrorOccured: (err, status) => {
-            console.log(err, status);
+            console.log(err, status)
           },
-        }
-      );
+        },
+      )
 
-      menuItems.value = data;
+      menuItems.value = data
 
-      const root = data.find((item) => item.is_root) as UIFrontMenu;
-      defaultMenu.value = data.find((item) => item.is_default);
+      const root = data.find(item => item.is_root) as UIFrontMenu
+      defaultMenu.value = data.find(item => item.is_default)
       if (root) {
-        menu.value = buildTreeRecursive(data, root.id);
-      } else {
-        console.warn("Root menu item not found");
-        menu.value = [];
+        menu.value = buildTreeRecursive(data, root.id)
+      }
+      else {
+        console.warn('Root menu item not found')
+        menu.value = []
       }
-    } catch (error) {
-      console.log(error);
     }
-  };
+    catch (error) {
+      console.log(error)
+    }
+  }
 
   const navigateToItem = (item?: UIFrontMenu) => {
     if (item) {
       router.push({
         params: { slug: item.front_menu_lang[0].link_rewrite, id: item.id },
         name: `id-slug___${$i18n.locale.value}`,
-      });
-      openDropDown.value = false;
-    } else {
+      })
+      openDropDown.value = false
+    }
+    else {
       router.push({
         params: {
           slug: defaultMenu.value.front_menu_lang[0].link_rewrite,
           id: defaultMenu.value.id,
         },
         name: `id-slug___${$i18n.locale.value}`,
-      });
+      })
     }
-  };
+  }
 
   function navigateToShop() {
-    navigateToItem(menuItems.value?.find((item) => item.id === 5));
+    navigateToItem(menuItems.value?.find(item => item.id === 5))
   }
 
   function getProductMenu() {
-    return menuItems.value?.find((item) => item.id === 13);
+    return menuItems.value?.find(item => item.id === 14)
   }
 
-  const getFirstImage = (size: "l" | "m" | "s" = "m", needbaseurl: boolean) => {
-    const req = useRequestEvent();
-    const url = useRequestURL();
+  const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
+    const req = useRequestEvent()
+    const url = useRequestURL()
     // let img = "";
-    const img: string[] = [];
+    const img: string[] = []
     for (const s in store.components) {
-      if (store.components[s].front_section.img.length === 0) continue;
+      if (store.components[s].front_section.img.length === 0) continue
       img.push(
-        `/api/public/file/${store.components[s].front_section.img[0]}_${size}.webp`
-      );
-      if (img.length > 0) break;
+        `/api/public/file/${store.components[s].front_section.img[0]}_${size}.webp`,
+      )
+      if (img.length > 0) break
     }
     if (img.length > 0) {
       if (needbaseurl) {
-        return `${req?.headers.get("x-forwarded-proto") || url.protocol}://${
-          req?.headers.get("x-forwarded-host") ||
-          url.host ||
-          req?.headers.get("host")
-        }${img[0]}`;
+        return `${req?.headers.get('x-forwarded-proto') || url.protocol}://${
+          req?.headers.get('x-forwarded-host')
+          || url.host
+          || req?.headers.get('host')
+        }${img[0]}`
       }
-      return img[0];
+      return img[0]
     }
-    return "";
-  };
+    return ''
+  }
 
   const headMeta = computed(() => {
     const item = menuItems.value?.find(
-      (item) => item.id.toString() === route.params.id
-    );
+      item => item.id.toString() === route.params.id,
+    )
 
     const meta = {
       title: item?.front_menu_lang[0].meta_title,
@@ -169,77 +172,77 @@ export const useMenuStore = defineStore("menuStore", () => {
       },
       link: [
         // { rel: "manifest", href: "/api/manifest.json" }
-        { rel: "icon", type: "image/x-icon", href: "/favicon.png" },
+        { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
       ],
       script: [
         {
-          src: "https://leiadmin.com/leitag.js?lei=894500UT83EISNNA8D04&color=dark",
+          src: 'https://leiadmin.com/leitag.js?lei=894500UT83EISNNA8D04&color=dark',
           defer: true,
         },
       ],
       meta: [
         {
-          hid: "description",
-          name: "description",
+          hid: 'description',
+          name: 'description',
           content: item?.front_menu_lang[0].meta_description,
         },
         {
-          property: "og:title",
+          property: 'og:title',
           content: item?.front_menu_lang[0].meta_title,
         },
         {
-          property: "og:description",
+          property: 'og:description',
           content: item?.front_menu_lang[0].meta_description,
         },
         {
-          property: "og:image",
-          content: getFirstImage("m", true),
+          property: 'og:image',
+          content: getFirstImage('m', true),
         },
         {
-          property: "twitter:title",
+          property: 'twitter:title',
           content: item?.front_menu_lang[0].meta_title,
         },
         {
-          property: "twitter:description",
+          property: 'twitter:description',
           content: item?.front_menu_lang[0].meta_description,
         },
         {
-          property: "twitter:image",
-          content: getFirstImage("m", true),
+          property: 'twitter:image',
+          content: getFirstImage('m', true),
         },
       ],
-    };
-
-    const preload = getFirstImage("l", false);
-    if (preload) {
-      meta.link.push({ rel: "preload", as: "image", href: preload } as never);
     }
 
-    return meta;
-  });
+    const preload = getFirstImage('l', false)
+    if (preload) {
+      meta.link.push({ rel: 'preload', as: 'image', href: preload } as never)
+    }
+
+    return meta
+  })
 
   const formatPrice = (value: number): string => {
     return value.toLocaleString(selectedLanguage.value.iso_code, {
       minimumFractionDigits: selectedCurrency.value.precision,
       maximumFractionDigits: selectedCurrency.value.precision,
       currency: selectedCurrency.value.iso_code,
-      style: "currency",
-      currencyDisplay: "symbol",
-      currencySign: "accounting",
-    });
-  };
+      style: 'currency',
+      currencyDisplay: 'symbol',
+      currencySign: 'accounting',
+    })
+  }
 
   // watches
   watch(
     () => $session.cookieData,
     async () => {
-      await getLocales();
-      await loadMenu();
-      await store.getMinValue();
-      await store.getCalculator();
+      await getLocales()
+      await loadMenu()
+      await store.getMinValue()
+      await store.getCalculator()
     },
-    { deep: true }
-  );
+    { deep: true },
+  )
 
   return {
     menu,
@@ -261,5 +264,6 @@ export const useMenuStore = defineStore("menuStore", () => {
     navigateToItem,
     getLocales,
     getProductMenu,
-  };
-});
+    formatPrice,
+  }
+})
diff --git a/stores/productStore.ts b/stores/productStore.ts
index 80b09c7..6f7779d 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -1,18 +1,17 @@
-import { useMyFetch } from "#imports";
+import { useMyFetch } from '#imports'
 import type {
   GenericResponse,
   GenericResponseChildren,
   GenericResponseItems,
-  UserCart,
-} from "~/types";
-import type { Product } from "~/types/product";
+} from '~/types'
+import type { Product } from '~/types/product'
 
-export const useProductStore = defineStore("productStore", () => {
-  const { $toast } = useNuxtApp();
-  const productList = ref<Product[]>();
-  const modules = ref();
+export const useProductStore = defineStore('productStore', () => {
+  const { $toast } = useNuxtApp()
+  const productList = ref<Product[]>()
+  const modules = ref()
 
-  const checkoutStore = useCheckoutStore();
+  const checkoutStore = useCheckoutStore()
 
   async function getList(count: number, categoryId = 1) {
     try {
@@ -20,21 +19,22 @@ export const useProductStore = defineStore("productStore", () => {
         `/api/public/products/category/${categoryId}?p=1&elems=${count}`,
         {
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: async (_, status) => {
             // await navigateTo("/error", { replace: true });
             throw createError({
               statusCode: status,
               statusMessage: `HTTP error: ${status}`,
-            });
+            })
           },
-        }
-      );
+        },
+      )
 
-      productList.value = data.items;
-    } catch (error) {
-      console.error("getList error:", error);
+      productList.value = data.items
+    }
+    catch (error) {
+      console.error('getList error:', error)
     }
   }
 
@@ -44,20 +44,21 @@ export const useProductStore = defineStore("productStore", () => {
         `/api/public/module/e_shop`,
         {
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: (_, status) => {
-            throw new Error(`HTTP error: ${status}`);
+            throw new Error(`HTTP error: ${status}`)
           },
-        }
-      );
+        },
+      )
 
       modules.value = data.children.find(
-        (item: { id: number; name: string }) =>
-          item.name === "currency_rates_bar"
-      );
-    } catch (error) {
-      console.error("getList error:", error);
+        (item: { id: number, name: string }) =>
+          item.name === 'currency_rates_bar',
+      )
+    }
+    catch (error) {
+      console.error('getList error:', error)
     }
   }
 
@@ -66,34 +67,36 @@ export const useProductStore = defineStore("productStore", () => {
       const res = await useMyFetch<GenericResponse<object>>(
         `/api/public/user/cart/item/add/${id}/1`,
         {
-          method: "PUT",
+          method: 'PUT',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: (_, status) => {
-            throw new Error(`HTTP error: ${status}`);
+            throw new Error(`HTTP error: ${status}`)
           },
-        }
-      );
+        },
+      )
 
       if (res.status === 200) {
-        $toast.success("Item successfully added to your cart.", {
+        $toast.success('Item successfully added to your cart.', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
-        checkoutStore.getUserCart();
-      } else {
-        $toast.error("Failed to add item to cart. Please try again.", {
-          autoClose: 5000,
-          dangerouslyHTMLString: true,
-        });
+        })
+        checkoutStore.getUserCart()
       }
-    } catch (error) {
-      $toast.error("An unexpected error occurred while updating your cart.", {
+      else {
+        $toast.error('Failed to add item to cart. Please try again.', {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        })
+      }
+    }
+    catch (error) {
+      $toast.error('An unexpected error occurred while updating your cart.', {
         autoClose: 5000,
         dangerouslyHTMLString: true,
-      });
-      console.error("incrementCartItem error:", error);
+      })
+      console.error('incrementCartItem error:', error)
     }
   }
 
@@ -102,34 +105,36 @@ export const useProductStore = defineStore("productStore", () => {
       const res = await useMyFetch<GenericResponse<object>>(
         `/api/public/user/cart/item/subtract/${id}/1`,
         {
-          method: "PUT",
+          method: 'PUT',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: (_, status) => {
-            throw new Error(`HTTP error: ${status}`);
+            throw new Error(`HTTP error: ${status}`)
           },
-        }
-      );
+        },
+      )
 
       if (res.status === 200) {
-        $toast.success("Item successfully removed from your cart.", {
+        $toast.success('Item successfully removed from your cart.', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
-        checkoutStore.getUserCart();
-      } else {
-        $toast.error("Failed to removed item from cart. Please try again.", {
-          autoClose: 5000,
-          dangerouslyHTMLString: true,
-        });
+        })
+        checkoutStore.getUserCart()
       }
-    } catch (error) {
-      $toast.error("An unexpected error occurred while updating your cart.", {
+      else {
+        $toast.error('Failed to removed item from cart. Please try again.', {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        })
+      }
+    }
+    catch (error) {
+      $toast.error('An unexpected error occurred while updating your cart.', {
         autoClose: 5000,
         dangerouslyHTMLString: true,
-      });
-      console.error("decrementCartItem error:", error);
+      })
+      console.error('decrementCartItem error:', error)
     }
   }
 
@@ -138,34 +143,36 @@ export const useProductStore = defineStore("productStore", () => {
       const res = await useMyFetch<GenericResponse<object>>(
         `/api/public/user/cart/item/${id}`,
         {
-          method: "DELETE",
+          method: 'DELETE',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           onErrorOccured: (_, status) => {
-            throw new Error(`HTTP error: ${status}`);
+            throw new Error(`HTTP error: ${status}`)
           },
-        }
-      );
+        },
+      )
 
       if (res.status === 200) {
-        $toast.success("Item successfully removed from your cart.", {
+        $toast.success('Item successfully removed from your cart.', {
           autoClose: 5000,
           dangerouslyHTMLString: true,
-        });
-        checkoutStore.getUserCart();
-      } else {
-        $toast.error("Failed to removed item from cart. Please try again.", {
-          autoClose: 5000,
-          dangerouslyHTMLString: true,
-        });
+        })
+        checkoutStore.getUserCart()
       }
-    } catch (error) {
-      $toast.error("An unexpected error occurred while updating your cart.", {
+      else {
+        $toast.error('Failed to removed item from cart. Please try again.', {
+          autoClose: 5000,
+          dangerouslyHTMLString: true,
+        })
+      }
+    }
+    catch (error) {
+      $toast.error('An unexpected error occurred while updating your cart.', {
         autoClose: 5000,
         dangerouslyHTMLString: true,
-      });
-      console.error("deleteCartItem error:", error);
+      })
+      console.error('deleteCartItem error:', error)
     }
   }
 
@@ -177,5 +184,5 @@ export const useProductStore = defineStore("productStore", () => {
     incrementCartItem,
     decrementCartItem,
     deleteCartItem,
-  };
-});
+  }
+})
diff --git a/types/checkout.ts b/types/checkout.ts
index 628d753..47815e1 100644
--- a/types/checkout.ts
+++ b/types/checkout.ts
@@ -32,40 +32,39 @@ export interface UserAddressOfficial {
 }
 
 export interface Payment {
-  bank_name: string;
-  city: string;
-  country_account_number: string;
-  country_iso: string;
-  country_name: string;
-  currency_iso: string;
-  iban: string;
-  id: number;
-  postcode: string;
-  street_and_number: string;
-  swift: string;
+  bank_name: string
+  city: string
+  country_account_number: string
+  country_iso: string
+  country_name: string
+  currency_iso: string
+  iban: string
+  id: number
+  postcode: string
+  street_and_number: string
+  swift: string
 }
 
 export interface CheckoutOrder {
-  cart_id: number;
-  currency_iso: string;
-  customer_id: number;
+  cart_id: number
+  currency_iso: string
+  customer_id: number
   delivery_details: {
-    address: Address;
-    contact_email: string;
-    contact_phone_number: string;
-    delivery_option_id: number;
-    note: string;
-  };
-  payment_bank_account_id: number;
+    address: Address
+    contact_email: string
+    contact_phone_number: string
+    delivery_option_id: number
+  }
+  payment_bank_account_id: number
 }
 
 export interface Address {
-  city: string;
+  city: string
   country_iso: {
-    str: string;
-  };
-  name: string;
-  postcode: string;
-  street: string;
-  surname: string;
+    str: string
+  }
+  name: string
+  postcode: string
+  street: string
+  surname: string
 }