@ozdao/prometheus-framework 0.2.322 → 0.2.324

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

@@ -1,72 +1,49 @@
 <template>
 	<div 
-      v-if="product.listing !== 'rent'"
-    class="price-tag radius-small"
-    :class="
-      { 
-        'bg-main': !product.sale, 
-        'bg-third-small': product.sale,
-      }
-    " 
+    class="radius-small"
   >
-    <p 
+    <span 
       :class="
         { 
           'h4': !size, 
-          'h5 t-semi pd-thin': size === 'small',
-          'h3 t-semi pd-small': size === 'big'
+          'h5 t-semi': size === 'small',
+          'h3 t-semi': size === 'big'
+        }
+      " 
+      class="t-second"
+    >
+      {{product.price_currency + product.price}}
+    </span>
+    
+    <span 
+      v-if="product.listing === 'rent'"
+      :class="
+        { 
+          'p-medium': !size, 
+          'p-small': size === 'small',
+          'p-big': size === 'big'
         }
       " 
+      class="p-small t-transp"
+    >
+      {{ product.listing === 'rent' ? '/ per day' : '' }} 
+    </span>
+    
+    <p 
+      v-if="product.sale"  
+      class="pd-r-small t-transp t-transp p-medium line-through price"
     >
-      {{product.price }} {{product.price_currency}} {{ product.listing === 'rent' ? 'per day' : '' }} 
+        {{(product.price / 100) * (100 + product.sale) }} {{product.price_currency}} 
     </p>
-    <p v-if="product.sale"  class="pd-r-small t-transp t-transp p-medium line-through price">{{(product.price / 100) * (100 + product.sale) }} {{product.price_currency}} </p>
-  </div>
 
-  <div
-    v-else
-    class="mn-r-auto"
-  >
-    <span class="t-second h5 "> {{product.price+product.price_currency }}</span> <span class="p-small t-transp">/ per day </span>
   </div>
 </template>
 
 <script setup="props">
-/////////////////////////////
-// COMPONENT DEPENDENCIES
-/////////////////////////////
-import { ref, } from 'vue';
-
-/////////////////////////////
-// HELPERS
-/////////////////////////////
-
-/////////////////////////////
-// CREATED
-/////////////////////////////
-
-const props = defineProps({
-  product: Object,
-  size: String
-});
-
-/////////////////////////////
-// MOUNTED
-/////////////////////////////
-</script>
-
-<style lang="scss">
-.price-tag {
-  background: #058;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  position: relative;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  color: black;
-}
+  import { ref, } from 'vue';
 
-</style>
+  const props = defineProps({
+    product: Object,
+    size: String
+  });
+</script>

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

@@ -1,7 +1,169 @@
 <template>
-	<div class="h-100 w-100 bg-white ">
+	<div class="h-100 w-100 mobile:pd-thin pd-big bg-white ">
 		<!-- <Breadcrumbs class="bg-light radius-big pd-small"/> -->
