From f80bc3e3ba0ed2107d75488a310d6369fcf36c2f Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Fri, 4 Jul 2025 10:01:16 +0200
Subject: [PATCH] some changeds

---
 components/section/CheckoutSummary.vue |  10 +-
 components/section/LoginMain.vue       |   5 +-
 components/section/ProductBlock.vue    | 209 ++++++++++++++++---------
 stores/checkoutStore.ts                |   8 +-
 types/checkout.ts                      |   4 +-
 5 files changed, 143 insertions(+), 93 deletions(-)

diff --git a/components/section/CheckoutSummary.vue b/components/section/CheckoutSummary.vue
index 219445d..1da383d 100644
--- a/components/section/CheckoutSummary.vue
+++ b/components/section/CheckoutSummary.vue
@@ -65,11 +65,11 @@
             </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>
+              <span>{{ checkoutStore.defaultAddress?.name }} {{
+                checkoutStore.defaultAddress?.surname }}</span>
+              <span>{{ checkoutStore.defaultAddress?.street }}</span>
+              <span>{{ checkoutStore.defaultAddress?.postcode }} {{
+                checkoutStore.defaultAddress?.city }}</span>
             </div>
           </div>
           <div class="flex flex-col space-y-5 w-full h-full">
diff --git a/components/section/LoginMain.vue b/components/section/LoginMain.vue
index 68b437d..fb49be4 100644
--- a/components/section/LoginMain.vue
+++ b/components/section/LoginMain.vue
@@ -43,10 +43,11 @@
         </UiButtonArrow>
       </div>
       <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
-        <p class="cursor-pointer hover:underline transition-all">
+        <p>
           {{ $t("no_account") }}
         </p>
-        <p class="text-button cursor-pointer hover:text-button-hover">
+        <p class="text-button cursor-pointer hover:text-button-hover"
+           @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 4))">
           {{ $t("sign_up_now") }}
         </p>
       </div>
diff --git a/components/section/ProductBlock.vue b/components/section/ProductBlock.vue
index 06e967b..ff504f4 100644
--- a/components/section/ProductBlock.vue
+++ b/components/section/ProductBlock.vue
@@ -1,31 +1,114 @@
 <template>
-  <div>
+  <UiContainer>
+    <transition>
+      <div v-if="showPopup && curImage" ref="dropdownRef" tabindex="0"
+           class="fixed top-0 left-0 bg-[#000000cc] w-screen h-screen z-50 flex items-center justify-center cursor-pointer"
+           @keyup.esc="showPopup = false" @keyup.left="goLeft" @keyup.right="goRight" @click.self="showPopup = false">
+        <div class="border border-white p-4 rounded-2xl shadow-2xl bg-white cursor-auto">
+          <img :src="`/api/public/file/${curImage}_l.webp`" class="max-h-[80vh] object-contain" alt=""
+               @load="focusOnImgLoad">
+        </div>
+        <button class="absolute top-8 p-8 right-8 text-4xl rotate-45 text-white" @click="showPopup = false">
+          +
+        </button>
+      </div>
+    </transition>
+    <div class="flex gap-[100px]">
+      <div class="flex gap-[25px]">
+        <div class="flex flex-col gap-[15px]">
+          <div v-for="image in product.picture_uuids" :key="image" class="h-[100px] w-[90px] border border-button py-3 flex items-center justify-center rounded-[8px]"
+               @click="curImage = image">
+            <img :src="`/api/public/file/${image}_m.webp`" :alt="product.name" srcset="" class="h-full w-auto">
+          </div>
+        </div>
+        <div class="cursor-pointer" @click="showPopup = true">
+          <img :src="`/api/public/file/${curImage}_m.webp`" class="w-72" alt="">
+        </div>
+      </div>
+      <!-- <div class="w-[70%]">
+        <h1 class="font-bold text-2xl">
+          {{ product.name }}
+        </h1>
+        <div>
+          <span class="mx-4">Product reference:</span><span>{{ product.reference }}</span>
+        </div>
+        <div class="my-4" v-html="product.description" />
+        <div class="my-12">
+          <div class="text-2xl font-bold">
+            <span class="mx-4">Price:</span><span>{{ formattedPrice }}</span>
+          </div>
+          <div class="">
+            <span class="mx-4">Tax information:</span><span>{{ product.tax_name }}</span>
+          </div>
+          <div class="font-bold">
+            <span class="mx-4">Buy out price:</span><span>{{ formattedBuyOutPrice }}</span>
+          </div>
+
+          <button :disabled="!product.sale_active"
+            class="btn disabled:bg-gray-500 bg-button text-white px-4 py-4 rounded-2xl cursor-pointer"
+            @click="productStore.incrementCartItem(product.id)">
+            Add to cart
+          </button>
+        </div>
+      </div> -->
+      <div class="w-full space-y-[30px]">
+        <div class="space-y-[15px]">
+          <div class="flex items-center justify-between w-full">
+            <h1 class="h4-uppercase-bold-inter max-w-[450px]">
+              {{ product.name }}
+            </h1>
+            <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()">
+              {{ $t("back_to_home") }}
+            </button>
+          </div>
+          <p class="text-button font-inter text-base leading-[150%] uppercase sm:text-[20px]">
+            Title: {{
+              product.reference }}
+          </p>
+        </div>
+        <div class="flex flex-col gap-5" v-html="product.description" />
+        <div class="flex items-end justify-between">
+          <div class="">
+            <h4
+              class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
+              {{ formattedPrice }}
+            </h4>
+            <p>{{ product.tax_name }}</p>
+            <p>{{ formattedBuyOutPrice }}</p>
+          </div>
+          <div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+            <button
+              class="h-[40px] cursor-pointer min-w-40 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">
+              Add to cart
+            </button>
+            <div :disabled="!product.sale_active" class="
+              flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px] bg-button text-text-dark group-hover:bg-button-hover
+            " @click="productStore.incrementCartItem(product.id)">
+              <svg class="" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
+                  fill="currentColor" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+
+  <!-- <div>
     <UiContainer>
       <transition>
