@ozdao/martyrs 0.2.477 → 0.2.479

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

@@ -33,7 +33,7 @@
     <div class="mn-t-small w-100 bg-white radius-small pd-small spoiler">
       <div @click="spoiler = !spoiler"  class="flex-v-center flex">
         <span 
-          class="flex-child flex-child-shrink-0 capitalize w-max mn-r-thin t-medium radius-big pd-b-nano pd-t-nano pd-r-thin pd-l-thin"
+          class="flex-child flex-child-shrink-0 capitalize w-max mn-r-thin t-medium radius-medium pd-b-nano pd-t-nano pd-r-thin pd-l-thin"
           :class="{
             'bg-green': leftover.type === 'stock-in',
             'bg-red': leftover.type === 'stock-out'

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

@@ -1,162 +1,99 @@
 <template>
-	<div class="gap-thin">
-		<div class="gap-thin mn-b-thin flex-nowrap flex">
-			<div
-				class="bg-white w-100 w-min-15r br-solid br-1px br-black-transp-5 pd-small radius-small" 
-			>
-				{{productSelected.name || productSelected._id.name}}
-			</div>
-			<!-- <SelectMulti
-				v-model="productSelected"
-				:options="products"
-				label="name"
-				:multiple="false"
-				:taggable="false"
-				placeholder="Select a product"
-				class="bg-white w-100 w-min-15r br-solid br-1px br-black-transp-5 pd-small radius-small" 
-			/> -->
-			<Field 
-				v-if="!showPrice"
-				v-model:field="productQuantity" 
-				type="number"  
-				label="Qty" 
-				class="bg-white w-100 w-max-10r br-solid br-1px br-black-transp-5 pd-small radius-small" 
-			>
-			<Select 
-				v-model:select="productQuantityType" 
-				:options="[
-					'pcs',
-					'g',
-					'ml'
-				]"
-				class="bg-light pd-r-thin pd-l-thin pd-t-nano pd-b-nano radius-thin"
-			/>
-
-			</Field>
-			<button 
-				v-if="!product"
-				:disabled="!isProductValid" 
-				@click="addProduct" 
-				class="bg-main aspect-1x1 radius-small pd-small"
-			>
-				<IconAdd class="i-semi"/>
-			</button>
-
-			<button 
-				v-if="product"
-				@click="deleteProduct" 
-				class="bg-red aspect-1x1 radius-small pd-small"
-			>
-				<IconDelete class="i-semi"/>
-			</button>
-		</div>
-		<div v-if="showPrice" class="gap-thin flex-nowrap flex">
-			<Field 
-				v-model:field="productPrice"
-				type="number"   
-				label="Price" 
-				:symbol="returnCurrency()"
-				class="bg-white w-100 br-solid br-1px br-black-transp-5  pd-small radius-small" 
-			/>
-			<Field 
-				v-model:field="productQuantity" 
-				type="number"  
-				label="Qty" 
-				class="bg-white w-100 br-solid br-1px br-black-transp-5 pd-small radius-small" 
-			>
-			<Select 
-				v-model:select="productQuantityType" 
-				:options="[
-					'pcs',
-					'g',
-					'ml'
-				]"
-				class="bg-light pd-r-thin pd-l-thin pd-t-nano pd-b-nano radius-thin"
-			/>
-
-			</Field>
-		</div>
-
-		
-		
-	</div>
+  <div class="bg-white radius-small pd-small flex-nowrap flex-v-center flex gap-thin">
+    <!-- Thumbnail image -->
+    <div v-if="showThumbnail" class="aspect-1x1 h-3r flex-child-default radius-small o-hidden">
+      <img
+        v-if="image && image.length > 0"
+        :src="(FILE_SERVER_URL || '') + image"
+        alt="Item image"
+        class="w-100 h-100 object-fit-cover"
+      />
+      <PlaceholderImage v-else class="w-100 h-100" />
+    </div>
+    
+    <!-- Item details -->
+    <div class="mn-micro-negative flex flex-column w-100 o-hidden">
+      <p class="w-100 pd-micro t-trim trimmed capitalize t-medium">{{ name || 'Unnamed Product' }}</p>
+      
+      <div class="flex pd-micro flex-v-center gap-micro w-max ">
+      	<span v-if="title" :class="title_class" class="t-second  d-inline-block t-demi">{{title}}</span>
+      	<span v-if="subtitle" class="t-transp p-small d-inline-block t-medium">{{ subtitle }}</span>
+      </div>
+    	<slot></slot>
+    </div>
+    <!-- <p>
+     
+
+      <span class="p-small t-transp">
+        <template v-if="product.quantity">{{returnCurrency() }}{{product.price}} </template>
+        × 
+        <template v-if="product.listing === 'rent' && rentDates.start && rentDates.end">
+          {{ rentalDays }} days
+        </template>
+        
+        <template v-else>
+          {{ product.quantity || 0 }} {{ product.unit || 'pcs' }}
+        </template>
+      </span>
+    </p>  -->
+    
+    <!-- Actions -->
+    <div class="flex gap-thin">
+      <template v-for="(action, index) in actions" :key="index">
+        <div 
+          :class="action.class || 'bg-light'"
+          class="radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover-scale-1"
+          @click="() => action.handler(item, index)"
+        >
+          <component
+            :is="action.component"
+            class="i-regular"
+          />
+        </div>
+      </template>
+      <slot name="actions"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>
-	import { ref, computed, watch } from 'vue';
-
-	import Field from '@martyrs/src/components/Field/Field.vue';
-  import Select from '@martyrs/src/components/Select/Select.vue';
-  import SelectMulti from '@martyrs/src/components/SelectMulti/SelectMulti.vue';
-
-  import { IconAdd, IconDelete} from '@martyrs/src/modules/icons/icons.client.js';
-
-	const props = defineProps({
-	  product: Object,
-	  products: Array,
-	  array: Array,
-	  showPrice: {
-	  	type: Boolean,
-		  default: true
-	  }
-	});
-
-	const emits = defineEmits([
-		'add',
-		'delete',
-		'update'
-	])
-
-	const productSelected = ref(null);
-	const productQuantity = ref(1);
-	const productQuantityType = ref('pcs');
-	const productPrice = ref(0);
-
-	const isProductValid = computed(() => 
-    productSelected.value 
-    && productQuantity.value > 0 
-    && productPrice.value >= 0
-	);
-
-	watch(props.array, () => {
-	  productSelected.value = props.product
-		productQuantity.value = props.product.quantity || 1
-		productPrice.value = props.product.price
-		productQuantityType.value = props.product.type
-	});
-
-	if (props.product) {
-		productSelected.value = props.product
-		productQuantity.value = props.product.quantity || 1
-		productPrice.value = props.product.price
-		productQuantityType.value = props.product.type
-	}
-
-	watch([productSelected, productQuantity, productPrice, productQuantityType], () => {
-	  emits('update', {
-	    ...productSelected.value,
-	    price: productPrice.value,
-	    quantity: productQuantity.value || 1,
-	    type: productQuantityType.value
-	  });
-	});
-
-
-	function addProduct() {
-		emits('add', {
-			...productSelected.value,
-			price: productPrice.value,
-			quantity: productQuantity.value || 1,
-			type: productQuantityType.value
-	  });
-	}
-
-	function deleteProduct() {
-	  emits('delete', {
-			...productSelected.value,
-			price: productPrice.value,
-			quantity: productQuantity.value || 1,
-			type: productQuantityType.value
-	  });
-	}
+import { defineProps } from 'vue';
+import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue';
+import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
+
+const { formatPrice } = useGlobalMixins();
+
+const props = defineProps({
+	image: {
+    type: String,
+  },
+  name: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  title_class: {
+  	type: Array
+  },
+  subtitle: {
+    type: String,
+  },
+  showThumbnail: {
+    type: Boolean,
+    default: true
+  },
+  actions: {
+    type: Array,
+    default: () => []
+    // Expected format:
+    // [
+    //   {
+    //     component: IconEdit,
+    //     handler: (item, index) => {},
+    //     class: 'bg-light' // optional custom class
+    //   }
+    // ]
+  }
+});
 </script>

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

