@ozdao/prometheus-framework 0.2.91 → 0.2.93

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()

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

@@ -6,13 +6,13 @@
       :tabs_current="tab"
       :tabs="[
         { name: 'All',        value: 'all' },
-        { name: 'Created',   value: 'stock-in' },
-        { name: 'Confirmed',  value: 'stock-out' },
-        { name: 'Preparing',  value: 'stock-out' },
-        { name: 'Prepared',  value: 'stock-out' },
-        { name: 'In delivery',  value: 'stock-out' },
-        { name: 'Delivered',  value: 'stock-out' },
-        { name: 'Closed',  value: 'stock-out' }
+        { name: 'Created',   value: 'created' },
+        { name: 'Confirmed',  value: 'confirmed' },
+        { name: 'Preparing',  value: 'preparing' },
+        { name: 'Prepared',  value: 'prepared' },
+        { name: 'In delivery',  value: 'in delivery' },
+        { name: 'Delivered',  value: 'delivered' },
+        { name: 'Closed',  value: 'closed' }
       ]"
       :actions="[
         { to: { name: 'AdminOrderAdd'}, label: 'Create Order' }
@@ -20,6 +20,29 @@
       class="mn-b-small bg-grey bg-grey radius-big"
     />
 
+
+
+    <Block
+      title="Balance"
+      class="mn-b-thin"
+    >
+      <div class="gap-micro flex-nowrap flex">
+        <div class="w-100 bg-white radius-small pd-small">
+          <p class="mn-b-thin">Total</p>
+          <h3>{{formatPrice(totalPrice)}}</h3>
+        </div>
+        <div class="w-100 bg-white radius-small pd-small">
+          <p class="mn-b-thin">Paid</p>
+          <h3>{{formatPrice(totalPriceUnpaid)}}</h3>
+        </div>
+        <div class="w-100 bg-white radius-small pd-small">
+          <p class="mn-b-thin">Unpaid</p>
+          <h3>{{formatPrice(totalPrice)}}</h3>
+        </div>
+      </div>
+
+    </Block>
+
     <Feed
       :search="true"
       :states="{
@@ -34,7 +57,7 @@
       :options="{
         limit: 15,
         owner: route.params._id,
-        ...(tab !== 'all' && { type: tab })
+        ...(tab !== 'all' && { status: tab })
       }"
       v-slot="{ 
         items 
@@ -121,8 +144,8 @@
 
 
         <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex"> 
-          <IconEvents class="i-semi t-transp" fill="rgb(var(--black)" />
-          <p class="t-medium mn-r-auto">16:40, 21.04</p>
+          <IconTime class="i-semi t-transp" fill="rgb(var(--black)" />
+          <p class="t-medium mn-r-auto">{{formatDate(order.deadline)}}</p>
 
           <span 
             class="flex-child flex-child-shrink-0 capitalize w-max t-medium radius-big pd-b-nano pd-t-nano pd-r-thin pd-l-thin bg-main"
@@ -155,6 +178,7 @@
   import '@vuepic/vue-datepicker/dist/main.css'
 
   import Tab      from '@pf/src/components/Tab/Tab.vue'
+  import Block from '@pf/src/components/Block/Block.vue';
 
   import * as orders from '@pf/src/modules/orders/store/orders';
   import * as auth from '@pf/src/modules/auth/store/auth';
@@ -166,7 +190,7 @@
 
   import Feed from '@pf/src/components/Feed/Feed.vue'
 
-  import IconEvents  from '@pf/src/modules/icons/entities/IconEvents.vue'
+  import IconTime  from '@pf/src/modules/icons/entities/IconTime.vue'
 
   const route = useRoute();
   const router = useRouter();
@@ -176,6 +200,31 @@
   // Tab logic
   const tab = ref('all')
 
+  const totalPrice = computed(() => {
+    return calculateTotalSum(orders.state.all)
+  });
+
+   const totalPriceUnpaid = computed(() => {
+    return calculateSum(orders.state.all,'unpaid')
+  });
+
+  
+  function calculateTotalSum(orders) {
+    return orders.reduce((totalSum, item) => {
+      return totalSum + item.positions.reduce((sum, position) => sum + position.price, 0);
+    }, 0);
+  }
+
+  function calculateSum(orders, status) {
+    return orders.reduce((totalSum, item) => {
+      if (item.payment.status === status) {
+        return totalSum + item.positions.reduce((sum, position) => sum + position.price, 0);
+      }
+      return totalSum;
+    }, 0);
+  }
+
+
   onMounted(async () => {
    
   });

package/src/modules/orders/components/sections/FormDelivery.vue

@@ -6,7 +6,7 @@
 
     </div>
 
-     <h4 class="mn-b-thin">Shipping Method</h4>
+     <h4 class="mn-b-thin">Select zone</h4>
     <div class="mn-b-small flex-nowrap flex">
       <Radio 
         v-model:radio="order.delivery.type"
@@ -22,7 +22,7 @@
       />
       <Radio 
         v-model:radio="order.delivery.type"
-        label="Mail"
+        label="Post"
         value="mail"
         class="bg-white pd-medium radius-small w-100 mn-r-small"
       />

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

@@ -88,7 +88,7 @@ async function sendApplication() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .spiral {
   background-image: url('https://weeder.delivery/spiral.jpg');
   background-size: cover;
@@ -97,7 +97,7 @@ async function sendApplication() {
   position: absolute;
   top: 50%;
   left: 50%;
-  opacity: 0.03;
+  opacity: 0.066;
   transform: translate(-50%, -50%) rotate(0deg);
   transform-origin: center center;
   animation: spin 5s linear infinite;