@ozdao/prometheus-framework 0.2.322 → 0.2.324

package/src/modules/landing/components/sections/SectionFeatures.vue

@@ -1,29 +1,25 @@
 <template>
-  <div id="howtobuy" class="pd-thin">
-    <section class="t-center bg-black t-white radius-big pd-big pd-t-big pd-b-big">
-      <h2 class="w-max-50r mn-l-auto mn-r-auto mn-b-small" v-html="t('title')"/>
-     
-
-      <div class="cols-3 gap-thin">
-        <div 
-          v-for="feature in tm('features')" 
-          :key="feature.title" 
-          class="pd-medium  radius-big"
-        >
-          <p class="mn-r-auto mn-l-auto h2 i-extra radius-extra bg-main flex-center flex mn-b-medium">
-            {{ feature.icon }}
-          </p>
-          <h3 class="mn-b-medium">
-            {{ feature.title }}
-          </h3>
-          <p class="t-transp">
-            {{ feature.description }}
-          </p>
-        </div>
+  <section id="howtobuy">
+    <h2 class="w-100 mn-b-small"><span class="d-inline-block w-max-50r" v-html="t('title')"/></h2>
+   
+    <div class="cols-3 gap-thin">
+      <div 
+        v-for="feature in tm('features')" 
+        :key="feature.title" 
+        class="pd-medium  radius-big"
+      >
+        <p class="h2 i-extra radius-extra bg-main flex-center d-inline-flex mn-b-medium">
+          {{ feature.icon }}
+        </p>
+        <h3 class="mn-b-medium">
+          {{ feature.title }}
+        </h3>
+        <p class="t-transp">
+          {{ feature.description }}
+        </p>
       </div>
-
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 
@@ -31,49 +27,15 @@
   import { useI18n }    from 'vue-i18n'
 
   const props = defineProps({
-    title: String,
-    textData: {
+    content: {
       type: Object,
-      default: () => ({
-        messages: {
-          en: {
-            title: 'Transform Your View on Smoking with <b class="t-main">Next Industrial Revolution</b>',
-            features: [{
-              icon: '1',
-              title: 'United in Growth',
-              description: 'Weeder thrives on community participation. As an open-source platform, it invites everyone to contribute and shape the evolution of cannabis culture globally.',
-            },{
-              icon: '2',
-              title: 'Trust in Crypto',
-              description: 'Weeder utilizes the power of blockchain technology and smart contracts, building a trust-rich, transparent environment that ensures secure and smooth transactions.',
-            },{
-              icon: '3',
-              title: 'Boosted by AI',
-              description: 'With AI at the core, Weeder enhances understanding of cannabis, creating personalized tools to enrich the user experience and business goals.',
-            }]
-          },
-          ru: {
-            title: 'Наши Преимущества',
-            features: [{
-              icon: '📦',
-              headline: 'Доставка за 1 час',
-              description: 'Мы понимаем, как важно для клиентов получить товар в самый краткий срок. Получите свой заказ в течении часа после подтверждения!',
-            },{
-              icon: '💬',
-              headline: 'Поддержка 24/7',
-              description: 'Если у вас есть какие-либо вопросы, наша служба поддержки клиентов работает круглосуточно и без выходных. Вы можете связаться с нами в любое время в Telegram!',
-            },{
-              icon: '😊',
-              headline: 'Гарантия качества',
-              description: 'Непревзойденные цены и самые доступные качественные товары. Больше не тратьте деньги на дорогие некачественные продукты!',
-            }]
-          }
-        }
-      })
+      required: true
     }
   })
 
-  const { t, tm } = useI18n(props.textData)
+  const { t, tm } = useI18n({
+    messages: props.content
+  })
 </script>
 
 <style lang="scss">

package/src/modules/landing/components/sections/SectionGuide.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-black t-white radius-big pd-big">
-    <div class="mn-b-big t-center title">
+  <div class="">
+    <div class="mn-b-big d-inline-block">
       <h2 class="mn-b-semi">{{t('title')}}</h2>
-      <p v-if="t('subtitle') !== 'subtitle'" class="t-transp p-big w-m-60r mn-l-auto mn-r-auto">{{t('subtitle')}}</p>
+      <p v-if="te('subtitle')" class="t-transp p-big w-m-60r">{{t('subtitle')}}</p>
     </div>
     <div class="cols-1 ">
 
-    <Spoiler v-for="item in tm('FAQ')" class="t-white br-white-transp-10 br-solid br-1px radius-small o-hidden  pd-big mn-b-thin">
+    <Spoiler v-for="item in tm('FAQ')" class="br-white-transp-10 br-solid br-1px radius-small o-hidden  pd-big mn-b-thin">
       <template  #header="{ isOpen }">
         <div class="cursor-pointer w-100 flex-v-center flex-nowrap flex">
           <h3 class="w-100" >{{item.title}}</h3>
@@ -38,7 +38,7 @@
     }
   })
   
