@ozdao/martyrs 0.2.481 → 0.2.483

package/src/modules/products/components/blocks/ProductImages.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative">
+  <div class="w-100 bs-heavy h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative">
     <!-- Main image container -->
-    <div class="pd-semi w-100 bg-light radius-semi o-hidden" @click="openPopup(images[0])">
+    <div class="order-1 w-100 bg-light radius-small o-hidden" @click="openPopup(currentImageIndex)">
       <Image360
         v-if="product && product.image3d"
         class="h-100 w-100"
@@ -10,35 +10,44 @@
       />
       <img
         loading="lazy"
-        v-if="images[0] && !product?.image3d"
-        class="h-max h-max-15r bg-white radius-semi w-100"
+        v-if="images[currentImageIndex] && !product?.image3d"
+        class="h-100 flex-child-default bg-white radius-small w-100"
         style="object-fit: contain;"
-        :src="(FILE_SERVER_URL || '') + images[0]"
+        :src="(FILE_SERVER_URL || '') + images[currentImageIndex]"
       />
       <PlaceholderImage
-        v-if="!images[0] && !product?.image3d"
-        class="h-max-20r h-100 w-100"
+        v-if="!images[currentImageIndex] && !product?.image3d"
+        class="h-100 w-100"
         style="object-fit: cover;"
       />
     </div>
     
     <!-- Thumbnails -->
-    <div v-if="images.length > 1" class="o-scroll w-100 pd-semi pd-t-zero">
-      <div class="no-responsive w-max flex flex-nowrap gap-thin">
+    <div v-if="images.length > 1" class="mobile:order-1 order-0 w-5r mobile:w-100">
+      <div class="w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin">
         <img loading="lazy" 
-          v-for="(image, index) in images"
+          v-for="(image, index) in images.slice(0, 5)"
           :key="index"
           :src="(FILE_SERVER_URL || '') + image" 
-          @click="openPopup(image)"
-          class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+          @click="currentImageIndex = index"
+          class="aspect-1x1 radius-small bg-white o-hidden thumbnail"
+          :class="{ 'active': currentImageIndex === index }"
         />
+        <div
+          v-if="images.length > 5"
+          @click="openPopup(5)"
+          class="aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white "
+        >
+          +{{ images.length - 5 }}
+        </div>
       </div>
     </div>
     
     <!-- Popup with photo viewer -->
-    <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-medium o-hidden">
+    <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-zero o-hidden">
       <PhotoViewer
-        :photoUrl="(FILE_SERVER_URL || '') + selectedImage"
+        :photos="images.map(img => (FILE_SERVER_URL || '') + img)"
+        :initialIndex="selectedImageIndex"
       />
     </Popup>
   </div>
@@ -46,12 +55,9 @@
 
 <script setup>
 import { ref } from "vue";
-
 import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';
