@ozdao/prometheus-framework 0.2.92 → 0.2.94

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

@@ -1,17 +1,22 @@
 <template>
   <div class="bg-grey radius-medium w-100">
     <h3 class="pd-medium">Tracking History</h3>
-    <div v-for="status in statuses" :key="status.value" class="w-100 br-t br-solid br-black-transp-10 pd-medium flex-v-center flex-nowrap flex">
+    <div v-for="status in statusDetailedHistory" :key="status" class="w-100 br-t br-solid br-black-transp-10 pd-medium flex-v-center flex-nowrap flex">
       <div class="flex-center flex i-big radius-extra br-solid br-2px br-black-transp-10 mn-r-small">
-        
         <IconCheckmark
-          v-if="isStatusInHistory(status.value)"
+          v-if="isStatusInHistory(status.status)"
           class="i-medium"
         />
       </div>
-      <p class="h4 w-8r">{{status.name}}</p>
+
+      <div>
+        <p class="h4 w-8r">{{status.status}}</p>
+        <p v-if="status.timestamp" class="h5 w-8r">{{formatDate(status.timestamp)}}</p>
+      </div>
+      
+      <p class="h5 w-8r">{{status._id}}</p>
        <!-- <button v-if="status.value === 'delivered'"  @click="printReceipt()" class="mn-l-auto bg-main button radius-big">Print</button> -->
-      <button v-if="edit" :disabled="!isNextPossibleStatus(status.value)" @click="setStatus(status)" class="mn-l-auto bg-main button radius-big">Set status</button>
+      <button v-if="edit" :disabled="!isNextPossibleStatus(status)" @click="setStatus(status)" class="mn-l-auto bg-main button radius-big">Set status</button>
     </div>
   </div>
 </template>
@@ -32,46 +37,22 @@ const props = defineProps({
   },
   edit: {
     type: Boolean
+  },
+  statuses: {
+    type: Array
   }
 })
 
-// Инициализация состояния компонента
-const statuses = ref([
-  {
-  value: 'created',
-  name: 'Received',
-  nextstatus: 'Confirming order...',
-  description: 'Your order has been successfully created. Our manager will contact you within five minutes to confirm your order.'
-  },{
-    value: 'confirming',
-    name: 'Confirming',
-    nextstatus: 'Confirming order...',
-    description: 'Your order has been confirmed. We are now processing your items and preparing them for shipment.'
-  },{
-    value: 'confirmed',
-    name: 'Confirmed',
-    nextstatus: 'Order is confirmed. Packing order...',
-    description: 'Your order has been confirmed. We are now processing your items and preparing them for shipment.'
-  },{
-    value: 'packing',
-    name: 'Packing',
-    nextstatus: 'Packing order...',
-    description: 'Your order is now awaiting shipment. Once shipped, you will receive a notification with tracking information.'
-  },{
-    value: 'packed',
-    name: 'Packed',
-    nextstatus: 'Delivering order...',
-    description: 'Your order is now awaiting shipment. Once shipped, you will receive a notification with tracking information.'
-  },{
-    value: 'in delivery',
-    name: 'Delivering',
-    description: 'Your order is currently in transit. Our delivery team is working hard to get your items to you as soon as possible.'
-  },{
-    value: 'delivered',
-    name: 'Delivered',
-    description: 'Congratulations! Your order has been successfully delivered. If you have any concerns or feedback, feel free to contact us.'
-  }
-]);
+const statusDetailedHistory = props.statuses.map(status => {
+  const historyEntry = props.statusHistory.find(entry => entry.status === status);
+
+  return {
+    status,
+    timestamp: historyEntry ? historyEntry.timestamp : 'N/A',
+    inHistory: !!historyEntry,
+    _id: historyEntry ? historyEntry._id : null
+  };
+});
 
 const statusCurrent = ref(props.statusCurrent);
 const statusHistory = ref(props.statusHistory);