-  const { t, tm } = useI18n({
+  const { t, tm, te } = useI18n({
     messages: props.content
   })
 </script>

package/src/modules/landing/components/sections/SectionJoinUs.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="o-hidden container-joinus">
+    <div class="content">
+      <span style="font-size: 8rem" class="t-semi">
+        {{ userCount }}
+      </span>
+      <p class="w-m-33r t-center mn-b-small p-big">
+        {{t('description')}}
+    
+      </p>
+      <router-link :to="{ name: 'Sign In' }" class="bg-black t-medium t-white button">
+        {{t('action')}}
+      </router-link>
+    </div>
+    <FloatingImages 
+      :container="'.container-joinus'"
+      :images="options.images" 
+      :config="{
+          size: '5rem',
+          square: true,
+          minDuration: 5,
+          maxDuration: 15,
+          spawnPoints: [10, 90],
+          animation: {
+            startOpacity: 0.1,
+            midOpacity: 1,
+            endOpacity: 0.0,
+            translateY: '-33vh'
+          },
+          class: 'my-custom-class'
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FloatingImages from '@pf/src/modules/landing/components/elements/FloatingImages.vue';
+
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      count: 1230,
+      images: [
+        '/landing/avatars/01.png',
+        '/landing/avatars/02.png',
+        '/landing/avatars/03.png',
+        '/landing/avatars/04.png',
+        '/landing/avatars/05.png',
+        '/landing/avatars/06.png'
+      ]
+    })
+  }
+})
+
+const { t, te } = useI18n({
+  messages: props.content
+})
+
+const userCount = ref(props.options.count);
+
+const increaseUserCount = () => {
+  setInterval(() => {
+    userCount.value += Math.floor(Math.random() * 2) + 1;
+  }, 1330);
+};
+
+onMounted(() => {
+  increaseUserCount();
+});
+</script>
+
+<style lang="scss">
+.container-joinus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 66%;
+  position: relative;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 2;
+  }
+}
+</style>

package/src/modules/landing/components/sections/SectionMobileApp.vue