-		<SectionProduct v-if="product" :product="product" :user="auth.state.user" class="pos-relative"/>
+		<div class="cols-2-1_2 w-100 gap-medium">
+		
+			<div class="w-100 o-hidden  bg-light radius-big flex-nowrap flex-column flex pos-relative">
+				<div class="pd-semi w-100 bg-light radius-semi o-hidden">
+					<!-- PRODUCT IMAGE -->
+					<Images360
+						v-if="product && product.image3d"
+						class="h-100 w-100"
+						:imagePath="`/assets/images/products/${product.image3d}`"
+						:imageCount="36"
+					/>
+
+					<img loading="lazy" 
+						v-if="images[0] && !product.image3d"
+						class="h-max h-max-15r bg-white radius-semi w-100"
+						style="object-fit: contain;"
+						:src="(FILE_SERVER_URL || '') + images[0]"
+					/>
+
+					<PlaceholderImage
+						v-if="!images[0] && !product.image3d"
+						class="h-max-20r h-100 w-100"
+						style="object-fit: cover;"
+					/>
+
+				</div>
+
+				<ImagesThumbnails
+					v-if="images.length > 1"
+					:images="images"
+					class="pd-semi pd-t-zero"
+				/>
+			</div>
+
+			<div class="pos-relative w-100 h-100 flex-column flex-h-center flex">
+
+				<IconEdit
+					v-if="accesses && hasAccess(route.params._id, 'products', 'edit', accesses)"
+					@click="$router.push({
+						name: 'ProductEdit', 
+						params: {
+							_id: product.owner.target,
+							product: product._id
+						}
+					})" 
+					class="pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
+				/>
+
+				<!-- Name -->
+				<h2 class="w-100 h1-product mn-b-small">{{ product.name }}</h2>
+
+				<Price :product="product" size="big" class="flex gap-thin flex-center pd-thin br-solid br-1px br-black-transp-10 w-max mn-b-medium" />
+
+				<!-- Price -->
+				<div v-if="product.description || product.specification" class="h-min-5r o-hidden radius-small bg-light mn-b-medium pos-relative">
+					<Tab 
+						v-model:selected="tabProduct"
+						:tabs="[
+							{name: 'Description', value: 'description'},
+							{name: 'Specifications', value: 'specifications'}
+						]"
+						tabClass="pd-thin bg-white radius-thin p-small uppercase t-medium"
+						class="gap-micro bg-light pos-relative z-index-2 pd-thin br-solid br-b br-black-transp-10"
+					/>
+					<transition name="slide-fade">
+						<div v-if="tabProduct === 'description'"  class=" pd-medium">
+							<p v-if="product.description && !product.localization < 1 && !recommendation" class="w-100 t-transp">
+								{{ product.description }}
+							</p>
+
+							<p v-if="product.localization && product.localization.length > 1 && !recommendation" class="w-100 t-transp">
+								{{ t('description') }}
+							</p>
+						</div>
+
+						<div 
+							v-else
+							class="cols-2  pd-medium w-100 gap-small"
+						>
+							<div 
+								v-if="product.information.length > 0" 
+								v-for="information in product.information" 
+								class="w-100 pd-small radius-small bg-white product-information"
+							>
+								<p class="t-demi">{{ information.name }}</p>
+								<p>{{ information.value }}</p>
+							</div>
+						</div>
+					</transition>
+				</div>
+
+							<!-- Modifications -->
+				<!-- <div v-if="product.modifications.length > 0" class="flex-nojustify  flex">
+					<SelectElement v-if="sizes2.length > 0" :elements="sizes2" :selected="product.selectedSize" class="mn-r-medium" />
+				</div> -->
+
+				<!-- Actions -->
+				<div class="w-max-33r">
+				  <button
+				    v-if="product.quantity > 0 || product.listing === 'rent'"
+				    @click="product.listing === 'rent' ? openPopup() : addToCart(product)" 
+				    class="cursor-pointer pd-small radius-big w-max mobile:w-100 bg-main button"
+				  > 
+				    <div class="gap-thin flex flex-center flex-nowrap">
+				      <IconShopcartAdd v-if="product.listing === 'rent'" class="i-semi" />
+				      <span>{{ t('addtoorder') }}</span>
+				    </div>
+				  </button>
+
+				  <div 
+				    v-else 
+				    class="flex-center flex uppercase radius-big t-black w-max pd-small t-medium bg-grey h-3r w-100 mn-r-smallbutton"
+				  >
+				    Out of Stock
+				  </div>
+				</div>
+				<!-- Shopcart Adding Popup -->
+				<Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-medium pd-medium bg-white o-hidden">
+		      <h5 class="w-100 t-center mn-b-small">Select Rent Period</h5>
+		       <Calendar
+		      	:date="rentDate"
+		      	:allowRange="true"
+		      	class="bg-light radius-small"
+		      />
+
+		      <p class="flex flex-nowrap pd-t-small">
+		      	<span class="w-100 t-transp">$ 400 x 4 days</span>
+		      	<span class="w-100 t-right">$2000</span>
+		      </p>
+		      <p class="flex flex-nowrap pd-t-small">
+		      	<span class="w-100 t-transp">Insurance Fee</span>
+		      	<span class="w-100 t-right">$200</span>
+		      </p>
+		      <p class="flex flex-nowrap br-black-transp-10 br-solid br-b pd-b-small pd-t-small">
+		      	<span class="w-100 t-transp">VAT (20%)</span>
+		      	<span class="w-100 t-right">$300</span>
+		      </p>
+		     
+		     	<p class="p-big flex flex-nowrap pd-b-small pd-t-small">
+		      	<span class="w-100 t-medium ">In Total</span>
+		      	<span class="w-100 t-main t-medium t-right">$2500</span>
+	      	</p>
+
+	      	<Button
+				    v-if="product.quantity > 0 || product.listing === 'rent'"
+				    :submit="() => addToCart(product)" 
+				    :callback="() => closePopup()"
+				    :disabled="product.listing !== 'rent' && validateToCard(product)"
+				    :text="{
+				      success: 'Added',
+				      error: 'Error'
+				    }"
+				    class="h-3r w-100 bg-main button"
+				  > 
+				    <div class="gap-thin flex flex-center flex-nowrap">
+				      <IconShopcartAdd v-if="product.listing === 'rent'" class="i-semi" />
+				      <span>{{ t('addtoorder') }}</span>
+				    </div>
+				  </Button>
+		    </Popup>
+
+			</div>
+		</div>
 
 		<div class="h-max pos-relative">
 		  <h3 class="pd-medium pd-b-small">Most Popular</h3>