-
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
-
 import Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'
 
 const props = defineProps({
@@ -66,15 +72,17 @@ const props = defineProps({
 });
 
 const isPopupVisible = ref(false);
-const selectedImage = ref(null);
+const selectedImageIndex = ref(0);
+const currentImageIndex = ref(0);
 
-const openPopup = (image) => {
-  if (!image) return;
-  selectedImage.value = image;
+const openPopup = (index) => {
+  if (!props.images.length) return;
+  selectedImageIndex.value = index;
   isPopupVisible.value = true;
 };
 
 const closePopup = () => {
+  selectedImageIndex.value = 0;
   isPopupVisible.value = false;
 };
 </script>
@@ -82,9 +90,10 @@ const closePopup = () => {
 <style scoped>
 .thumbnail {
   width: 100%;
-  max-width: 6rem;
-  height: 6rem;
   object-fit: cover;
   cursor: pointer;
 }
+.thumbnail.active {
+  border: 1px solid rgb(var(--second));
+}
 </style>

package/src/modules/products/components/blocks/ProductVariants.vue

@@ -10,13 +10,14 @@
       class="w-100 mn-b-medium"
     >
       <p class="capitalize mn-b-thin t-medium">{{ group.label }}</p>
-      <div class="flex flex-wrap gap-small mn-b-medium">
+
+      <div class="flex flex-wrap gap-thin mn-b-medium">
         <button
           v-for="item in group.items"
           :key="item.key"
           @click="group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)"
           :disabled="item.off"
-          class="h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro"
+          class="pd-small radius-small"
           :class="[
             isSelected(group, item) ? 'br-main' : 'br-black-transp-10',
             item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',
@@ -27,9 +28,10 @@
             :src="`${FILE_SERVER_URL}${item.img}`"
             class="h-100 radius-thin aspect-1x1 object-fit-contain"
           />
-          <span class="flex-center capitalize flex h-100 w-100 t-small t-center">
+          <p class="">
             {{ item.text }}
-          </span>
+          </p>
+
           <div
             v-if="isSelected(group, item)"
             class="pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small"

package/src/modules/products/components/elements/Price.vue

@@ -6,7 +6,6 @@
         'p-medium t-semi': size === 'small',
         'h3 t-semi': size === 'big'
       }"
-      class="t-second"
     >
       {{ returnCurrency() + variant.price }}
     </span>
@@ -19,7 +18,7 @@
       }"
       class="p-small mn-l-micro t-transp"
     >
-      {{ product.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}
+      {{ product?.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}
     </span>
 
     <p
@@ -36,10 +35,11 @@ import { computed } from 'vue';
 
 const props = defineProps({
   product: Object,
+  variants: Array,
   size: String
 });
 
 const variant = computed(() => {
-  return props.product?.variants?.[0] || props.product;
+  return props.product?.variants?.[0] || props.variants?.[0] || props.product;
 });
 </script>

package/src/modules/products/components/pages/Product.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="products.state.current" class="h-100 w-100 mobile:pd-thin pd-big bg-white">
-    <div class="cols-2-1_2 w-100 gap-medium">
+  <div v-if="products.state.current" class="w-100 mobile:pd-thin pd-small bg-white">
+    <div class="cols-2 mobile:cols-1 w-100 gap-medium">
 
       <ProductImages
         :images="currentImages"
@@ -29,31 +29,15 @@
           />
         </router-link>
 
-        <h2 class="w-100 h1-product mn-b-small">{{ product.name }}</h2>
-        
-        <!-- Показываем цену, если нет вариантов или не выбран ни один вариант -->
-        <Price 
-          v-if="!selectedVariant"
-          :product="product" 
-          size="big" 
-          class="flex gap-micro flex-center pd-small br-solid br-1px br-black-transp-10 w-max mn-b-medium" 
-        />
-        
-        <!-- Показываем цену выбранного варианта -->
-        <div 
-          v-else 
-          class="flex gap-micro flex-center pd-small br-solid br-1px br-black-transp-10 w-max mn-b-medium"
-        >
-          <span class="h2 t-bold">{{ returnCurrency() }}{{ selectedVariant.price.toFixed(2) }}</span>
-        </div>
+        <h2 class="w-100 h1-product mn-b-medium">{{ product.name }}</h2>
 
-        <p v-if="product.description" class="w-100 mn-b-medium">
+        <p v-if="product.description" class="w-100 mn-b-medium" style="white-space: pre-line;">
           {{ product.translations?.length > 1 ? t('description') : product.description }}
         </p>
        
         <!-- Компонент выбора вариантов товара -->
         <ProductConfigurator
-          v-if="product.variants.length > 0"
+          v-if="product.variants?.length > 0"
           :product-variants="product.variants"
           :product-id="product._id"
           :product-name="product.name"
@@ -64,6 +48,20 @@
           @update-images="handleUpdateImages"
         />
 
+        <div  v-if="product.included" class="mn-b-small flex-nowrap flex flex-v-center">
+          <IconList class="mn-r-micro i-medium"/>
+          <p class="t-medium ">Included</p>
+        </div>
+
+        <div   v-if="product.included" class="cols-1 mn-b-medium w-100 ">
+          <div
+            class="w-100 pd-small radius-small flex flex-column gap-small bg-light"
+          >
+            <p class="t-medium" style="white-space: pre-line;" v-html="product.included"></p>
+          </div>
+        </div>
+
+
         <div class="mn-b-small flex-nowrap flex flex-v-center">
           <IconInfo class="mn-r-micro i-medium"/>
           <p class="t-medium ">Product Details</p>
@@ -95,10 +93,16 @@
         />
       </div>
     </div>
+    
+    <ProductsRecommended 
+      v-if="product.recommended.length > 0"
+      :products="product.recommended"
+      class=" mn-t-big h-max pos-relative"
+    />
 
     <div class="h-max mn-t-big pos-relative">
       <h3 class="pd-b-small">Most Popular</h3>
-      <PopularProducts class="mn-r-big-negative mn-l-big-negative"/>
+      <ProductsPopular class="mn-r-big-negative mn-l-big-negative"/>
     </div>
   </div>
 </template>
@@ -121,15 +125,17 @@ import Tab from '@martyrs/src/components/Tab/Tab.vue'
 import Calendar from '@martyrs/src/components/DatePicker/Calendar.vue'
 
 import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'
+import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+
 import IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue'
 
-import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
+import IconList from '@martyrs/src/modules/icons/entities/IconList.vue';
 import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue'
 
 import ProductImages from '@martyrs/src/modules/products/components/blocks/ProductImages.vue'
-import Price from '@martyrs/src/modules/products/components/elements/Price.vue'
-import PopularProducts from '@martyrs/src/modules/products/components/sections/PopularProducts.vue'
 import ProductConfigurator from '@martyrs/src/modules/products/components/sections/ProductConfigurator.vue'
+import ProductsRecommended from '@martyrs/src/modules/products/components/sections/ProductsRecommended.vue';
+import ProductsPopular from '@martyrs/src/modules/products/components/sections/ProductsPopular.vue'
 
 import CardOrganization from '@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue'
 
@@ -167,7 +173,7 @@ products.state.current = null
 onMounted(async () => {
   emits('page-loading');
   
-  await products.actions.read({ _id: route.params.product })
+  await products.actions.read({ _id: route.params.product, lookup: ['recommended'] })
   
   // Инициализируем текущие изображения изображениями товара
   currentImages.value = [...productImages.value]

package/src/modules/products/components/pages/ProductEdit.vue

@@ -32,6 +32,7 @@
         { label: 'Details', value: 'details' },
         { label: 'Variants', value: 'variants' },
         { label: 'Discounts', value: 'discounts' },
+        { label: 'Recommended', value: 'recommended' },
         { label: 'Localization', value: 'localization' }
       ]"
       class="flex-child-default bg-light radius-medium h-max pd-thin o-x-scroll"
@@ -51,53 +52,12 @@
         />
       </Block>
 
-      <!-- Product Profile -->
-      <Block title="Profile">
-        <div class="mn-b-thin flex-nowrap flex gap-thin">
-          <Select 
-            v-model:select="products.state.current.status"
-            label="Status"
-            :options="[
-              'draft', 
-              'published',
-              'featured',
-              'archived',
-              'removed'
-            ]"
-            placeholder="Display product"
-            class="pos-relative w-100 bg-white radius-small pd-medium"
-          />
-          <Select 
-            v-model:select="products.state.current.listing"
-            label="Type"
-            :options="[
-              'sale', 
-              'rent',
-            ]"
-            placeholder="Type of listing"
-            class="pos-relative w-100 bg-white radius-small pd-medium"
-          />
-        </div>
-
-        <Field 
-          v-model:field="products.state.current.name" 
-          placeholder="Enter product name"
-          class="w-100 mn-b-thin bg-white radius-small pd-medium"
-        />
-        <Field
-          v-model:field="products.state.current.description" 
-          placeholder="Enter product description" 
-          class="w-100 bg-white radius-small pd-medium"
-          type="textarea"
-        />
-      </Block>
-      <!-- Categories -->
-       <Block title="Categories">
+      <Block title="Categories">
         <BlockMultiselect
           v-model="products.state.current.category"
           placeholder="Search categories..."
           :multiple="true"
-           :transform="(item) => ({ _id: item._id, name: item.name })"
+          :transform="(item) => ({ _id: item._id, name: item.name })"
           :store="{
             read: (options) => categories.actions.read(options),
             state: categories.state
@@ -108,38 +68,40 @@
             limit: 50
           }"
           :skeleton="{
-				    hide: false,
-				    horizontal: true,
-				    structure: [
-				      { block: 'text', size: 'large' }
-				    ]
-				  }"
+            hide: false,
+            horizontal: true,
+            class: 'radius-small',
+            structure: [{ 
+              block: 'text', size: 'large'
+            }]
+          }"
           :states="{
             empty: {
               title: 'No categories found',
-              description: 'Try different search terms or create a new category'
+              description: 'Try different search terms or create a new category',
+              class: 'radius-small'
             }
           }"
           key="_id"
           :label="item => item.name"
           classSearch="bg-white radius-small"