@@ -40,8 +40,8 @@
 					v-else
 					class="radius-medium h-100 w-100"
 				/>
-				<span v-if="product.available <= 0 && product.listing !== 'rent'" class="pos-absolute bg-white t-black pd-thin radius-big p-small t-medium pos-t-medium pos-l-medium">Out of Stock</span>
-				<THC v-if="product.information?.length > 0 && product.information[1]?.name === 'THC'" :product="product" />
+				<span v-if="product.available <= 0 && product.listing !== 'rent'" class="pos-absolute bg-white t-black pd-thin radius-medium p-small t-medium pos-t-medium pos-l-medium">Out of Stock</span>
+				<THC v-if="product.attributes?.length > 0 && product.attributes[1]?.name === 'THC'" :product="product" />
 			</div>
 		</div>
 
@@ -49,10 +49,10 @@
 		<div  class="pd-small cols-1 t-left">
 			<!-- Detail -->
 			<p 
-				v-if="product.information.length > 0"  
+				v-if="product.attributes.length > 0"  
 				class="t-semi t-transp p-small mn-b-micro"
 			>
-				{{product.information[0].value}}
+				{{product.attributes[0].value}}
 			</p>
 			<!-- Name -->
 			<span style=" hyphens: auto;" class="word-break t-truncate p-medium mn-b-thin w-100 w-max-100 ">
