@ozdao/prometheus-framework 0.2.30 → 0.2.31

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

@@ -1,139 +1,345 @@
 <template>
-
-<section class=" bg-grey order section">
-
-	<!-- Ask to login  -->
-	<AskToLogin class="mn-b-big" v-if="auth.state.access.status === false" /> 
-	{{order}}
-	<!-- Order form -->
-	<div class="order-wrapper cols-2">
-		<!-- Empty State   -->
-		<EmptyState  
-			v-if="shopcart.state.items < 1" 
-		/>
-		<Succes 
-			v-if="order.status === true && shopcart.state.items.length > 0" 
-			:order="order" 
-		/>
-		<Form 	
-			v-if="orders.state.current.status !== true && shopcart.state.items.length > 0"
-			:order="orders.state.current"  
-			@create="handleCreate"
-		/>
-		<!-- Order Items -->
-		<div 
-			v-if="shopcart.state.items.length > 0" 
-			class="pd-medium radius-big t-white bg-black"
-		>
-			<p class="mn-b-medium p-big">Your Order</p>
-			
-			<ul class="mn-b-semi">
-				<CardOrderItem v-for="product in shopcart.state.items" :key="product._id" editable="true" :product="product" 
-	        :increase="product => shopcart.actions.incrementItemQuantity(product._id)"
-	        :decrease="product => shopcart.actions.decrementItemQuantity(product._id)"
-	        :remove="product => shopcart.actions.removeProduct(product._id)"
-	      />
-			</ul>
-
-			<div :class="{'mn-b-semi': order.delivery == ''}" class="flex">
-				<p>Total</p>
-				<p>$ {{ cartTotalPrice }}</p>
-			</div>
-
-			<div v-if="order.delivery !== ''" class="mn-b-semi flex">
-				<p>Delivery</p>
-				<p v-if="order.delivery === 'Pickup'">Free</p>
-			</div>
-
-			<div class="flex-bottom flex">
-				<p>Total to be paid</p>
-				<p v-if="order.delivery === ''" class="p-big t-semi">$ {{ cartTotalPrice }}</p>
-			</div>
-		</div>
-
-	</div>
+	<div class="pd-big"> 
+	  
 	