@@ -83,20 +64,11 @@ const isStatusInHistory = (statusValue) => {
 
 // Проверка, является ли статус следующим возможным действием
 const isNextPossibleStatus = (statusValue) => {
-  const currentIndex = statuses.value.findIndex(status => status.value === statusCurrent.value);
-  console.log(status.status === statusCurrent.value)
-  console.log(statusCurrent.value)
-   console.log(status)
+  const currentIndex = props.statuses.findIndex(status => status === statusCurrent.value);
   const nextIndex = currentIndex + 1;
-  return statuses.value[nextIndex] && statuses.value[nextIndex].value === statusValue;
+  return props.statuses[nextIndex] && props.statuses[nextIndex] === statusValue;
 };
 
-// Функция установки нового статуса
-const setStatus = async (newStatus) => {
-  // console.log(status)
-  // orders.state.current.status = status.value
-  // await orders.actions.update(orders.state.current)
-} 
 
 const printerIP = ref('192.168.1.197');
 const printerPort = ref(9100);

package/src/modules/orders/components/pages/Order.vue

@@ -210,7 +210,7 @@
 <script setup="props">
 	import { computed, ref, onMounted  } from 'vue'
 	import { useRouter, useRoute } from 'vue-router'
-	// Block
+	
 	import CardOrderItem  from '@pf/src/modules/orders/components/blocks/CardOrderItem.vue'
 	import CardOrganization from '@pf/src/modules/organizations/components/blocks/CardOrganization.vue'
 
@@ -242,7 +242,6 @@
 	    _id: order.value?.owner.target._id,
 	    location: globals.state.position?.location,
 	  });