-          classSelected="bg-white pd-small radius-small mn-b-thin"
-          classDropdown="bg-white pd-small radius-medium bs-light"
-          classItem="pd-small radius-small hover-bg-light cursor-pointer mn-b-thin"
-         	classFeed="h-max-30r o-scroll"
+          classSelected="bg-white pd-small radius-small"
+          classDropdown="bg-white pd-small radius-medium bs-small"
+          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classFeed="h-max-30r gap-thin flex-column flex o-scroll"
         >
           <!-- Слот для выбранных категорий -->
           <template #selected="{ item, clear }">
-					  <div class="flex-nowrap flex-v-center flex gap-thin">
-					    <span class="t-medium">{{ item?.name || item }}</span>
-					    <button 
-					      @click.stop="clear"
-					      class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
-					    >
-					      <IconCross class="i-micro fill-white" />
-					    </button>
-					  </div>
-					</template>
+            <div class="flex-nowrap flex-v-center flex gap-thin">
+              <span class="t-medium">{{ item?.name || item }}</span>
+              <button 
+                @click.stop="clear"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+              >
+                <IconCross class="i-micro fill-white" />
+              </button>
+            </div>
+          </template>
           
           <!-- Слот для элементов в списке -->
           <template #item="{ item }">
@@ -158,6 +120,57 @@
         </BlockMultiselect>
       </Block>
 
