@ozdao/martyrs 0.2.481 → 0.2.483

package/src/modules/icons/navigation/IconRefresh.vue

@@ -21,9 +21,7 @@
 	const props = defineProps({
   fill: {
     type: String,
-    default: {
-      position: 'rgb(var(--black))'
-    }
+    default: 'rgb(var(--black))'
   },
 })
 </script>

package/src/modules/icons/navigation/IconShuffle.vue

@@ -1,31 +1,16 @@
+<script setup>
+  const props = defineProps({
+    fill: {
+      type: String,
+      default: 'rgb(var(--black))'
+    },
+  })
+</script>
+
 <template>
-	<svg 
-    width="19" 
-    height="15" 
-    viewBox="0 0 19 15" 
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path 
-			:fill="fill"
-      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
-    />
-    <path 
-      :fill="fill"
-      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
-    />
+	<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path :fill="fill" d="M9.29319 8.9997H7.8378C6.83508 8.9997 5.89891 8.49855 5.34196 7.66433C5.18863 7.43466 5.25051 7.12419 5.48017 6.97086C5.70984 6.81753 6.02031 6.87941 6.17364 7.10907C6.54516 7.66555 7.16937 7.9997 7.8378 7.9997H9.29259L8.14645 6.85355C7.95118 6.65829 7.95118 6.34171 8.14645 6.14645C8.34171 5.95118 8.65829 5.95118 8.85355 6.14645L10.8536 8.14645C11.0488 8.34171 11.0488 8.65829 10.8536 8.85355L8.85355 10.8536C8.65829 11.0488 8.34171 11.0488 8.14645 10.8536C7.95118 10.6583 7.95118 10.3417 8.14645 10.1464L9.29319 8.9997ZM9.29289 3H7.838C7.16957 3 6.54536 3.33415 6.17403 3.89035L3.65784 7.66463C3.10089 8.49885 2.16472 9 1.162 9H0.5C0.223858 9 0 8.77614 0 8.5C0 8.22386 0.223858 8 0.5 8H1.162C1.83044 8 2.45464 7.66585 2.82597 7.10965L5.34216 3.33537C5.89911 2.50115 6.83528 2 7.838 2H9.29289L8.14645 0.853553C7.95118 0.658291 7.95118 0.341709 8.14645 0.146447C8.34171 -0.0488155 8.65829 -0.0488155 8.85355 0.146447L10.8536 2.14645C11.0488 2.34171 11.0488 2.65829 10.8536 2.85355L8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355C7.95118 4.65829 7.95118 4.34171 8.14645 4.14645L9.29289 3ZM0.5 3C0.223858 3 0 2.77614 0 2.5C0 2.22386 0.223858 2 0.5 2H1.162C2.16472 2 3.10089 2.50115 3.65784 3.33537C3.81117 3.56504 3.74929 3.87551 3.51963 4.02884C3.28996 4.18217 2.97949 4.12029 2.82616 3.89063C2.45464 3.33414 1.83044 3 1.162 3H0.5Z"/>
   </svg>
 </template>
 
-<script setup>
-	const props = defineProps({
-  fill: {
-    type: String,
-    default: {
-      position: 'rgb(var(--black))'
-    }
-  },
-})
-</script>
-
 

package/src/modules/icons/navigation/IconUnMute.vue

@@ -17,9 +17,7 @@
 	const props = defineProps({
   fill: {
     type: String,
-    default: {
-      position: 'rgb(var(--black))'
-    }
+    default: 'rgb(var(--black))'
   },
 })
 </script>

package/src/modules/icons/navigation/IconVolume.vue

@@ -21,9 +21,7 @@
 	const props = defineProps({
   fill: {
     type: String,
-    default: {
-      position: 'rgb(var(--black))'
-    }
+    default: 'rgb(var(--black))'
   },
 })
 </script>

package/src/modules/icons/pages/IconsPage.vue

@@ -38,7 +38,6 @@ import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue';
 import IconMinus from '@martyrs/src/modules/icons/navigation/IconMinus.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
 import IconCheckmark from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
 import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
 import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';