@@ -60,7 +60,7 @@
 			</span>
 
 			<p 
-				v-if="product.description && !product.localization && product.listing !== 'rent'" 
+				v-if="product.description && !product.translations && product.listing !== 'rent'" 
 				class="mn-b-small t-transp p-small"
 			>
 				{{product.description.substring(0, 99)}}...

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

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="discounts && discounts.length" class="mn-t-large mn-b-large">
+    <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>
+    </div>
+
+    <div class="flex flex-column flex-wrap gap-thin">
+      <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"
+        @click="selectDiscount(discount)"
+      >
+        <div class="flex flex-wrap gap-thin flex-v-center w-100">
+
+          <Tooltip :text="discount.description || 'No description'">
+            <span class="discount-name t-semi p-medium">{{ discount.name }}</span>
+          </Tooltip>
+
+          <span class="t-main p-medium">
+            {{returnCurrency()}}{{ discount.value }} per {{ currentVariant?.quantity || 1 }}{{ currentVariant?.unit || pcs }}
+          </span>
+
+        </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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import IconDiscount from '@martyrs/src/modules/icons/entities/IconDiscount.vue'
+import Chips from '@martyrs/src/components/Chips/Chips.vue';
+import Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue';
+
+const props = defineProps({
+  discounts: { 
+    type: Array, 
+    default: () => [] 
+  },
+  regularPrice: { 
+    type: [String, Number], 
+    default: 0 
+  },
+  selectedVariant: {
+    type: Object,
+    default: null
+  },
+  productVariants: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['select-discount']);
+
+// Helper to determine if a discount has date conditions
+const hasDateCondition = (discount) => {
+  return discount.date && (discount.date.start || discount.date.end);
+};
+
+// Helper to determine if a discount has time conditions
+const hasTimeCondition = (discount) => {
+  return discount.time && (discount.time.start || discount.time.end);
+};
+
+// Format date range for display
+const formatDateRange = (dateRange) => {
+  if (!dateRange) return '';
+  
+  const start = dateRange.start ? new Date(dateRange.start).toLocaleDateString() : 'Anytime';
+  const end = dateRange.end ? new Date(dateRange.end).toLocaleDateString() : 'No end date';
+  
+  return `${start}-${end}`;
+};
+
+// Format time range for display
+const formatTimeRange = (timeRange) => {
+  if (!timeRange) return '';
+  
+  const start = timeRange.start || 'Anytime';
+  const end = timeRange.end || 'No end time';
+  
+  // Check if we're referencing today
+  const now = new Date();
+  const isToday = true; // Simplification - in a real app we'd check if the date range includes today
+  
+  return isToday ? `${start}-${end} today` : `${start}-${end}`;
+};
+
+// Get the current variant (selected or default to first)
+const currentVariant = computed(() => {
+  return props.selectedVariant || (props.productVariants?.length > 0 ? props.productVariants[0] : null);
+});
+
+const getConditionsAsChips = (discount) => {
+  const chips = [];
+  
+  // Quantity condition - используем quantity из текущего варианта, а не из скидки
+  // if (currentVariant.value?.quantity && currentVariant.value.quantity > 0) {
+  //   chips.push({ 
+  //     text: `+${discount.quantity}`, 
+  //   });
+  // }
+  
+  // Date condition
+  if (hasDateCondition(discount)) {
+    chips.push({ 
+      text: `Valid: ${formatDateRange(discount.date)}` 
+    });
+  }
+  
+  // Time condition
+  if (hasTimeCondition(discount)) {
+    chips.push({ 
+      text: `Available: ${formatTimeRange(discount.time)}` 
+    });
+  }
+  
+  return chips;
+};
+// Handle discount selection
+const selectDiscount = (discount) => {
+  emit('select-discount', discount);
+};
+</script>
+
+<style scoped>
+.discount-card {
+  transition: all 0.2s ease;
+}
+
+.discount-card:hover {
+  border-color: rgb(var(--main));
+}
+</style>

package/src/modules/products/components/blocks/{ImagesThumbnails.vue → ProductImages.vue}

@@ -1,8 +1,8 @@
 <template>
-  <div class="w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative">
+  <div class="w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative">
     <!-- Main image container -->
     <div class="pd-semi w-100 bg-light radius-semi o-hidden" @click="openPopup(images[0])">
-      <Images360
+      <Image360
         v-if="product && product.image3d"
         class="h-100 w-100"
         :imagePath="`/assets/images/products/${product.image3d}`"
@@ -50,10 +50,9 @@ 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 Images360 from '@martyrs/src/modules/products/components/blocks/Images360.vue'
+import Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'
 
 const props = defineProps({
   images: {

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

@@ -0,0 +1,125 @@
+<template>
+  <div class="w-100">
+    <div v-if="selected" class="mn-b-small">
+      <span class="h2 t-bold">${{ selected.price.toFixed(2) }}</span>
+    </div>
+
+    <div
+      v-for="group in groups"
+      :key="group.label"
+      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">
+        <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="[
+            isSelected(group, item) ? 'br-main' : 'br-black-transp-10',
+            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',
+          ]"
+        >
+          <img
+            v-if="item.img"
+            :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">
+            {{ item.text }}
+          </span>
+          <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"
+          >
+            Selected
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+
+const props = defineProps({ productVariants: Array });
+const emit = defineEmits(['variant-selected', 'update-images']);
+
+const selectedAttributes = ref({});
+const selected = ref(null);
+
+const hasAttrs = computed(() =>
+  props.productVariants.some(v => v.attributes?.length)
+);
+
+const groups = computed(() => {
+  if (hasAttrs.value) {
+    const labels = [...new Set(props.productVariants[0].attributes.map(a => a.name))];
+    return labels.map((lbl, i) => ({
+      label: lbl,
+      items: [...new Set(
+        props.productVariants.map(v => v.attributes.find(a => a.name === lbl)?.value)
+      )]
+        .filter(Boolean)
+        .map(val => {
+          const v = props.productVariants.find(x => x.attributes.find(a => a.name === lbl && a.value === val));
+          return {
+            key: lbl + val,
+            value: val,
+            img: i === 0 ? v.images?.[0] : null,
+            off: !v.available,
+            text: val,
+          };
+        }),
+    }));
+  }
+  if (props.productVariants.length > 1) {
+    return [{
+      label: 'Options',
+      items: props.productVariants.map(v => ({
+        key: v._id,
+        variant: v,
+        img: v.images?.[0],
+        off: !v.available,
+        text: v.name || v.sku,
+      })),
+    }];
+  }
+  return [];
+});
+
+const pick = v => {
+  if (!v.available) return;
+  selectedAttributes.value = Object.fromEntries(v.attributes?.map(a => [a.name, a.value]) || []);
+  selected.value = v;
+  emit('variant-selected', v);
+  v.images?.length && emit('update-images', v.images);
+};
+
+const pickAttr = (lbl, val) => {
+  const test = { ...selectedAttributes.value, [lbl]: val };
+  if (!props.productVariants.some(v =>
+    Object.entries(test).every(([k, x]) =>
+      v.attributes.find(a => a.name === k && a.value === x)
+    )
+  )) return;
+  selectedAttributes.value = test;
+};
+
+watch(selectedAttributes, attrs => {
+  const m = props.productVariants.find(v =>
+    Object.entries(attrs).every(([k, x]) => v.attributes.find(a => a.name === k && a.value === x))
+  );
+  m ? pick(m) : (selected.value = null);
+});
+
+onMounted(() => props.productVariants.length === 1 && pick(props.productVariants[0]));
+
+const isSelected = (g, i) =>
+  g.label === 'Options'
+    ? selected.value?._id === i.variant?._id
+    : selectedAttributes.value[g.label] === i.value;
+</script>

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

@@ -1,48 +1,45 @@
 <template>
-	<div 
-    class="radius-small"
-  >
-    <span 
-      :class="
-        { 
-          'h4': !size, 
-          'p-medium t-semi': size === 'small',
-          'h3 t-semi': size === 'big'
-        }
-      " 
-      class="t-second "
+  <div class="radius-small">
+    <span
+      :class="{
+        'h4': !size,
+        'p-medium t-semi': size === 'small',
+        'h3 t-semi': size === 'big'
+      }"
+      class="t-second"
     >
-      {{returnCurrency() + product.price}}
+      {{ returnCurrency() + variant.price }}
     </span>
-    
-    <span 
-      :class="
-        { 
-          'p-medium': !size, 
-          'p-small': size === 'small',
-          'p-big': size === 'big'
-        }
-      " 
-      class="p-small mn-l-micro  t-transp"
+
+    <span
+      :class="{
+        'p-medium': !size,
+        'p-small': size === 'small',
+        'p-big': size === 'big'
+      }"
+      class="p-small mn-l-micro t-transp"
     >
-      {{ product.listing === 'rent' ? 'per day' :  'for ' + product.quantity + product.unit }} 
+      {{ product.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}
     </span>
-    
-    <p 
-      v-if="product.sale"  
-      class="pd-r-small t-transp t-transp p-medium line-through price"
+
+    <p
+      v-if="variant.sale"
+      class="pd-r-small t-transp p-medium line-through price"
     >
-        {{ returnCurrency() }}} {{(product.price / 100) * (100 + product.sale) }}
+      {{ returnCurrency() + ((variant.price / 100) * (100 + variant.sale)) }}
     </p>
-
   </div>
 </template>
 
-<script setup="props">
-  import { ref, } from 'vue';
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  product: Object,
+  size: String
+});
 
-  const props = defineProps({
-    product: Object,
-    size: String
-  });
-</script>
+const variant = computed(() => {
+  return props.product?.variants?.[0] || props.product;
+});
+</script>