-</section>
+
+	  <div class="mn-b-thin pos-relative w-100 bg-main radius-big pd-big">
+
+	  	<h2 class="mn-b-small">Order is {{order.status}}</h2>
+	  	<p class="mn-b-medium w-m-40r p-medium">Your order has been successfully created. Our manager will contact you within five minutes to confirm your order.</p>
+	  
+	  	
+	  	<p class="p-medium mn-b-thin t-semi">{{ statuses.find(status => status.value === order.status).nextstatus}}</p>
+
+	  	<div class="radius-extra  mn-b-medium flex-nowrap flex h-1r pos-relativew-40r">
+	  		<div 
+	  			class="bg-grey br-anim br-glow radius-extra mn-r-thin h-100 w-20"
+	  			:class="
+	  				{'br-anim br-glow br-glow-anim': ['created','confirmed', 'packing','in delivery','delivered'].indexOf(order.status) === 0 }
+	  			"
+	  		/>
+	  		<div 
+	  			class="bg-grey br-anim br-glow radius-extra mn-r-thin h-100 w-20"
+	  			:class="
+	  				{'br-anim br-glow br-glow-anim': ['created','confirmed', 'packing','in delivery','delivered'].indexOf(order.status) === 0 },
+	  					{'t-transp': ['created','confirmed', 'packing','in delivery','delivered'].indexOf(order.status) === -1 },
+	  				{'blink': order.status === 'created' }
+	  			"
+	  		/>
+	  		<div 
+	  			:class="
+	  				{'br-anim br-glow br-glow-anim': ['confirmed', 'packing','in delivery','delivered'].indexOf(order.status) === 0 },
+	  				{'t-transp': ['confirmed', 'packing','in delivery','delivered'].indexOf(order.status) === -1 },
+	  				{'blink': order.status === 'confirmed' }
+	  			"
+	  			class="bg-grey radius-extra mn-r-thin h-100 w-40"
+	  		/>
+	  		<div 
+	  			class="bg-grey radius-extra mn-r-thin h-100 w-40"
+	  			:class="
+	  				{'br-anim br-glow br-glow-anim': ['packing','in delivery','delivered'].indexOf(order.status) === 0 },
+	  				{'t-transp': ['packing','in delivery','delivered'].indexOf(order.status) === -1 },
+	  				{'blink': order.status === 'packing' }
+	  			"
+	  		/>
+	  		<div 
+	  			class="bg-grey radius-extra h-100 w-20"
+	  			:class="
+	  				{'br-anim br-glow br-glow-anim': ['in delivery','delivered'].indexOf(order.status) === 0 },
+	  				{'t-transp': ['in delivery','delivered'].indexOf(order.status) === -1 },
+	  				{'blink': order.status === 'in delivery' }
+	  			"
+	  		/>
+	  	</div>
+
+	  	<!-- <div class="w-max pd-thin radius-small bg-white-transp-20"> -->
+		  	<p>Estimated Arrival {{DateToFormattedString2(order.createdAt)}}</p>
+	  		<h3>10-15 min</h3>
+	  	<!-- </div> -->
+	  
+	  
+    	<p class=" pos-absolute pos-t-medium pos-r-medium t-medium p-medium">
+        Order No: <span class="p-small t-transp">#{{order._id}}</span>
+      </p>
+	  </div>
+
+
+	  
+	  <div class="gap-thin cols-2">
+
+	    <div class="w-100">
+
+		    <CardOrganization 
+		      :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 cols-2">
+			    	<div>
+				    	<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?.phone.number}} 
+			      </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>
+
+				
+	     	<div class="bg-grey radius-medium  w-100">
+					<h3 class="pd-medium">Tracking History</h3>
+					<div v-for="status in statuses" 	
+						class="w-100 br-t br-solid br-black-transp-10 pd-medium flex-nowrap flex"
+					>	
+						<img class="mn-r-small" src="@/assets/icons/status/created.svg"/>
+						<p  class="h4 w-8r">{{status.name}}<br><span class="p-small">16:30, 29th Aug 2021</span></p>
+						<button  @click="setStatus(status)" class="bg-main button radius-big">Set status</button>
+					</div>
+			  </div>
+
+
+	     <!-- 	<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="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>Free</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">{{ cartTotalPrice }} {{returnCurrency()}} </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="order._id"
+		    	class="bg-black radius-big bg-white o-hidden"
+		    />
+
+	    </div>
+	  </div>
+	</div>		
 
 </template>
 
 
-<script setup>
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// Import components
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// Block
-import CardOrderItem  from '@pf/src/modules/orders/components/blocks/CardOrderItem.vue'
-// Sections
-import AskToLogin     from '@pf/src/modules/orders/components/sections/AskToLogin.vue'
-import Succes         from '@pf/src/modules/orders/components/sections/Succes.vue'
-import EmptyState     from '@pf/src/modules/orders/components/sections/EmptyState.vue'
-import Form         	from '@pf/src/modules/orders/components/sections/Form.vue'
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// Import libs
-///////////////////////////////////////////////////////////////////////////////////////////////////
-import { computed, onMounted } from 'vue'
-import { useRoute,useRouter } from 'vue-router'
-
-import * as auth from '@pf/src/modules/auth/store/auth';
-import * as shopcart from '@pf/src/modules/orders/store/shopcart';
-import * as orders from '@pf/src/modules/orders/store/orders';
-import * as users from '@pf/src/modules/users/store/users';
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// Variables and computed
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// Accessing router and store
-
-const route = useRoute()
-const router = useRouter()
-const cartTotalPrice = computed(() => shopcart.getters.cartTotalPrice)
-
-const order = computed(() => orders.state.current)
-const user = computed(() => users.state.current)
-
-function handleCreate() {
-  orders.actions.create(shopcart.state.items);
-}
-</script>
+<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'
 
-<style lang="scss">
+	import ChatWindow from '@pf/src/modules/chats/components/pages/ChatPage.vue';
 
-.order-wrapper {
-	gap: 2.5rem;
-}
 