-
 	})
 
 	let cartTotalPrice = computed(() => {
@@ -262,10 +261,7 @@
 
 	    const product = productsOrganization.value.find(product => product._id === _id)
 
-	    console.log(product)
-	    console.log(productsOrganization)
-
-	    return {
+		    return {
 	      name: product.name,
 	      images: product.images,
 	      price: product.price,

package/src/modules/orders/components/pages/OrderBackoffice.vue

@@ -0,0 +1,393 @@
+<template>
+	<div v-if="order && orderOrganization" class="pd-thin"> 
+		
+		<SectionPageTitle
+      :title="`Order is ${order.status}`"
+      class="mn-b-small bg-grey bg-grey radius-big"
+    />
+
+	  <div v-if="order" class="mn-b-thin pos-relative w-100 bg-main radius-big pd-big">
+	  	<div class="mn-b-small flex-nowrap flex">
+	  		<p class="t-medium p-medium mn-r-auto">
+	        Progress
+	      </p>
+
+		  	<p class="t-medium p-medium">
+	        Order No: <span class="p-small t-transp">#{{order._id}}</span>
+	      </p>
+	  	</div>
+
+
+  	<h2 class="mn-b-small"></h2>
+
+  	<div class="radius-extra mn-b-medium flex-nowrap flex pos-relative ">
+	    <div v-for="(status, index) in statuses" :key="index" class="mn-r-thin w-20">
+	      <div
+	      	class="bg-grey br-anim br-glow radius-extra h-1r w-100"
+	        :class="
+				    { 'br-glow-anim': isActiveStatus(index) },
+				    { 't-transp': !isActiveStatus(index) },
+				    { 'blink': order.status === statuses[index] && getNextStatus(order.status) }
+				  "
+	      />
+	      <div 
+	      	:class="{ 't-transp': !isActiveStatus(index) }"
+				  class="mn-t-thin t-medium uppercase">{{ statusLabels[index] }}</div>
+	    	</div>
+		  </div>
+
+	  	<div class="flex-nowrap flex">
+	  		<div class="w-max flex-v-center gap-thin flex-nowrap flex pd-thin radius-small bg-white-transp-20">
+	  			<IconTime class="i-semi t-transp" fill="rgb(var(--black)" />
+          <p class="t-medium mn-r-auto">Estimated Arrival {{formatDate(order.deadline)}}</p>
+		  	</div>
+
+		  	<button v-if="getNextStatus(order.status) && route.name === 'Order Edit'" @click="openStatusPopup" class="mn-l-auto bg-black t-white button">  
+			    Mark as {{ getStatusLabel(getNextStatus(order.status)) }}  
+			  </button>
+	  	</div>
+	  </div>
+
+	  <Popup 
+      title="Change status" 
+      @close-popup="closeStatusPopup" 
+      :isPopupOpen="isOpeStatusPopup"
+      class="bg-white w-min-30r w-max-30r radius-big pd-big"
+    >
+  		<p class="bg-grey radius-small pd-small mn-b-thin">Estimated Arrival {{formatDate(order.deadline)}}</p>
+    	<ul class="bg-grey pd-small radius-small flex gap-thin flex-column mn-b-semi">
+  			<CardOrderItem
+  				v-for="(product, index) in orderProducts" :key="product._id"
+  				:editable="false" 
+  				:product="product" 
+  			/>
+      </ul>
+    	<button @click="setNextStatus"  class="w-100 bg-black-small t-white button">
+    		{{'Confirm Changing to ' + getStatusLabel(getNextStatus(order.status))}}
+    	</button>
+	 	</Popup>
+
+
+	  
+	  <div v-if="order" class="gap-thin cols-2">
+
+	    <div class="w-100">
+
+
+		    <CardOrganization 
+		    	v-if="orderOrganization[0]"
+		      :organization="orderOrganization[0]"
+		      :showRating="true"
+		      :showFollowers="false"
+		      :showProducts="false"
+		      class="bg-grey mn-b-thin w-100 o-hidden radius-big pd-small "
+		    />
+
+
+		    <div 
+		    	class="mn-b-thin bg-grey w-100 o-hidden radius-medium "
+		    >
+		    	<div class="pd-small flex-nowrap flex">
+			    	<div class="mn-r-auto">
+				    	<span class="d-block t-medium p-medium">Your order is</span>
+					    <span class=" t-lh-075 h2 d-block mn-b-small">{{order.status}}</span>
+					    <p class="pd-t-nano pd-b-nano pd-r-thin pd-l-thin radius-extra bg-black t-white w-max">as on 29 aug 2021, Friday</p>
+					  </div>
+					  <div class="t-right">
+					  	Cancel order<br>
+					  	Exchange item
+					  	<hr class="mn-b-thin mn-t-thin">
+					  	For Delivery Queries Contact Us
+					  	
+					  </div>
+					</div>
+
+					<div class="pd-small cols-2 br-t br-black-transp-10 br-solid">
+			    	<p class="w-100 t-medium p-medium">
+			      	Phone
+			      </p>
+
+			      <p class="w-100 t-right ">
+			        {{order.user?.number}} 
+			      </p>
+			    </div>
+
+			    <div v-if="order.user?.messenger.type" class="pd-small cols-2 br-t br-black-transp-10 br-solid">
+			    	<p class="w-100 t-medium p-medium">
+			      	{{order.user?.messenger.type}}
+			      </p>
+
+			      <p class="w-100 t-right ">
+			        {{order.user?.messenger.value}} 
+			      </p>
+			    </div>
+
+			    <div class="pd-small  cols-2  br-t br-black-transp-10 br-solid">
+			    	<p class="t-medium p-medium">
+			      	Address
+			      </p>
+
+			      <p class="w-100 t-right">
+			        <!-- {{order.delivery?.address.slice(0,64)}}  -->
+			      </p>
+			    </div>
+
+			    <div class="pd-small  cols-2  br-t br-black-transp-10 br-solid">
+			    	<p class="mn-b-small t-medium p-medium">
+			      	Delivery
+			      </p>
+
+			      <p class="w-100 t-right mn-b-small">
+			        {{order.delivery?.type}} 
+			      </p>
+			    </div>
+
+				</div>
+				
+	     	<StatusHistory 
+	     		v-if="orders.state.current.status_history"
+	     		:statuses="statuses"
+	     		:statusHistory="orders.state.current.status_history"
+	     		:statusCurrent="orders.state.current.status"
+	     		:edit="route.name === 'Order Edit'"
+	     	/>
+
+	     <!-- 	<button 
+	     	@click="requestPayment(order)"
+	     	v-if="
+	     		order.status === 'Подтвержден' 
+	     		&& order.payment.type === 'Online'
+	     		&& payment.Status !== 'CONFIRMED'
+	     		&& payment.Status !== 'REFUNDED'
+	     	" 
+	     	class='w-100 button'>Оплатить заказ</button> -->
+	     	<span class="t-transp" v-if="payment && payment.Status === 'CONFIRMED'">Paid</span> 
+	    </div>  
+
+	    <div class="bg-grey radius-big pd-medium  mn-r-bold pd-r-big br-right-dark w-100">
+	  		<h3 class="mn-b-small">Order Summary</h3>
+
+	  		<ul class="flex gap-thin flex-column mn-b-semi">
+	  			<CardOrderItem
+	  				v-for="(product, index) in orderProducts" :key="product._id"
+	  				:editable="false" 
+	  				:product="product" 
+	  			/>
+	      </ul>
+	      
+	      <div class="mn-b-medium radius-small br-solid br-1px br-black-transp-10 w-100">
+		      <div class="pd-small br-solid br-b br-black-transp-10  flex">
+		        <p class="mn-r-auto t-transp">In total</p>
+		        <p>{{ cartTotalPrice }} {{returnCurrency()}} </p>
+		      </div>
+		      <div class="pd-small br-solid br-b br-black-transp-10  flex">
+		        <p class="mn-r-auto  t-transp">Delivery</p>
+		        <p>{{returnCurrency()}} {{ Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10))}} </p>
+		      </div>
+		      <div class="pd-small  flex-bottom flex">
+		        <p class="mn-r-auto t-transp">In total to pay</p>
+		        <p class="p-big t-semi">{{returnCurrency()}} {{ Math.trunc(100 + 20 * orderOrganization[0]?.distance - 7,5 * (orderOrganization[0]?.distance  / 10)) + cartTotalPrice }}</p>
+		      </div>
+		    </div>
+
+		    <h3 class="mn-b-small">Chat With Us</h3>
+
+		    <ChatWindow
+		    	:username="
+		    		route.name === 'Order Status' ? order.user?.name || 'User' : 'Weeder Support'
+		    	"
+		    	:chatID="route.params.order"
+		    	class="radius-semi bg-white o-hidden"
+		    />
+
+	    </div>
+	  </div>
+	</div>		
+
+</template>
+
+
+<script setup="props">
+	import { computed, ref, onMounted  } from 'vue'
+	import { useRouter, useRoute } from 'vue-router'
+	
+	import SectionPageTitle from '@pf/src/modules/globals/components/sections/SectionPageTitle.vue'
+
+	import Popup from "@pf/src/components/Popup/Popup.vue";
+
+	import IconTime  from '@pf/src/modules/icons/entities/IconTime.vue'
+
+	// Block
+	import CardOrderItem  from '@pf/src/modules/orders/components/blocks/CardOrderItem.vue'
+	import CardOrganization from '@pf/src/modules/organizations/components/blocks/CardOrganization.vue'
+
+	import ChatWindow from '@pf/src/modules/chats/components/pages/ChatPage.vue';
+
+	import StatusHistory from '@pf/src/modules/orders/components/blocks/StatusHistory.vue'
+
+	import * as globals 	from '@pf/src/modules/globals/store/globals'
+	import * as orders 	from '@pf/src/modules/orders/store/orders'
+	import * as products 	from '@pf/src/modules/products/store/products'
+	import * as organizations 	from '@pf/src/modules/organizations/store/organizations'
+
+
+	const router = useRouter()
+	const route = useRoute()
+
+	const order = ref(null)
+	const productsOrganization = ref(null)
+	const orderOrganization = ref(null)
+
+	const statuses = ['created', 'confirmed', 'packing', 'in delivery', 'delivered'];
+	const statusLabels = ['Order Confirming', 'Order Confirmed', 'Packing', 'In Delivery', 'Delivered'];
+
+	const isActiveStatus = (index) => {
+	  return statuses.slice(index).includes(order.value.status);
+	};
+
+	// description: 'Your order has been successfully created. Our manager will contact you within five minutes to confirm your order.'
+	// description: 'Your order has been confirmed. We are now processing your items and preparing them for shipment.'
+	// description: 'Your order is now awaiting shipment. Once shipped, you will receive a notification with tracking information.'
+	// description: 'Your order is now awaiting shipment. Once shipped, you will receive a notification with tracking information.'
+	// description: 'Your order is currently in transit. Our delivery team is working hard to get your items to you as soon as possible.'
+	// description: 'Congratulations! Your order has been successfully delivered. If you have any concerns or feedback, feel free to contact us.'
+
+
+	const isOpeStatusPopup = ref(false);
+	const selectedMember = ref(null);
+	const orderProducts = ref([]);
+
+	function openStatusPopup(member) {
+	  isOpeStatusPopup.value = true;
+	  if (typeof member === "number") selectedMember.value = member;
+	}
+
+	function closeStatusPopup() {
+	  isOpeStatusPopup.value = false;
+	  selectedMember.value = null;
+	}
+
+	onMounted(async()=>{
+		order.value = await orders.actions.read({_id: route.params.order})
+		order.value = order.value[0]
+
+		productsOrganization.value = await products.actions.read({
+	    organization: order.value.owner.target._id,
+	    limit: 1000,
+	  });
+
+	  console.log(productsOrganization.value)
+
+    const productsMap = productsOrganization.value.reduce((map, product) => {
+	    map[product._id] = product;
+	    return map;
+	  }, {});
+
+	  console.log(productsMap)
+
+	  // Сопоставление продуктов с позициями заказа
+	  orderProducts.value = order.value.positions.map(({ _id, quantity }) => {
+	    const product = productsMap[_id];
+	    return {
+	      name: product.name,
+	      images: product.images,
+	      price: product.price,
+	      _id: product._id,
+	      quantity
+	    };
+	  });
+
+	  orderOrganization.value = await organizations.actions.read({
+	    _id: order.value?.owner.target._id,
+	    location: globals.state.position?.location,
+	  });
+
+	})
+
+	let cartTotalPrice = computed(() => {
+    return Number(order.value?.positions.reduce((total, product) => {
+      return total + product.price * product.quantity;
+    }, 0));
+  })
+
+  let cartTotalAmount = computed(() => {
+    return Number(order.value?.positions.reduce((total, product) => {
+      return total + product.quantity;
+    }, 0));
+  })
+
+  // Функция установки нового статуса
+	async function setStatus (newStatus) {
+	  orders.state.current.status = newStatus
+
+	  await orders.actions.update(orders.state.current)
+	} 
+
+	function getNextStatus(currentStatus) {
+    const currentIndex = statuses.indexOf(currentStatus);
+
+    if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
+      return statuses[currentIndex + 1];
+    }
+    return null; // Если следующий статус не существует
+  }
+
+  function getStatusLabel(status) {
+    const index = statuses.indexOf(status);
+
+    return status ? statusLabels[index] : "";
+  }
+  async function setNextStatus() {
+    const nextStatus = getNextStatus(orders.state.current.status);
+
+    if (nextStatus) {
+      orders.state.current.status = nextStatus;
+
+      await orders.actions.update(orders.state.current)
+    } else {
+      console.error('Next status is void. Must handle somehow.');
+    }
+
+		closeStatusPopup()
+  }
+
+
+	function requestPayment(order) {
+		 // store.dispatch("payments/newPayment", order);
+	}
+
+	function calculateDeliveryTime(distance, date) {
+	  if (!distance) {
+	    return null;
+	  }
+
+	  const basePreparationTime = 10 * 60 * 1000; // Convert to milliseconds
+	  const travelTime = Math.ceil((15 + 5 + 3 * distance) / 5) * 5 * 60 * 1000;
+
+	  // Преобразование даты начала в миллисекунды и добавление времени подготовки и доставки
+	  const startTime = new Date(date).getTime();
+	  const estimatedDeliveryTime = new Date(startTime + basePreparationTime + travelTime);
+
+	  console.log(date)
+	  console.log(estimatedDeliveryTime)
+
+	  return estimatedDeliveryTime;
+	}
+
+
+</script>
+
+<style lang="scss" scoped>
+	.blink {
+	  animation: blink-animation 1s ease infinite;
+	}
+
+	@keyframes blink-animation {
+	  0%, 100% {
+	    opacity: 1;
+	  }
+	  50% {
+	    opacity: 0.8;
+	  }
+	}
+</style>

package/src/modules/orders/components/pages/OrderCreate.vue

@@ -22,7 +22,7 @@
 			class="order-form col"
 		>
 			<FormCustomerDetails
-				:order="orders.state.current"  
+				:customer="orders.state.current.customer"
 			/>
 			<FormDelivery 	
 				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
@@ -148,7 +148,6 @@ const cartTotalPrice = computed(() => shopcart.getters.cartTotalPrice)
 // Organization
 const orderOrganization = ref({})
 
-import Radio from '@pf/src/components/Radio/Radio.vue'
 
 onMounted(async()=> {
 	orderOrganization.value = await organizations.actions.read({
@@ -201,14 +200,14 @@ async function handleCreate() {
 	orders.state.current.status = 'created';
 
 	orders.state.current.owner = {
-		target: orderOrganization.value[0]._id,
+		target: shopcart.state.organization,
 		type: 'organization'
 	}
 
 	if (auth.state.user._id) {
 		orders.state.current.creator = {
 			target: auth.state.user._id,
-			type: 'user'
+			type: 'User'
 		}
 	}
 
@@ -223,6 +222,8 @@ async function handleCreate() {
   let order = await orders.actions.create(orders.state.current);
 
   if (order) {
+  	shopcart.actions.resetShopcart()
+
   	router.push({
   		name: 'Order Status',
   		params: {

package/src/modules/orders/components/pages/OrderCreateBackoffice.vue

@@ -27,12 +27,12 @@
     <Popup 
       @close-popup="closeProductsPopup" 
       :isPopupOpen="isOpenProductsPopup"
-      class="bg-white w-min-30r w-max-30r radius-big pd-medium"
+      class="bg-white w-min-30r w-max-30r h-max-100 flex flex-column radius-big pd-medium pos-relative"
     >
 
       <h3 class="mn-b-small">Add to order</h3>
 
-      <div class="h-100 bg-grey mn-b-thin o-scroll pd-medium radius-big">
+      <div class="bg-grey h-max-100 mn-b-thin o-scroll pd-medium radius-big">
         <Feed
           :search="{
             placeholder: 'Search products...',
@@ -221,7 +221,6 @@
 
   import customers from '@pf/src/modules/orders/store/customers.store';
 	
-
   // Accessing router
   const route = useRoute()
   const router = useRouter()