@@ -145,7 +144,6 @@ function loadIcons() {
         { name: 'IconMinus', component: IconMinus },
         { name: 'IconEllipsis', component: IconEllipsis },
         { name: 'IconPlus', component: IconPlus },
-        { name: 'IconHeart', component: IconHeart },
         { name: 'IconCheckmark', component: IconCheckmark },
         { name: 'IconPause', component: IconPause },
         { name: 'IconAdd', component: IconAdd },

package/src/modules/marketplace/views/components/layouts/Marketplace.vue

@@ -1,42 +1,38 @@
 <template>
-	<div style="min-height: 100%;" class="h-min-100">
-		
-
-		 <div class="cols-2-1_3 h-100 z-index-3 pos-relative radius-big">
-
-			<div class="o-y-scroll br-r br-solid br-light  z-index-2 desktop-only h-100 pos-relative">
-	     	<BlockFilter
-          v-model:filter="marketplace.state.filter"
-          :options="marketplace.state.filter.options"
-          class="h-100 w-100 pd-medium"
-		    />
-		  </div>
-
-			<!-- Catalog wrapper -->
-			<div class="pd-thin">
-				<header class="pd-medium radius-medium bg-light mn-b-thin">
-		    	<h2 class="">
-		    		<span class="">Weed Deliveries in </span>
-
-		    		<span 
-		    			v-if="localPosition.city || localPosition.state || localPosition.country"
-		    			@click="a => { globals.state.isOpenLocationPopup = true }" 
-		    			class="t-main t-semi cursor-pointer "
-		    		>
-		  				<template v-if="localPosition.city">{{localPosition.city}}, </template>
-		  				<template v-if="localPosition.state">{{localPosition.state}}, </template>
-		  				<template v-if="localPosition.country">{{localPosition.country}}</template>
-		    		</span>
-
-		    		<span v-else @click="a => { globals.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
-		    	</h2>
-				</header>
-
-				<div class="rows-1">
-					<router-view  v-slot="{ Component, route }">
-						<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
-					</router-view>
-				</div>
+	 <div class="cols-2-1_3 z-index-3 pos-relative radius-big">
+
+		<div class="o-y-scroll br-r br-solid br-light  z-index-2 desktop-only h-100 pos-relative">
+     	<BlockFilter
+        v-model:filter="marketplace.state.filter"
+        :options="marketplace.state.filter.options"
+        class="h-100 w-100 pd-medium"
+	    />
+	  </div>
+
+		<!-- Catalog wrapper -->
+		<div class="pd-thin">
+			<header class="pd-medium radius-medium bg-light mn-b-thin">
+	    	<h2 class="">
+	    		<span class="">Weed Deliveries in </span>
+
+	    		<span 
+	    			v-if="localPosition.city || localPosition.state || localPosition.country"
+	    			@click="a => { globals.state.isOpenLocationPopup = true }" 
+	    			class="t-main t-semi cursor-pointer "
+	    		>
+	  				<template v-if="localPosition.city">{{localPosition.city}}, </template>
+	  				<template v-if="localPosition.state">{{localPosition.state}}, </template>
+	  				<template v-if="localPosition.country">{{localPosition.country}}</template>
+	    		</span>
+
+	    		<span v-else @click="a => { globals.state.isOpenLocationPopup = true }"  class="t-main t-semi cursor-pointer">The World</span>
+	    	</h2>
+			</header>
+
+			<div class="rows-1">
+				<router-view  v-slot="{ Component, route }">
+					<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
+				</router-view>
 			</div>
 		</div>
 	</div>

package/src/modules/music/components/pages/AlbumDetail.vue

@@ -63,7 +63,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+          <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
         </Button>
         
         <Dropdown class="pos-relative">
@@ -154,7 +154,7 @@ import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
 
 // Import icons
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 
 // Import store modules

package/src/modules/music/components/pages/PlaylistDetail.vue

@@ -63,7 +63,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+          <IconLike class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
         </Button>
         
         <Dropdown class="pos-relative">
@@ -306,7 +306,7 @@ import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
 
 // Import icons
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
 

package/src/modules/music/components/pages/TrackDetail.vue

@@ -58,7 +58,7 @@ import Media from '@martyrs/src/components/Media/Media.vue';
 import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
 import Popup from '@martyrs/src/components/Popup/Popup.vue';
 import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
 import TrackList from '../lists/TrackList.vue';
 // import PlaylistSelector from '../forms/PlaylistSelector.vue';

package/src/modules/music/components/player/MusicPlayer.vue

@@ -26,7 +26,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconHeart class="i-small" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--grey))'"/>
+          <IconLike class="i-small" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--grey))'"/>
         </Button>
       </div>
     </div>
@@ -116,7 +116,7 @@ import IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue
 import IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';
 import IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';
 import IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
-import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
 // import IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue'; // Using same icon but we'd style it differently
 import IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';

package/src/modules/notifications/components/blocks/NotificationItem.vue