-.round-wrapper {
-	position: relative;
+	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'
 
-	.round {
-		margin: 0;
-		margin-right: 1rem;
+	const router = useRouter()
+	const route = useRoute()
+
+	await orders.actions.fetchOrder(route.params.order)
+
+	let order = ref(orders.state.current)
+
+	let statuses = [{
+		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: 'packing',
+		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 productsOrganization = ref([])
+	const orderOrganization = ref([])
+
+	productsOrganization.value = await products.actions.read({
+    organization: order.value.organization
+  });
+
+  orderOrganization.value = await organizations.actions.read({
+    _id: order.value.organization
+  });
+
+	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));
+  })
+
+  let orderProducts = computed(() => {
+    return order.value.positions.map(({ _id, quantity }) => {
+
+	    const product = productsOrganization.value.find(product => product._id === _id)
+
+	    return {
+	      name: product.name,
+	      images: product.images,
+	      price: product.price,
+	      _id: product._id,
+	      quantity
+	    }
+	  })
+  })
+
+	onMounted(async () => {
+		
+  })
+
+	// await store.dispatch('payments/getStatus', props.order._id)
+
+	// const payment = computed(() => store.state.payments.current)
+
+	async function setStatus(status) {
+		console.log(status)
+		orders.state.current.status = status.value
+
+
+
+		await orders.actions.update(orders.state.current)
 	}
 
-	input:checked {
-		background: #00ff88;
+	function requestPayment(order) {
+		 // store.dispatch("payments/newPayment", order);
 	}
+	
+	function DateToFormattedString(d) {         
+    var fixedDate = new Date(d);                                                     
+    var mm = (fixedDate.getMonth()+1).toString(); // getMonth() is zero-based         
+    var dd  = (fixedDate.getDate() + 6).toString();            
+                         
+    return (dd[1]?dd:"0"+dd[0]) + '/' + (mm[1]?mm:"0"+mm[0]);
+  }
 
-	.round-checkmark {
-		position: absolute;
-		width: 0.5rem;
-		height: 0.5rem;
-		background: white;
+  function DateToFormattedString2(d) {         
+    var fixedDate = new Date(d);                                                     
+    var mm = (fixedDate.getMonth() + 1).toString(); // getMonth() is zero-based         
+    var dd  = (fixedDate.getDate() + 1).toString();            
+                         
+    return (dd[1]?dd:"0"+dd[0]) + '/' + (mm[1]?mm:"0"+mm[0]);
+  }
 
-		left: 0.5rem;
-		top:  0.5rem;
 
-		opacity: 1;
-	}
-}
+</script>
 
-.order {
-	padding-top: 2rem;
+<style lang="scss" scoped>
+	.blink {
+	  animation: blink-animation 1s ease infinite;
+	}
 
-	.order-form     { order: 2; }
-	.order-finished { order: 2; .order-data {background: #f7f7f7; } }
-	
-	.order-list { order: 1; }
-}
-	
+	@keyframes blink-animation {
+	  0%, 100% {
+	    opacity: 1;
+	  }
+	  50% {
+	    opacity: 0.8;
+	  }
+	}
 </style>

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

@@ -6,7 +6,7 @@
       @click="$router.push({
         name: 'AdminOrder'
       })" 
-      class="radius-100p i-big hover-scale-1 cursor-pointer t-white bg-second">
+      class="radius-100 i-big hover-scale-1 cursor-pointer t-white bg-second">
         +
     </button>
   </header>
@@ -25,22 +25,23 @@
   <section 
     class="cols-3 gap-thin"
   >
+
     <div 
       v-for="order in orders.state.all" 
-      class="flex block"
+      class="bg-grey pd-small radius-big"
     > 
-      {{order.status}} 
+      Status: {{order.status}} 
 
       <p 
         class="w-100 mn-b-thin p-big"
       >
-        Заказ #{{order._id.slice(0,8)}} 
+        Order No.: #{{order._id}} 
       </p>
 
       <p
         class="mn-b-small t-transp w-100"
       >
-        Номер клиента: +7{{order.phone}}<br>
+        <!-- Номер клиента: +7{{order.phone}}<br> -->
       </p>
 
       <p 
@@ -48,22 +49,23 @@
         class="mn-b-small"
       >
      
-        {{formatDate(order.createdAt)}}
+        Order Created: {{formatDate(order.createdAt)}}
         
         <router-link 
           :to="{ 
             name: 'AdminOrderEdit', 
             params: { 
-              _id: order._id 
+              order: order._id 
+
             }
           }" 
           class="i-small"
         >
           EDIT
-          <!-- <img 
+          <img 
             class="i-small" 
             src="@/assets/icons/edit.svg"