-        <div
-          v-if="showPopup && curImage"
-          ref="dropdownRef"
-          tabindex="0"
+        <div v-if="showPopup && curImage" ref="dropdownRef" tabindex="0"
           class="fixed top-0 left-0 bg-[#000000cc] w-screen h-screen z-50 flex items-center justify-center cursor-pointer"
-          @keyup.esc="showPopup = false"
-          @keyup.left="goLeft"
-          @keyup.right="goRight"
-          @click.self="showPopup = false"
-        >
-          <div
-            class="border border-white p-4 rounded-2xl shadow-2xl bg-white cursor-auto"
-          >
-            <img
-              :src="`/api/public/file/${curImage}_l.webp`"
-              class="max-h-[80vh] object-contain"
-              alt=""
-              @load="focusOnImgLoad"
-            >
+          @keyup.esc="showPopup = false" @keyup.left="goLeft" @keyup.right="goRight" @click.self="showPopup = false">
+          <div class="border border-white p-4 rounded-2xl shadow-2xl bg-white cursor-auto">
+            <img :src="`/api/public/file/${curImage}_l.webp`" class="max-h-[80vh] object-contain" alt=""
+              @load="focusOnImgLoad">
           </div>
-          <button
-            class="absolute top-8 p-8 right-8 text-4xl rotate-45 text-white"
-            @click="showPopup = false"
-          >
+          <button class="absolute top-8 p-8 right-8 text-4xl rotate-45 text-white" @click="showPopup = false">
             +
           </button>
         </div>
@@ -33,26 +116,12 @@
       <div class="flex w-full gap-1">
         <div class="w-[50%] min-w-150px">
           <div class="flex gap-2">
-            <div
-              v-for="image in product.picture_uuids"
-              :key="image"
-              class="flex justify-center h-20 cursor-pointer"
-              @click="curImage = image"
-            >
-              <img
-                :src="`/api/public/file/${image}_m.webp`"
-                :alt="product.name"
-                srcset=""
-              >
+            <div v-for="image in product.picture_uuids" :key="image" class="flex justify-center h-20 cursor-pointer"
+              @click="curImage = image">
+              <img :src="`/api/public/file/${image}_m.webp`" :alt="product.name" srcset="">
             </div>
-            <div class="cursor-pointer"
-                 @click="showPopup = true"
-            >
-              <img
-                :src="`/api/public/file/${curImage}_m.webp`"
-                class="w-72"
-                alt=""
-              >
+            <div class="cursor-pointer" @click="showPopup = true">
+              <img :src="`/api/public/file/${curImage}_m.webp`" class="w-72" alt="">
             </div>
           </div>
         </div>
@@ -64,25 +133,21 @@
           <div>
             <span class="mx-4">Product reference:</span><span>{{ product.reference }}</span>
           </div>
-          <div class="my-4"
-               v-html="product.description"
-          />
+          <div class="my-4" v-html="product.description" />
           <div class="my-12">
             <div class="text-2xl font-bold">