@@ -59,68 +59,23 @@ const handleClick = () => {
 
 <template>
   <div 
-    class="notification-item" 
-    :class="{ unread: isUnread }"
+    class="notification-item gap-thin flex pd-small radius-small bg-light" 
+    :class="{ 'bg-second-small': isUnread }"
     @click="handleClick"
   >
     <div class="notification-icon">
       {{ notificationIcon }}
     </div>
     <div class="notification-content">
-      <h3 class="notification-title">{{ notification.title }}</h3>
-      <p class="notification-body">{{ notification.body }}</p>
-      <span class="notification-time">{{ formattedDate }}</span>
+      <p class="p-medium t-medium mn-b-small">{{ notification.title }}</p>
+      <p class="p-small mn-b-small">{{ notification.body }}</p>
+      <p class="pd-thin w-max radius-thin bg-white">{{ formattedDate }}</p>
     </div>
-    <div v-if="isUnread" class="unread-indicator"></div>
+    <div v-if="isUnread" class="flex-child-default unread-indicator"></div>
   </div>
 </template>
 
 <style scoped>
-.notification-item {
-  display: flex;
-  padding: 1rem;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.notification-item:hover {
-  background-color: #f9f9f9;
-}
-
-.notification-item.unread {
-  background-color: #f0f7ff;
-}
-
-.notification-icon {
-  flex-shrink: 0;
-  margin-right: 1rem;
-  font-size: 1.5rem;
-}
-
-.notification-content {
-  flex: 1;
-}
-
-.notification-title {
-  margin: 0 0 0.25rem;
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.notification-body {
-  margin: 0 0 0.5rem;
-  color: #666;
-  font-size: 0.9rem;
-}
-
-.notification-time {
-  font-size: 0.8rem;
-  color: #999;
-}
-
 .unread-indicator {
   width: 10px;
   height: 10px;

package/src/modules/notifications/components/elements/NotificationBadge.vue

@@ -13,52 +13,66 @@
         <span>{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
       </div>
     </button>
-    <div v-if="isOpen" class="notifications-dropdown">
-      <div class="notifications-header">
-        <h3>Notifications</h3>
-        <button 
-          v-if="unreadCount > 0" 
-          class="mark-all-read-btn" 
-          @click="markAllAsRead"
-        >
-          Mark all read
-        </button>
-      </div>
-      <div v-if="loading" class="notifications-loading">
-        Loading...
-      </div>
-      <div v-else-if="notifications.length === 0" class="notifications-empty">
-        No notifications
-      </div>
-      <div v-else class="notifications-list">
-        <notification-item 
-          v-for="notification in recentNotifications" 
-          :key="notification._id" 
-          :notification="notification"
-          @click="handleNotificationClick(notification)"
-        />
-      </div>
-      <div class="notifications-footer">
-        <router-link to="/notifications" @click="isOpen = false">
-          View all notifications
-        </router-link>
+    
+    <Popup
+      title="Notifications"
+      @close-popup="closeNotifications"
+      :isPopupOpen="isOpen"
+      align="center right"
+      class="bg-white h-min-100 w-100 w-max-30r pd-medium"
+    >
+      <div class="cols-1 gap-thin o-y-scroll">
+        <div v-if="loading" class="notifications-loading">
+          Loading...
+        </div>
+        
+        <div v-else-if="notifications.length === 0" class="notifications-empty">
+          No notifications
+        </div>
+        
+        <div v-else class="flex-column flex gap-thin">
+          <notification-item 
+            v-for="notification in recentNotifications" 
+            :key="notification._id" 
+            :notification="notification"
+            @click="handleNotificationClick(notification)"
+          />
+
+          <div class="flex-nowrap flex gap-thin">
+            <button 
+              v-if="unreadCount > 0"
+              class="w-100 bg-second t-white radius-small  button" 
+              @click="markAllAsRead"
+            >
+              Mark all read
+            </button>
+
+            <router-link class="w-100 bg-black t-white radius-small button" to="/notifications" @click="closeNotifications">
+              View all 
+            </router-link>
+          </div>
+
+        </div>
+
       </div>
-    </div>
+    </Popup>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
+import { ref, computed, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
+
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+
 import NotificationItem from '../blocks/NotificationItem.vue';
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
-
 import IconBell from '@martyrs/src/modules/icons/entities/IconBell.vue';
 
 const props = defineProps({
   maxNotifications: {
     type: Number,
-    default: 5
+    default: 10
   },
   fill: {
     type: String,
@@ -86,6 +100,10 @@ const toggleNotifications = () => {
   isOpen.value = !isOpen.value;
 };
 
+const closeNotifications = () => {
+  isOpen.value = false;
+};
+
 const handleNotificationClick = (notification) => {
   isOpen.value = false;
   
@@ -98,28 +116,14 @@ const handleNotificationClick = (notification) => {
   }
 };
 
-// Close dropdown when clicking outside
-const handleClickOutside = (event) => {
-  const container = document.querySelector('.notification-badge-container');
-  if (container && !container.contains(event.target)) {
-    isOpen.value = false;
-  }
-};
-
 // Lifecycle hooks
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-
   // Load notifications when component mounts
   const userId = auth.state.user._id;
   if (userId) {
     getNotifications(userId);
   }
 });
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
 </script>
 
 <style scoped>
@@ -139,6 +143,7 @@ onUnmounted(() => {
 .notification-icon {
   font-size: 1.4rem;
 }
+
 .button-counter {
   position: absolute;
   right: -8px;
@@ -153,61 +158,12 @@ onUnmounted(() => {
   line-height: 16px;
   font-size: 10px;
 }
-.notifications-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  width: 320px;
-  max-height: 400px;
-  overflow-y: auto;
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-}
-
-.notifications-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
-}
 
-.notifications-header h3 {
-  margin: 0;
-  font-size: 1rem;
-}
-
-.mark-all-read-btn {
-  background: none;
-  border: none;
-  color: #2196f3;
-  font-size: 0.8rem;
-  cursor: pointer;
-}
 
 .notifications-loading,
 .notifications-empty {
   padding: 24px;
   text-align: center;
-  color: #666;
-}
-
-.notifications-list {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.notifications-footer {
-  padding: 12px 16px;
-  text-align: center;
-  border-top: 1px solid #eee;
-}
-
-.notifications-footer a {
-  color: #2196f3;
-  text-decoration: none;
-  font-size: 0.9rem;
+  color: rgb(var(--text-light));
 }
 </style>

package/src/modules/organizations/configs/navigation.organization.config.js

@@ -6,6 +6,10 @@ import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';
 import IconProducts from '@martyrs/src/modules/icons/entities/IconProducts.vue';
 import IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue';
+import IconDate from '@martyrs/src/modules/icons/entities/IconDate.vue';
+import IconPrice from '@martyrs/src/modules/icons/entities/IconPrice.vue';
+import IconSettings from '@martyrs/src/modules/icons/entities/IconSettings.vue';
+import IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';
 
 // Import global mixins for access control
 import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
@@ -18,7 +22,7 @@ export const navigationItems = [
     items: [
       {
         title: 'Profile',
-        iconComponent: IconGroups,
+        iconComponent: IconHome,
         route: (auth, route) => ({
           name: 'Organization',
           params: { _id: route.params._id }
@@ -48,7 +52,7 @@ export const navigationItems = [
       },
       {
         title: 'Settings',
-        iconComponent: IconGroups,
+        iconComponent: IconSettings,
         route: (auth, route) => ({
           name: 'Organization Edit',
           params: { _id: route.params._id }
@@ -83,7 +87,7 @@ export const navigationItems = [
       },
       {
         title: 'Categories',
-        iconComponent: IconProducts,
+        iconComponent: IconPrice,
         route: (auth, route) => ({
           name: 'Categories',
           params: { _id: route.params._id }
@@ -133,7 +137,7 @@ export const navigationItems = [
       },
       {
         title: 'Rents',
-        iconComponent: IconOrders,
+        iconComponent: IconEvents,
         route: (auth, route) => ({
           name: 'Organization_Rents',
           params: { _id: route.params._id }

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

@@ -66,15 +66,17 @@
 				{{product.description.substring(0, 99)}}...
 			</p>
 
+			<slot></slot>
+
 			<div class="flex-v-center flex-nowrap flex">
 				<Price 
 					:product="product" 
 					size="small" 
-					class="bg-white h-100 p-medium flex flex-center pd-r-small pd-l-small radius-small mn-r-auto" 
+					class="bg-white h-100 p-medium flex flex-center pd-thin radius-small mn-r-auto" 
 				/>
 				
 				<button
-					v-if="user"
+					v-if="showAddToCart"
 		      class="
 		        cursor-pointer 
 		        radius-extra pd-thin bg-main
@@ -115,6 +117,10 @@
 		organization: {
 			type: String
 		},
+		showAddToCart: {
+			type: Boolean,
+			default: true
+		},
 		user: {
 			type: [Object, String] 
 		},

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="discounts && discounts.length" class="mn-t-large mn-b-large">
+  <div v-if="discounts && discounts.length">
     <div class="mn-b-small flex-nowrap flex flex-v-center">
       <IconDiscount class="mn-r-micro i-medium"/>
       <p class="t-medium">Special Offers</p>
@@ -9,7 +9,7 @@
       <div 
         v-for="(discount, index) in discounts" 
         :key="index" 
-        class="discount-card pd-medium radius-medium br-1px br-solid br-light cursor-pointer hover-scale-1"
+        class="discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer "
         @click="selectDiscount(discount)"
       >
         <div class="flex flex-wrap gap-thin flex-v-center w-100">
@@ -25,8 +25,7 @@
         </div>
         
         <p v-if="discount.description" class="t-small mn-t-thin t-transp">{{ discount.description }}</p>
-
-        <div class="mn-t-small"><Chips v-if="getConditionsAsChips.length > 0" class="" :chips="getConditionsAsChips(discount)" /></div>
+        <div v-if="getConditionsAsChips(discount).length > 0" class="mn-t-small"><Chips  class="" :chips="getConditionsAsChips(discount)" /></div>
       </div>
     </div>
   </div>