-          > -->
+          >
         </router-link>
       </p>
 
@@ -79,6 +81,8 @@
 
   import * as orders from '@pf/src/modules/orders/store/orders';
 
+  import CardOrder from '@pf/src/modules/orders/components/blocks/CardOrder.vue'
+
   const route = useRoute();
   const router = useRouter();
   // Tab logic

package/src/modules/orders/components/pages/{ViewOrder.vue → Orders_refact.vue}

@@ -1,20 +1,23 @@
 <template>
 	<div class="mn-b-big">
-		<p v-if="store.state.orders.current._id === ''" class="mn-b-small t-semi p-big">История заказов</p>
-		<p @click="store.commit('orders/resetOrder')" v-if="store.state.orders.current._id !== ''" class="mn-b-small t-semi p-big flex-nojustify flex-center flex link-inherit">
+		 <!-- v-if="order.state.current._id === ''" -->
+		<p class="mn-b-small t-semi p-big">История заказов</p>
+		<!-- @click="store.commit('orders/resetOrder')" v-if="order.state.current._id !== ''"  -->
+		<p class="mn-b-small t-semi p-big flex-nojustify flex-center flex link-inherit">
 			<svg class="mn-r-small" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path fill="black" fill-rule="evenodd" clip-rule="evenodd" d="M5.34661 10.8333L10.5907 16.0774L9.41217 17.2559L2.15625 10L9.41217 2.74408L10.5907 3.92259L5.34661 9.16667H17.5014V10.8333H5.34661Z" />
+				<path fill="rgb(var(--black))" fill-rule="evenodd" clip-rule="evenodd" d="M5.34661 10.8333L10.5907 16.0774L9.41217 17.2559L2.15625 10L9.41217 2.74408L10.5907 3.92259L5.34661 9.16667H17.5014V10.8333H5.34661Z" />
 			</svg>
 			Назад ко всем заказам
 		</p>
 		<hr class="mn-b-semi">
 
 		<!-- <transition  @before-enter="scrollTop" name="scale">	 -->
-			<!-- <OrderCard v-if="store.state.orders.current._id !== ''" :order="store.state.orders.current" /> -->
+			<!-- <OrderCard v-if="order.state.current._id !== ''" :order="order.state.current" /> -->
 		<!-- </transition> -->
 
 		<transition  @before-enter="scrollTop" name="scale">	
-			<div v-if="store.state.orders.current._id === ''" >	
+			<div v-if="order.state.current._id === ''" >	
+				
 				<section  v-for="order in user.orders" class="pd-big mn-b-regular order-client-card col"> 
 		      <p class="mn-b-regular flex-center flex-nowrap flex w-100">
 						<img v-if="order.status === 'Создан'" 			class="mn-r-small" src="@/assets/icons/status/created.svg"/>
@@ -25,12 +28,12 @@
 		        <span class="w-100 t-medium p-big">{{order.status}}</span>
 		      </p>
 		      <ul class="mn-b-semi order-images-wrapper">
-		        <li v-for="(product, index) in orderProducts(order.items.slice(0,2))" :key="product._id" class="mn-r-small">
+		        <li v-for="(product, index) in orderProducts(order.positions.slice(0,2))" :key="product._id" class="mn-r-small">
     	        <img v-if="product.images" :src="`@/assets/images/products/${product.images.links[0]}`">
 			        <img v-if="!product.images" :src="require( `@/assets/icons/photo.svg`)">
 		    		</li>
-		    		<li v-if="order.items.length >= 3" class="mn-r-small order-last-image">
-		    			+{{order.items.length - 2 }}
+		    		<li v-if="order.positions.length >= 3" class="mn-r-small order-last-image">
+		    			+{{order.positions.length - 2 }}
 		  			</li>
 		      </ul>
 		      <div class="flex">
@@ -88,8 +91,8 @@ function scrollTop(){
 	document.getElementById('page-content').scrollIntoView({behavior: 'smooth', block: "start", inline: "start"});
 }
 
-function orderProducts (items) {
-  return items.map(({ _id, size, color, quantity }) => {
+function orderProducts (positions) {
+  return positions.map(({ _id, size, color, quantity }) => {
     const product = store.state.products.all.find(product => product._id === _id)
     return {
       name: product.name,