-              <span class="mx-4">Price:</span><span>{{ formatedPrice }}</span>
+              <span class="mx-4">Price:</span><span>{{ formattedPrice }}</span>
             </div>
             <div class="">
               <span class="mx-4">Tax information:</span><span>{{ product.tax_name }}</span>
             </div>
             <div class="font-bold">
-              <span class="mx-4">Buy out price:</span><span>{{ formatedBuyOutPrice }}</span>
+              <span class="mx-4">Buy out price:</span><span>{{ formattedBuyOutPrice }}</span>
             </div>
 
-            <button
-              :disabled="!product.sale_active"
+            <button :disabled="!product.sale_active"
               class="btn disabled:bg-gray-500 bg-button text-white px-4 py-4 rounded-2xl cursor-pointer"
-              @click="productStore.incrementCartItem(product.id)"
-            >
+              @click="productStore.incrementCartItem(product.id)">
               Add to cart
             </button>
           </div>
@@ -90,37 +155,25 @@
       </div>
       <div class="flex gap-4">
         <div class="w-1/2 flex cursor-pointer">
-          <div v-for="rel in product.recommendations"
-               :key="rel.id"
-          >
-            <nuxt-link
-              :to="{
-                name: `id-slug___${$i18n.locale}`,
-                params: {
-                  id: menuStore.getProductMenu()?.id,
-                  slug: menuStore.getProductMenu()?.front_menu_lang[0]
-                    .link_rewrite,
-                },
-                query: { prod_id: rel?.id, name: rel?.link_rewrite },
-              }"
-            >
+          <div v-for="rel in product.recommendations" :key="rel.id">
+            <nuxt-link :to="{
+              name: `id-slug___${$i18n.locale}`,
+              params: {
+                id: menuStore.getProductMenu()?.id,
+                slug: menuStore.getProductMenu()?.front_menu_lang[0]
+                  .link_rewrite,
+              },
+              query: { prod_id: rel?.id, name: rel?.link_rewrite },
+            }">
               <div class="w-1/3">
                 {{ rel.name }}
-                <img
-                  :src="`/api/public/file/${rel.cover_picture_uuid}_m.webp`"
-                  class="h-24"
-                  alt=""
-                >
+                <img :src="`/api/public/file/${rel.cover_picture_uuid}_m.webp`" class="h-24" alt="">
               </div>
             </nuxt-link>
           </div>
         </div>
         <div class="w-1/2">
-          <div
-            v-for="feature in product.features"
-            :key="feature.feature"
-            class="flex gap-4 justify-around border-b"
-          >
+          <div v-for="feature in product.features" :key="feature.feature" class="flex gap-4 justify-around border-b">
             <span class="mx-4">{{ feature.feature }}:</span>
             <span class="mx-4">
               {{ feature.value }}
@@ -129,7 +182,7 @@
         </div>
       </div>
     </UiContainer>
-  </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
@@ -161,11 +214,11 @@ const focusOnImgLoad = () => {
   dropdownRef.value.focus()
 }
 
-const formatedPrice = computed(() => {
+const formattedPrice = computed(() => {
   return formatPrice(product.value.price)
 })
 
-const formatedBuyOutPrice = computed(() => {
+const formattedBuyOutPrice = computed(() => {
   return formatPrice(product.value.buyout_price)
 })
 
diff --git a/stores/checkoutStore.ts b/stores/checkoutStore.ts
index 88788a8..09dcc7f 100644
--- a/stores/checkoutStore.ts
+++ b/stores/checkoutStore.ts
@@ -3,6 +3,7 @@ import { REGEX_PHONE } from '../utils/regex'
 import type { GenericResponse, GenericResponseItems, UserCart } from '~/types'
 import type {
   AddressesList,
+  CheckoutAddress,
   CheckoutOrder,
   Payment,
   UserAddressOfficial,
@@ -323,12 +324,7 @@ export const useCheckoutStore = defineStore('checkoutStore', () => {
     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<CheckoutAddress | undefined>()
 
   async function getDefAddress() {
     try {
diff --git a/types/checkout.ts b/types/checkout.ts
index 47815e1..7f148f4 100644
--- a/types/checkout.ts
+++ b/types/checkout.ts
@@ -50,7 +50,7 @@ export interface CheckoutOrder {
   currency_iso: string
   customer_id: number
   delivery_details: {
-    address: Address
+    address: CheckoutAddress
     contact_email: string
     contact_phone_number: string
     delivery_option_id: number
@@ -58,7 +58,7 @@ export interface CheckoutOrder {
   payment_bank_account_id: number
 }
 
-export interface Address {
+export interface CheckoutAddress {
   city: string
   country_iso: {
     str: string