+      <!-- Product Profile -->
+      <Block title="Profile">
+        <div class="mn-b-thin flex-nowrap flex gap-thin">
+          <Select 
+            v-model:select="products.state.current.status"
+            label="Status"
+            :options="[
+              'draft', 
+              'published',
+              'featured',
+              'archived',
+              'removed'
+            ]"
+            placeholder="Display product"
+            class="pos-relative w-100 bg-white radius-small pd-medium"
+          />
+          <Select 
+            v-model:select="products.state.current.listing"
+            label="Type"
+            :options="[
+              'sale', 
+              'rent',
+            ]"
+            placeholder="Type of listing"
+            class="pos-relative w-100 bg-white radius-small pd-medium"
+          />
+        </div>
+
+        <Field 
+          v-model:field="products.state.current.name" 
+          placeholder="Enter product name"
+          class="w-100 mn-b-thin bg-white radius-small pd-medium"
+        />
+        <Field
+          v-model:field="products.state.current.description" 
+          placeholder="Enter product description" 
+          class="w-100 bg-white radius-small mn-b-thin pd-medium"
+          style="resize: vertical"
+          type="textarea"
+        />
+        <Field
+          v-model:field="products.state.current.included" 
+          placeholder="Enter what's inside" 
+          class="w-100 bg-white radius-small pd-medium"
+          style="resize: vertical"
+          type="textarea"
+        />
+      </Block>
+      <!-- Categories -->
+      
+
 
       <!-- Attributes -->
       <EditAttributes 
@@ -176,6 +189,11 @@
 			v-if="activeTab === 'discounts'"
       v-model:discounts="products.state.current.discounts"
     />
+    <EditRecommended 
+      v-if="activeTab === 'recommended'" 
+      v-model:recommended="products.state.current.recommended"
+      class="cols-1 gap-thin"
+    />
 
     <!-- Localization Tab -->
     <Block
@@ -261,7 +279,7 @@ import EditVariants from '@martyrs/src/modules/products/components/sections/Edit
 import EditAttributes from '@martyrs/src/modules/products/components/sections/EditAttributes.vue';
 import EditDiscounts from '@martyrs/src/modules/products/components/sections/EditDiscounts.vue';
 import EditCategories from '@martyrs/src/modules/products/components/sections/EditCategories.vue';
-
+import EditRecommended from '@martyrs/src/modules/products/components/sections/EditRecommended.vue';
 
 // Accessing router and store
 import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