@@ -13,10 +175,25 @@
 <script setup="props">
 	// Import components
 	// import Breadcrumbs from '@pf/src/components/Breadcrumbs/Breadcrumbs.vue'
+	import Button from '@pf/src/components/Button/Button.vue'
+	import Popup from '@pf/src/components/Popup/Popup.vue'
+	import Tab from '@pf/src/components/Tab/Tab.vue'
+	import Calendar from '@pf/src/components/DatePicker/Calendar.vue'
+
+	import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+	import IconShopcartAdd from '@pf/src/modules/icons/actions/IconShopcartAdd.vue'
+
+	import PlaceholderImage from '@pf/src/modules/icons/placeholders/PlaceholderImage.vue'
+
+	import Images360 	from '@pf/src/modules/products/components/blocks/Images360.vue'
+	import ImagesThumbnails from "@pf/src/modules/products/components/blocks/ImagesThumbnails.vue";
+
+	import Price from '@pf/src/modules/products/components/elements/Price.vue'
+
 	import PopularProducts 	from '@pf/src/modules/products/components/sections/PopularProducts.vue'
 	import SectionProduct from '@pf/src/modules/products/components/sections/SectionProduct.vue'
 	// Import libs
-	import { computed, onMounted } from 'vue'
+	import { computed, ref, onMounted } from 'vue'
 	import { useRoute,useRouter } from 'vue-router'
 	import { useI18n }    from 'vue-i18n'
 	
@@ -24,32 +201,77 @@
  	import * as products from '@pf/src/modules/products/store/products';
   import * as categories from '@pf/src/modules/products/store/categories';
 
+	import * as shopcart from '@pf/src/modules/orders/store/shopcart';
+
 	// Accessing router and store
 	const route = useRoute()
 	const router = useRouter()
-
 	
 	route.meta.title.en = products.state.current.name
 	route.meta.title.ru = products.state.current.name
 
 	// Accessing state
 	const product = computed(() => products.state.current)
+	const images = computed(() => products.state.current.images)
+
+	let rentDate = ref({
+		start: null,
+		end: null
+	})
+
+
+	const tabProduct = ref('description')
 
 	const text = {
-		messages: {
-		}
-	};
+	  en: {
+	  	addtoorder: 'Add to Cart',
+	    fastorder: 'Fast Order'
+	  },
+	  ru: {
+	  	addtoorder: 'Добавить в корзину',
+	    fastorder: 'Быстрый заказ'
+	  }
+	}
+
+  const { t } = useI18n({messages: text})
 
 	onMounted(async ()=> {
 		await products.actions.read({_id: route.params.product});
-
 	})
-	
-	// products.state.current.localization.forEach(localization => {
-  	// if (localization) text.messages[localization.locale].description = localization.text
-	// })
 
-  const { t } = useI18n(text)
+	// Methods
+	function validateToCard(product) {
+	  if (product.quantity > 0) {
+	    return false
+	  }
+	  return true
+	}
+
+	const isPopupVisible = ref(false);
+
+	const openPopup = () => {
+	  isPopupVisible.value = true;
+	};
+
+	const closePopup = () => {
+	  isPopupVisible.value = false;
+	};
+
+	async function addToCart(product) {
+    try {
+      if (shopcart.state.organization !== product.owner.target) {
+        shopcart.state.organization = product.owner.target
+        shopcart.state.positions = []
+      }
+      
+      await shopcart.actions.addProductToCart(product, product.owner.target, rentDate)
+
+      return true
+    } catch (error) {
+      console.error('Ошибка при добавлении товара в корзину:', error)
+      throw error
+    }
+	}
 </script>
 
 <style lang="scss">

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