@@ -0,0 +1,87 @@
+<template>
+  <section id="mobileApp" class="cols-2 o-hidden ">
+    <div class="z-index-1 h-100">
+      <img loading="lazy" 
+        :src="(FILE_SERVER_URL || '') + t('image')" 
+        class="radius-big h-100 w-100 object-fit-cover"
+      >
+    </div>
+
+    <div class="pd-big flex flex-h-center flex-column z-index-1 w-1/2">
+      <h2 class="mn-t-medium mn-b-semi w-m-40r">{{ t('title') }}</h2>
+      <p class="t-transp mn-b-big p-big w-m-33r">{{ t('description') }}</p>
+      
+      <div class="mn-b-big gap-medium cols-2">
+        <div v-for="feature in tm('features')"  class="feature">
+          <h4 class="mn-b-thin">{{ feature.title }}</h4>
+          <p class="t-transp p-medium">{{ feature.text }}</p>
+        </div>
+      </div>
+
+      <div class="w-100 w-max-30r flex-nowrap flex gap-medium">
+        <a 
+           v-if="te('linkAppStore') || te('label')"
+          :href="te('linkAppStore') ? t('linkAppStore') : null" 
+          :target="te('linkAppStore') ? '_blank' : null" 
+          class="pos-relative w-100 h-100"
+        > 
+          <span 
+            v-if="te('label')"
+            class="z-index-2 radius-big bg-main t-semi uppercase pd-l-thin pd-r-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+          >
+            {{ t('label') }}
+          </span>
+          <LabelAppStore class="w-100 h-max" alt="Download on App Store"/>
+        </a>
+
+        <a 
+           v-if="te('linkGooglePlay') || te('label')"
+          :href="te('linkGooglePlay') ? t('linkGooglePlay') : null" 
+          :target="te('linkGooglePlay') ? '_blank' : null" 
+          class="pos-relative w-100 h-100"
+        > 
+          <span 
+            v-if="te('label')"
+            class="z-index-2 pd-l-thin pd-r-thin radius-big bg-main t-semi uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+          >
+            {{ t('label') }}
+          </span>
+          <LabelGooglePlay class="w-100 h-max" alt="Download on Google Play"/>
+        </a>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import LabelAppStore from '@pf/src/modules/icons/labels/LabelAppStore.vue'
+import LabelGooglePlay from '@pf/src/modules/icons/labels/LabelGooglePlay.vue'
+
+const props = defineProps({
+    content: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { t, tm, te } = useI18n({
+    messages: props.content
+  })
+</script>
+
+<style lang="scss">
+ @media screen and (max-width: 1025px) {
+  #mobileApp {
+    text-align: center;
+    > section {
+      flex-direction: column;
+      > div {
+        order: 1;
+      }
+    }
+  }
+}
+</style>

package/src/modules/landing/components/sections/SectionOverview.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="sections" class="pd-thin">
-    <h2 class="mn-auto pd-t-big pd-b-big t-center">
+  <div id="sections">
+    <h2 class="pd-t-big pd-b-big">
       {{t('title')}}
     </h2>
 
@@ -9,7 +9,7 @@
         v-for="section in tm('sections')" 
         :key="section.route"
         :to="section.route" 
-        class="t-center cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big"
+        class="cursor-pointer hover-scale-0 transition-ease-in pd-big bg-light t-black radius-big"
       >
         <img 
           loading="lazy" 

package/src/modules/landing/components/sections/SubscribeNewsletter.vue

@@ -1,33 +1,22 @@
 <template>
-  <section class="pd-thin">
-    <div class="pos-relative o-hidden t-black bg-main pd-big radius-big">
-      <div class="pos-relative z-index-1">
-        <header class="t-center z-index-1 mn-b-big">
-          <h2 class="mn-l-auto mn-r-auto  mn-b-medium">{{ t('SubscribeNewsletter.title') }}</h2>
-          <p class="t-transp p-big">{{ t('SubscribeNewsletter.subtitle') }}</p>
-        </header>
+  <div class="pos-relative z-index-1">
+    <header class="d-inline-block z-index-1 mn-b-big">
+      <h2 class="mn-b-semi">{{ t('title') }}</h2>
+      <p class="t-transp p-big">{{ t('subtitle') }}</p>
+    </header>
 
-        <div class="z-index-1 w-100 flex-nowrap flex"> 
-          <FieldBig 
-            :input="email" 
-            :typingSpeed="75"
-            :loopTyping="false"
-            :enableTyping="false"
-            :placeholder="t('SubscribeNewsletter.placeholder')"
-            :action="t('SubscribeNewsletter.action')"
-            @update:input="email = $event"
-            @action="sendApplication"
-            class="mn-l-auto mn-r-auto bg-white t-black w-100 w-max-30r"
-          />
-        </div>
-      </div>
-
-      <div class="w-100 h-100 pos-absolute pos-b-50-negative pos-r-0 z-index-0 grid">
-        <div class="spiral"></div>
-      </div>
-
-    </div>
-  </section>
+    <FieldBig 
+      :input="email" 
+      :typingSpeed="75"
+      :loopTyping="false"
+      :enableTyping="false"
+      :placeholder="t('placeholder')"
+      :action="t('action')"
+      @update:input="email = $event"
+      @action="sendApplication"
+      class="d-inline-flex bg-white t-black w-100 w-max-40r"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -43,10 +32,21 @@ import * as applications from '@pf/src/modules/orders/store/applications.js';
 
 import * as inputsValidation from '@pf/src/modules/auth/views/validations/inputs.validation'
 
+const props = defineProps({
+  content: {
+    type: Object,
+    required: true
+  },
+  options: {
+    type: Object,
+    default: () => ({
+    })
+  }
+})
+
 // Localization
-const { t } = useI18n({
-  useScope: 'global', 
-  ...text
+const { t, te } = useI18n({
+  messages: props.content
 })
 
 let email = ref('')
@@ -85,6 +85,7 @@ async function sendApplication() {
       }
     };
     const response = await applications.create(application);
+
     return Promise.resolve(response.data);
   } catch (error) {
     console.log(error)

package/src/modules/landing/landing.client.js

@@ -1,8 +1,9 @@
 // Importing Vue components
-import MobileApp from './components/sections/MobileApp.vue';
+import SectionFeatures from './components/sections/SectionFeatures.vue';
+import SectionMobileApp from './components/sections/SectionMobileApp.vue';
+import SectionJoinUs from './components/sections/SectionJoinUs.vue';
 import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';
 import SectionEarn from './components/sections/SectionEarn.vue';
-import SectionFeatures from './components/sections/SectionFeatures.vue';
 import SectionGuide from './components/sections/SectionGuide.vue';
 import SectionOverview  from './components/sections/SectionOverview.vue';
 
@@ -11,9 +12,10 @@ import AnimatedGrid from './components/elements/AnimatedGrid.vue';
 
 export {
   SectionEarn,
-  MobileApp,
+  SectionMobileApp,
   SectionGuide,
   SectionOverview,
+  SectionJoinUs,
   SubscribeNewsletter,
   SectionFeatures,
   FloatingImages,

package/src/modules/orders/components/blocks/CardOrderItem.vue

@@ -24,6 +24,8 @@
       <div class="w-100 pos-relative">
         <!-- Name -->
         <p  class="t-truncate t-medium">{{ product.name }}
+          {{product.date}}
+          {{product.listing}}
           <span v-if="product.size" class="t-transp">, {{ product.size}}</span>
           <span v-if="typeof product.color === 'string' && product.size" class="t-transp">, </span>
           <span v-if="typeof product.color === 'string' " class="t-transp">{{product.color}}</span>

package/src/modules/orders/store/shopcart.js

@@ -16,6 +16,104 @@ const state = reactive({
   currentState: false
 });
 
+/////////////////////////////
+// Helpers
+/////////////////////////////
+const helpers = {
+  createCartItem(product, organization, type = 'sale') {
+    return {
+      _id: product._id,
+      images: product.images,
+      name: product.name,
+      price: product.price,
+      quantity: 1,
+      org_id: organization,
+      type: type
+    };
+  },
+
+  saveToStorage() {
+    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify({
+      positions: state.positions,
+      organization: state.organization
+    }));
+  },
+
+  async validateProduct(product) {
+    const serverProduct = await api.fetchProduct(product._id);
+    
+    if (!serverProduct) {
+      return false;
+    }
+
+    return serverProduct.price === product.price &&
+           serverProduct.name === product.name &&
+           serverProduct.available !== false;
+  }
+};
+
+/////////////////////////////
+// SYNC PRODUCT IN SHOPCART
+/////////////////////////////
+// Constants
+const CART_STORAGE_KEY = 'shopcart';
+const SYNC_INTERVAL = 30000; // 30 seconds in milliseconds
+
+// API service
+const api = {
+  async fetchProduct(productId) {
+    try {
+      const response = await fetch(`/api/products/read`, { _id: productId});
+      return await response.json();
+    } catch (error) {
+      console.error('Failed to fetch product:', error);
+      return null;
+    }
+  }
+};
+
+async function syncWithServer() {
+  try {
+    const invalidProducts = [];
+    
+    for (let i = 0; i < state.positions.length; i++) {
+      const product = state.positions[i];
+      const serverProduct = await api.fetchProduct(product._id);
+      
+      if (!serverProduct || 
+          serverProduct.price !== product.price || 
+          serverProduct.name !== product.name || 
+          serverProduct.available === false) {
+        invalidProducts.push(product._id);
+      }
+    }
+
+    if (invalidProducts.length > 0) {
+      state.positions = state.positions.filter(
+        product => !invalidProducts.includes(product._id)
+      );
+      helpers.saveToStorage();
+      setError('Some products were removed from cart due to changes on server');
+    }
+  } catch (error) {
+    console.error('Failed to sync with server:', error);
+  }
+}
+// Initialize periodic sync
+let syncInterval;
+
+const startPeriodicSync = () => {
+  syncInterval = setInterval(syncWithServer, SYNC_INTERVAL);
+};
+
+const stopPeriodicSync = () => {
+  if (syncInterval) {
+    clearInterval(syncInterval);
+  }
+};
+
+// Start sync when module is imported
+startPeriodicSync();
 /////////////////////////////
 // Actions
 /////////////////////////////
@@ -41,7 +139,7 @@ const actions = {
   },
 
 
-  addProductToCart(product, organization) {
+  addProductToCart(product, organization, date) {
     const cartItem = state.positions.find(
       (item) => item._id === product._id
     );
@@ -55,6 +153,7 @@ const actions = {
         name: product.name,
         price: product.price,
         quantity: 1,
+        date: date, 
         org_id: organization, // Добавляем _id организации к каждому продукту
       });
     }

package/src/modules/organizations/components/pages/Organizations.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<header v-if="!MOBILE_APP"  class="pd-small bg-red flex-v-center flex-nowrap flex">
+		<header v-if="!MOBILE_APP"  class="pd-small bg-white flex-v-center flex-nowrap flex">
     	<h2 class="mn-r-medium">Groups</h2>
     	<button 
     		@click="$router.push({

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

@@ -80,20 +80,13 @@
 				{{product.description.substring(0, 99)}}...
 			</p>
 
-			<!-- <p v-if="product.localization && product.localization.length > 1" class="mn-b-small t-transp p-small">
-				<span v-if="$i18n.locale === 'en'">{{product.localization[0].text.substring(0, 99)}}...</span>
-				<span v-if="$i18n.locale === 'ru'">{{product.localization[1].text.substring(0, 99)}}...</span>
-			</p> -->
-			
 			<div class="flex-v-center flex-nowrap flex">
 				<Price 
 					:product="product" 
 					size="small" 
 					class="mn-r-auto" 
 				/>
-
-			
-
+				
 				<button
 					v-if="user && product.listing === 'rent'"
 		      class="
@@ -102,9 +95,9 @@
 		        radius-extra pd-thin bg-main
 		      "
 		    >
-		      <svg class="i-medium" xmlns="http://www.w3.org/2000/svg" width="26" height="21" viewBox="0 0 26 21" fill="none">
-						  <path d="M8.19141 15.582C7.49414 15.582 6.95638 15.3861 6.57812 14.9941C6.19987 14.6022 5.95833 14.0622 5.85352 13.374L4.52734 4.30957H1.9502C1.68587 4.30957 1.45801 4.21387 1.2666 4.02246C1.0752 3.8265 0.979492 3.59408 0.979492 3.3252C0.979492 3.05632 1.0752 2.82617 1.2666 2.63477C1.45801 2.4388 1.68587 2.34082 1.9502 2.34082H4.91699C5.43197 2.34082 5.79655 2.44564 6.01074 2.65527C6.22493 2.86035 6.36393 3.16797 6.42773 3.57812L6.55078 4.42578H14.7471C14.7288 4.5625 14.7152 4.69922 14.7061 4.83594C14.6969 4.97266 14.6924 5.10938 14.6924 5.24609C14.6924 6.04362 14.8405 6.79102 15.1367 7.48828C15.4329 8.18555 15.8454 8.80306 16.374 9.34082C16.9072 9.87858 17.5247 10.3024 18.2266 10.6123C18.9284 10.9176 19.6826 11.0771 20.4893 11.0908L20.4209 11.248C20.2432 11.5671 20.0016 11.8132 19.6963 11.9863C19.391 12.1595 19.0127 12.2461 18.5615 12.2461H7.67188L7.80859 13.1963C7.84049 13.3831 7.90885 13.5335 8.01367 13.6475C8.11849 13.7614 8.25977 13.8184 8.4375 13.8184H18.459C18.696 13.8184 18.9056 13.8981 19.0879 14.0576C19.2702 14.2171 19.3613 14.429 19.3613 14.6934C19.3613 14.9622 19.2702 15.1787 19.0879 15.3428C18.9056 15.5023 18.696 15.582 18.459 15.582H8.19141ZM7.34375 18.4873C7.34375 18.1865 7.41667 17.9108 7.5625 17.6602C7.71289 17.4141 7.91113 17.2181 8.15723 17.0723C8.40788 16.9264 8.68359 16.8535 8.98438 16.8535C9.28516 16.8535 9.55859 16.9264 9.80469 17.0723C10.0553 17.2181 10.2536 17.4141 10.3994 17.6602C10.5452 17.9108 10.6182 18.1865 10.6182 18.4873C10.6182 18.7926 10.5452 19.0684 10.3994 19.3145C10.2536 19.5651 10.0553 19.7611 9.80469 19.9023C9.55859 20.0482 9.28516 20.1211 8.98438 20.1211C8.68359 20.1211 8.40788 20.0482 8.15723 19.9023C7.91113 19.7611 7.71289 19.5651 7.5625 19.3145C7.41667 19.0684 7.34375 18.7926 7.34375 18.4873ZM15.3555 18.4873C15.3555 18.1865 15.4284 17.9108 15.5742 17.6602C15.7246 17.4141 15.9229 17.2181 16.1689 17.0723C16.4196 16.9264 16.6953 16.8535 16.9961 16.8535C17.3014 16.8535 17.5771 16.9264 17.8232 17.0723C18.0693 17.2181 18.2653 17.4141 18.4111 17.6602C18.5615 17.9108 18.6367 18.1865 18.6367 18.4873C18.6367 18.7926 18.5615 19.0684 18.4111 19.3145C18.2653 19.5651 18.0693 19.7611 17.8232 19.9023C17.5771 20.0482 17.3014 20.1211 16.9961 20.1211C16.6953 20.1211 16.4196 20.0482 16.1689 19.9023C15.9229 19.7611 15.7246 19.5651 15.5742 19.3145C15.4284 19.0684 15.3555 18.7926 15.3555 18.4873ZM20.5439 9.82617C19.915 9.82617 19.3226 9.70768 18.7666 9.4707C18.2152 9.23372 17.7275 8.90332 17.3037 8.47949C16.8799 8.05566 16.5472 7.56803 16.3057 7.0166C16.0687 6.46061 15.9502 5.86816 15.9502 5.23926C15.9502 4.61035 16.0687 4.02018 16.3057 3.46875C16.5472 2.91732 16.8799 2.42969 17.3037 2.00586C17.7275 1.58203 18.2152 1.25163 18.7666 1.01465C19.3226 0.773112 19.915 0.652344 20.5439 0.652344C21.1729 0.652344 21.763 0.773112 22.3145 1.01465C22.8704 1.25163 23.3581 1.58203 23.7773 2.00586C24.2012 2.42513 24.5316 2.91276 24.7686 3.46875C25.0055 4.02018 25.124 4.61035 25.124 5.23926C25.124 5.86361 25.0033 6.45378 24.7617 7.00977C24.5247 7.5612 24.1943 8.04883 23.7705 8.47266C23.3467 8.89648 22.8568 9.22917 22.3008 9.4707C21.7493 9.70768 21.1637 9.82617 20.5439 9.82617ZM20.5439 8.19922C20.7445 8.19922 20.904 8.13997 21.0225 8.02148C21.141 7.89844 21.2002 7.73893 21.2002 7.54297V5.89551H22.8408C23.0368 5.89551 23.194 5.83626 23.3125 5.71777C23.4355 5.59928 23.4971 5.44206 23.4971 5.24609C23.4971 5.04557 23.4355 4.88607 23.3125 4.76758C23.194 4.64453 23.0368 4.58301 22.8408 4.58301H21.2002V2.95605C21.2002 2.75553 21.141 2.59603 21.0225 2.47754C20.904 2.35905 20.7445 2.2998 20.5439 2.2998C20.3434 2.2998 20.1839 2.36133 20.0654 2.48438C19.9469 2.60286 19.8877 2.76009 19.8877 2.95605V4.58301H18.2539C18.0534 4.58301 17.8916 4.64453 17.7686 4.76758C17.6501 4.88607 17.5908 5.04557 17.5908 5.24609C17.5908 5.44206 17.6523 5.59928 17.7754 5.71777C17.8984 5.83626 18.0579 5.89551 18.2539 5.89551H19.8877V7.54297C19.8877 7.73893 19.9469 7.89844 20.0654 8.02148C20.1839 8.13997 20.3434 8.19922 20.5439 8.19922Z" fill="white"/>
-						</svg>
+		      <IconShopcartAdd
+						class="i-medium"
+					/>
 		    </button>
 		  </div>
 		</div>
@@ -119,6 +112,7 @@
 	import { useI18n }    from 'vue-i18n'
 
 	import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+	import IconShopcartAdd from '@pf/src/modules/icons/actions/IconShopcartAdd.vue'
 
 	import THC from '@pf/src/modules/products/components/elements/THC.vue'
 	import Price from '@pf/src/modules/products/components/elements/Price.vue'

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="o-scroll product-images">
-    <div class="no-responsive flex flex-nowrap gap-thin">
+  <div class="o-scroll w-100 product-images">
+    <div class="no-responsive w-max flex flex-nowrap gap-thin">
       <img loading="lazy" 
         v-for="(image, index) in images"
         :key="index"
@@ -54,8 +54,8 @@ const closePopup = () => {
 
 .thumbnail {
   width: 100%;
-  max-width: 8rem;
-  height: 8rem;
+  max-width: 6rem;
+  height: 6rem;
   object-fit: cover;
   cursor: pointer;
 }