@@ -284,7 +302,7 @@ onMounted(async() => {
   products.mutations.resetProduct();
 
   if (route.params.product) {
-    await products.actions.read({ _id: route.params.product, lookup: ['variants','categories'] });
+    await products.actions.read({ _id: route.params.product, lookup: ['variants','categories','recommended'] });
   } else {
     // Создаем дефолтный вариант для нового товара
     if (!products.state.current.variants || products.state.current.variants.length === 0) {
@@ -306,6 +324,10 @@ onMounted(async() => {
   // Убедимся, что массивы инициализированы
   if (!products.state.current.translations) {
     products.state.current.translations = []
+  }
+   // Убедимся, что массивы инициализированы
+  if (!products.state.current.recommended) {
+    products.state.current.recommended = []
   }
   if (!products.state.current.discounts) {
     products.state.current.discounts = []
@@ -329,12 +351,12 @@ onMounted(async() => {
 
 async function onSubmit() {
   try {
-    // Проверка на наличие хотя бы одного варианта
-    if (!products.state.current.variants || products.state.current.variants.length === 0) {
-      setError({ response: { data: { errorCode: "PRODUCT_MUST_HAVE_VARIANT" }} })
-      return;
-    }
-
+    // // Проверка на наличие хотя бы одного варианта
+    // if (!products.state.current.variants || products.state.current.variants.length === 0) {
+    //   setError({ response: { data: { errorCode: "PRODUCT_MUST_HAVE_VARIANT" }} })
+    //   return;
+    // }
+      console.log('product is',products.state.current)
     if (route.params.product) {
       await products.actions.update(route.params.product, products.state.current)
     } else {
@@ -348,6 +370,7 @@ async function onSubmit() {
         type: 'user',
         hidden: false
       }
+
       await products.actions.create(products.state.current)
     }
     

package/src/modules/products/components/sections/EditRecommended.vue

@@ -0,0 +1,131 @@
+<template>
+  <Block
+    title="Recommended Products"
+    placeholder="No recommended products added yet. Add products that are frequently bought together."
+    :actions="[{
+      label: '+',
+      function: () => openRecommendedPopup()
+    }]"
+  >
+    <div v-if="recommended?.length > 0" class="rows-1 gap-thin">
+      <CardPosition 
+        v-for="(product, index) in recommended" 
+        :key="product._id" 
+        :image="product.images?.[0] ? (FILE_SERVER_URL || '') + product.images[0] : ''"
+        :name="product.name"
+        :title="product.name"
+        :subtitle="`${returnCurrency()}${product.price}`"
+        :showThumbnail="true"
+        :actions="[
+          {
+            icon: IconDelete,
+            class: 'bg-red',
+            handler: () => {
+              globals.actions.delete(recommended, product, index);
+            }
+          }
+        ]"
+        class="bg-white pd-thin radius-medium w-100 mn-b-thin"
+      />
+    </div>
+  </Block>
+
+  <Popup 
+    title="Add Recommended Product" 
+    @close-popup="closeRecommendedPopup" 
+    :isPopupOpen="isRecommendedPopupOpen"
+    class="bg-white w-min-30r w-max-30r radius-medium pd-medium"
+  >
+    <div class="bg-light mn-b-thin h-min-20r h-max-20r o-scroll pd-medium radius-medium">
+      <Feed
+        :search="{
+          class: 'bg-white mn-b-thin'
+        }"
+        :states="{
+          empty: {
+            title: 'No Products Found',
+            description: 'Currently, there are no such products available.'
+          }
+        }"
+        :store="{
+          read: (options) => products.actions.read(options),
+          state: null
+        }"
+        :options="{
+          owner: route.params._id,
+        }"
+        v-slot="{ items }"
+        class=""
+      >
+        <CardPosition
+          v-for="(product, index) in items" :key="product._id"
+          :image="product.images?.[0] ? (FILE_SERVER_URL || '') + product.images[0] : ''"
+          :name="product.name"
+          :title="product.name"
+          :subtitle="`${returnCurrency()}${product.price}`"
+          :showThumbnail="true"
+          :actions="[
+            {
+              label: 'Add',
+              class: 'bg-main t-white',
+              handler: () => {
+                globals.actions.add(recommended, product);
+                closeRecommendedPopup();
+              }
+            }
+          ]"
+          class="bg-white pd-thin radius-medium w-100 mn-b-thin cursor-pointer hover-scale-1"
+        />
+      </Feed>
+    </div>
+  </Popup>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, defineModel } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useGlobalMixins } from "@martyrs/src/modules/globals/views/mixins/mixins.js"
+
+// Импорт компонентов
+import Block from '@martyrs/src/components/Block/Block.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+
+// Импорт модулей и глобальных хранилищ
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+import * as products from '@martyrs/src/modules/products/store/products.js';
+
+// Импорт карточек
+import CardPosition from '@martyrs/src/modules/products/components/blocks/CardPosition.vue';
+import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';
+
+// Получение route и router
+const route = useRoute();
+const router = useRouter();
+const { returnCurrency } = useGlobalMixins();
+
+// Используем defineModel для работы с v-model в родительском компоненте
+const recommended = defineModel('recommended');
+
+// Локальное состояние
+const isRecommendedPopupOpen = ref(false);
+
+// При монтировании компонента инициализируем recommended
+onMounted(async () => {
+  // Инициализируем recommended как пустой массив, если не определено или не массив
+  if (!recommended.value || !Array.isArray(recommended.value)) {
+    recommended.value = [];
+  }
+});
+
+// Открытие попапа для добавления рекомендованного товара
+function openRecommendedPopup() {
+  isRecommendedPopupOpen.value = true;
+}
+
+// Закрытие попапа
+function closeRecommendedPopup() {
+  isRecommendedPopupOpen.value = false;
+}
+</script>