@@ -35,16 +35,17 @@
 
 		<div class="radius-big pos-relative w-100 h-100 flex-column flex-justify flex col">
 
-		<!-- <IconEdit
-			@click="$router.push({
-				name: 'ProductEdit', 
-				params: {
-					_id: product.organization,
-					product: product._id
-				}
-			})" 
-			class="pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
-		/> -->
+			<IconEdit
+				v-if="accesses && hasAccess(route.params._id, 'products', 'edit', accesses)"
+				@click="$router.push({
+					name: 'ProductEdit', 
+					params: {
+						_id: product.owner.target,
+						product: product._id
+					}
+				})" 
+				class="pos-absolute pos-t-regular pos-r-regular i-regular t-transp"
+			/>
 
 			<h2 v-if="recommendation" class="t-main t-semi p-big">{{t('airecommend')}}</h2>
 			<!-- Name -->
@@ -99,8 +100,21 @@
 				</transition>
 			</div>
 
+			<div v-if="product.listing === 'rent'" class="mn-t-small max-w-33rem mobile-w-100 t-white gap-small cols-2">
+				<Button
+					:submit="() => { addToCart(product) } " 
+					:text="{
+						success: ' ✔ Added',
+						error: 'error'
+					}"
+					class="h-3r w-100 mn-r-small bg-main button"
+				> 
+					{{ t('addtoorder') }}
+				</Button>
+			</div>
+
 			<!-- Actions -->
-			<div v-if="product.listing !== 'rent'" class="max-w-33rem mobile-w-100 t-white gap-small cols-2">
+			<div v-else class="mn-t-small max-w-33rem mobile-w-100 t-white gap-small cols-2">
 				<Button
 					v-if="product.quantity > 0"
 					:submit="a => addToCart(product)" 
@@ -135,6 +149,8 @@ import Price from '@pf/src/modules/products/components/elements/Price.vue'
 // import SelectElement 	from '@/components/elements/SelectElement.vue'
 
 import { computed, ref } from 'vue'
+
+	import { useRoute,useRouter } from 'vue-router'
 import { useI18n }    from 'vue-i18n'
 
 import * as shopcart from '@pf/src/modules/orders/store/shopcart';
@@ -148,20 +164,27 @@ const props = defineProps({
   user: {
     type: String,
   },
+  accesses: {
+    type: Object,
+	  default: null
+  },
   recommendation: {
   	type: String
   }
 })
 
+
+
+	const route = useRoute()
+	const router = useRouter()
+
 // Computed properties
 const images = computed(() => {
   return props.product.images
 })
 
-
 const tabProduct = ref('description')
 
-
 const text = {
 	messages: {
 	  en: {
@@ -179,11 +202,7 @@ const text = {
 	}
 }
 
-// props.product.localization.forEach(localization => {
-	// if (localization) text.messages[localization.locale].description = localization.text
-// })
-
- const { t } = useI18n(text)
+const { t } = useI18n(text)
 
 // Methods
 function validateToCard(product) {
@@ -192,12 +211,18 @@ function validateToCard(product) {
   }
   return true
 }
-
-function addToCart(product) {
-	if (shopcart.state.organization !== product.organization) {
-		shopcart.state.positions = []
-		shopcart.state.organization = product.organization
-	}
-  shopcart.actions.addProductToCart(product, product.organization)
+async function addToCart(product) {
+	console.log(product)
+    try {
+        if (shopcart.state.organization !== product.owner.target) {
+            shopcart.state.organization = product.owner.target
+            shopcart.state.positions = []
+        }
+        await shopcart.actions.addProductToCart(product, product.owner.target)
+        return true // Make sure we return something
+    } catch (error) {
+        console.error('Ошибка при добавлении товара в корзину:', error)
+        throw error
+    }
 }
 </script>

package/src/modules/products/products.client.js

@@ -28,8 +28,6 @@ import EditProductInfo from './components/sections/EditProductInfo.vue';
 
 // Elements
 import Price from './components/elements/Price.vue';
-import THC from './components/elements/THC.vue';
-
 // Pages
 import Product from './components/pages/Product.vue';
 import ProductEdit from './components/pages/ProductEdit.vue';
@@ -65,7 +63,6 @@ const ModuleProducts = {
     components: {
       // Elements
       Price,
-      THC,
       // Blocks
       ImagesThumbnails,
       LeftoverPositions,
@@ -113,7 +110,6 @@ export {
   EditProductInfo,
   // Elements
   Price,
-  THC,
   // Pages
   Product,
   ProductEdit,

package/src/styles/base/all.scss

@@ -3,16 +3,12 @@
 @import './scrolling';
 @import './shadow_transitions_hover_refactor';
 
-// *[disabled] {
-// 	opacity: 0.75;
-// 	pointer-events: none;
-// 	cursor: default;
-// }
 
 .disabled {
-	opacity: 0.75;
-	pointer-events: none;
-	cursor: default;
+	opacity: 0.75  !important;
+ 	pointer-events: none  !important;
+ 	cursor: default  !important;
+ 	color: rgba(var(--black), 0.5)  !important;
 }
 
 .unactive { opacity: 0.0; }
@@ -36,15 +32,17 @@
 
 
 body { 
-	.w-auto { width: auto  !important; }
-	.w-min 	{ width: min-content  !important; }
-	.w-fit 	{ width: fit-content  !important; }
-	.w-max 	{ width: max-content  !important; }
+	.bs-black-small { box-shadow: 0px 0px 17px -3px rgba(var(--black), 0.1);  }
 	
-	.h-auto { height: auto  !important; }
-	.h-min 	{ height: min-content  !important; }
-	.h-fit 	{ height: fit-content  !important; }
-	.h-max 	{ height: max-content  !important; }
+	.w-auto { width: auto; }
+	.w-min 	{ width: min-content; }
+	.w-fit 	{ width: fit-content; }
+	.w-max 	{ width: max-content; }
+	
+	.h-auto { height: auto; }
+	.h-min 	{ height: min-content; }
+	.h-fit 	{ height: fit-content; }
+	.h-max 	{ height: max-content; }
 
 	.w-m-66r { width: min(100%, 66rem); }
 	.w-m-60r { width: min(100%, 60rem); }
@@ -111,6 +109,7 @@ body {
 	.t-transp { opacity: 0.5					}
 	.t-violet { color: violet					}
 	.t-blue { color: #0057FF; 			}
+	.t-green   { color: rgb(var(--green));;		}
 	.t-red 	{ color: rgba(var(--red), 1);; 			}
 	// WhiteSpace
 	.t-nowrap { white-space: nowrap; }
@@ -164,11 +163,7 @@ body {
 	.o-auto 		{overflow: auto; }
 	.o-visible 	{overflow: visible; } 
 	// Display
-	.d-flex 				{display: flex; }
-	.d-block 				{display: block; }
-	.d-inline-block {display: inline-block; }
-	.d-inline-flex 	{display: inline-flex; }	
-	.d-grid 				{display: grid; }	
+
 	// Flex
 	.flex {
 		display: flex;
@@ -177,6 +172,12 @@ body {
 		&-center 					{ align-items: center; justify-content: center; }
 	}
 
+	.d-flex 				{display: flex; }
+	.d-block 				{display: block; }
+	.d-inline-block {display: inline-block; }
+	.d-inline-flex 	{display: inline-flex; }	
+	.d-grid 				{display: grid; }	
+
 	.align-self-start {
 		align-self: start;
 	}

package/src/styles/config.scss

@@ -158,7 +158,7 @@
 	// 3. TEXT VARIABLES
 	///////////////////////////////////////
 	--font: 'Avenir Next World';
-	--font-main: 'Days One';
+	--font-main: 'Avenir Next World';
 	--font-second: 'Avenir Next World';
 	////////////////////////////////////////
 	// 4. BREAKPOINTS
@@ -200,7 +200,7 @@ $rem: (
   '40r': 40rem,
   '35r': 35rem,
   '30r': 30rem,
-  '25r': 20rem,
+  '25r': 25rem,
   '20r': 20rem,
   '15r': 15rem,
   '10r': 10rem,