@ozdao/martyrs 0.2.428 → 0.2.430

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

@@ -9,67 +9,96 @@
 			</div>
 
   	<div class="flex-nowrap flex gap-thin pos-relative ">
-	    <div v-for="(status, index) in statuses" :key="index" class="w-20">
+	    <div v-for="(status, index) in globals.state.options.orders.statuses" :key="index" class="w-20">
 	      <div
 	      	class="bg-white 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) }
+				    { 'blink': order.status === status.value && getNextStatus(order.status) }
 				  "
 	      />
 	      <div 
 	      	:class="{ 't-transp': !isActiveStatus(index) }"
-				  class="mn-t-thin p-small t-medium uppercase">{{ statusLabels[index] }}</div>
+				  class="mn-t-thin p-small t-medium uppercase">{{ status.value }}</div>
 	    	</div>
 		  </div>
 	  </div>
 
-	  <div v-if="route.meta.context !== 'user'" class="bg-light pd-thin mn-b-thin pd-thin radius-extra flex-nowrap flex">
-  		<div class="w-max flex-v-center gap-thin flex-nowrap flex pd-thin radius-small bg-light-transp-20">
-  			<IconTime class="i-semi t-transp" fill="rgb(var(--black)" />
-        <p class="t-medium mn-r-auto"><span class="p-small t-transp">Estimated Reaction</span><br>{{formatDate(order.deadline, { language: locale })}}</p>
-	  	</div>
-	  	<button v-if="getNextStatus(order.status)" @click="openStatusPopup" class="mn-l-auto bg-black t-white button">  
-		    Mark as {{ getStatusLabel(getNextStatus(order.status)) }}  
-		  </button>
-
-		<!--   <Button v-if="order.status !== 'canceled'" :submit="cancelOrder"  class="w-max t-white mn-l-thin bg-red">
-				<span>Cancel Order</span>
-			</Button>
-
-			 <Button v-if="order.status !== 'confirmed'" :submit="confirmOrder"  class="w-max t-white mn-l-thin bg-red">
-				<span>Confirm Order</span>
+  	 <Popup 
+      title="Change payment" 
+      @close-popup="closePaymentPopup" 
+      :isPopupOpen="isOpenPaymentPopup"
+      class="bg-light w-min-25r w-max-25r radius-medium pd-big"
+    >
+    	<Select 
+        v-model:select="selectedPayments.type"
+        :property="'value'"
+        label="Type"
+        :options="[
+          {name: 'Cash',  value: 'cash'}, 
+          {name: 'Card', value: 'card'}, 
+          {name: 'Bank Transfer', value: 'bank'},
+        ]"
+        placeholder="Select type of payment" 
+        size="small"
+        class="bg-white mn-b-thin pd-regular radius-small w-100"
+      />
+
+      <Select 
+        v-model:select="selectedPayments.status"
+        :property="'value'"
+        label="Status"
+        :options="[
+          {name: 'Unpaid',  value: 'unpaid'}, 
+          {name: 'Paid', value: 'paid'}, 
+          {name: 'Refunded', value: 'refunded'},
+        ]"
+        placeholder="Select status of payment" 
+        size="small"
+        class="bg-white mn-b-small pd-regular radius-small w-100"
+      />
+
+
+      <Button :submit="changePaymentStatus"  class="t-white w-100 bg-second">
+				<span>Change Status</span>
 			</Button>
- -->
-
-  	</div>
+	 	</Popup>
 
 	  <Popup 
-      title="Change status" 
+      title="Change order status" 
       @close-popup="closeStatusPopup" 
       :isPopupOpen="isOpeStatusPopup"
       class="bg-light w-min-30r w-max-30r radius-medium pd-big"
     >
 
-			<!-- <VueDatePicker v-model="order.deadline" :hide-navigation="['calendar']" :flow="['time']" class="z-index-3 bg-white radius-small pd-small mn-b-thin mn-b-semi" /> -->
-
-			<!-- {{order.deadline}} -->
-<!-- 
-			<p class="t-medium p-medium mn-b-thin">
-		    Positions
-		  </p>
+			<!-- Добавить выбор примерного времени -->
 
-    	<ul class="bg-white pd-small radius-small flex gap-thin flex-column mn-b-semi">
+    	<ul class="flex gap-thin flex-column mn-b-thin">
   			<CardOrderItem
-  				v-for="(product, index) in orderProducts" :key="product._id"
-  				:editable="false" 
+  				v-for="(product, index) in order.positions" :key="product._id"
+  				:editable="true" 
   				:product="product" 
+  				:increase="product => orders.mutations.incrementItemQuantity(order, product._id)"
+	        :decrease="product => orders.mutations.decrementItemQuantity(order, product._id)"
+	        :remove="product => orders.mutations.removeProduct(order, product._id)"
+	        @updateRentDates="(product, dates) => shopcart.actions.updateRentDates({ positions: order.positions, productId: product._id, dates })"
+  				class="bg-white radius-small pd-small"
   			/>
-      </ul> -->
-    	<button @click="setNextStatus"  class="w-100 bg-black-small t-white button">
-    		{{'Confirm Changing to ' + getStatusLabel(getNextStatus(order.status))}}
-    	</button>
+      </ul>
+      
+      <PriceTotal 
+        :totalPrice="cartTotalPrice"
+        :currency="returnCurrency()"
+        :showFees="globals.state.options?.orders?.showFees"
+        :feesRate="globals.state.options?.orders?.feesRate || 0"
+        :showVat="globals.state.options?.orders?.showVat"
+        :vatRate="globals.state.options?.orders?.vatRate || 0"
+      />
+
+    	<Button :submit="setNextStatus"  class="t-white w-100 bg-second">
+				<span>{{'Confirm Changing to ' + (getNextStatus(order.status)).label}}</span>
+			</Button>
 	 	</Popup>
 
 
@@ -128,22 +157,49 @@
 			    </div>
 
 			    <div class="pd-small  flex flex-nowrap flex-v-center br-t br-black-transp-10 br-solid">
-			    	<p class="mn-b-small t-medium p-medium">
+			    	<p class="t-medium p-medium">
 			      	Delivery
 			      </p>
 
-			      <p class="w-100 t-right mn-b-small">
+			      <p class="w-100 t-right ">
 			        {{order.delivery.type ? order.delivery.type : 'Not specified'}} 
 			      </p>
 			    </div>
 
+			     <div class="pd-small  flex flex-nowrap flex-v-center br-t br-black-transp-10 br-solid">
+			    	<p class="mn-r-auto t-medium p-medium">
+			      	Payment
+			      </p>
+
+
+			      <p class="w-max t-right">
+			        {{order.payment.type ? order.payment.type : 'Not specified'}} 
+			      </p>
+
+			      <p @click="openPaymentPopup" class="w-max pd-thin radius-small bg-second t-white mn-l-thin cursor-pointer hover-bg-black t-right">
+			        {{order.payment.status ? order.payment.status : 'Unpaid'}} 
+			      </p>
+			    </div>
+
+
 				</div>
-					
+
+				<div v-if="route.meta.context !== 'user'" class="o-y-scroll bg-light pd-thin mn-b-thin pd-thin radius-medium flex-nowrap flex">
+		  		<div class="flex-child-default mn-r-small w-max flex-v-center gap-thin flex-nowrap flex pd-thin radius-small bg-light-transp-20">
+		  			<IconTime class="i-semi t-transp" fill="rgb(var(--black)" />
+		        <p class="t-medium mn-r-auto"><span class="p-small t-transp">Estimated Reaction</span><br>{{formatDate(order.deadline, { language: locale })}}</p>
+			  	</div>
+			  	<button v-if="getNextStatus(order.status)" @click="openStatusPopup" class="flex-child-default  mn-l-auto bg-black t-white button">  
+				    Mark as {{ (getNextStatus(order.status)).label }}  
+				  </button>
+		  	</div>
+
 			<div class="bg-light radius-medium pd-medium  mn-r-bold  w-100">
 		    <h3 class="mn-b-small">Chat With Us</h3>
 
-		    <ChatWindow
+		    <ChatPage
 		    	:username="['Order', 'UserOrder'].includes(route.name) ? (order.user?.name || 'User') : 'Support'"
+		    	:user="auth.state.user._id"
 		    	:chatID="route.params.order"
 		    	class="radius-semi bs-black bg-light o-hidden"
 		    />
@@ -184,12 +240,12 @@
 	      <PriceTotal 
           :totalPrice="cartTotalPrice"
           :currency="returnCurrency()"
-          :showFees="globals.state.options?.showFees"
-          :feesRate="globals.state.options?.feesRate || 0"
-          :showVat="globals.state.options?.showVat"
-          :vatRate="globals.state.options?.vatRate || 0"
+          :showFees="globals.state.options?.orders?.showFees"
+          :feesRate="globals.state.options?.orders?.feesRate || 0"
+          :showVat="globals.state.options?.orders?.showVat"
+          :vatRate="globals.state.options?.orders?.vatRate || 0"
         />
-         </div>
+     	</div>
 
 	   
 	  </div>
@@ -203,6 +259,7 @@
 	import { useRouter, useRoute } from 'vue-router'
 
 	import Button from '@martyrs/src/components/Button/Button.vue'
+	import Select from '@martyrs/src/components/Select/Select.vue'
 	import Popup from "@martyrs/src/components/Popup/Popup.vue";
 
 	import IconTime  from '@martyrs/src/modules/icons/entities/IconTime.vue'
@@ -211,11 +268,11 @@
 	import CardOrderItem  from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'
 	import CardOrganization from '@martyrs/src/modules/organizations/components/blocks/CardOrganization.vue'
 
-	import ChatWindow from '@martyrs/src/modules/chats/components/pages/ChatPage.vue';
+	import ChatPage from '@martyrs/src/modules/chats/components/pages/ChatPage.vue';
 
 	import StatusHistory from '@martyrs/src/modules/orders/components/blocks/StatusHistory.vue'
 	import PriceTotal from '@martyrs/src/modules/orders/components/elements/PriceTotal.vue';
-
+	import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'
 
 	import * as globals 	from '@martyrs/src/modules/globals/views/store/globals'
 	import * as auth from '@martyrs/src/modules/auth/views/store/auth'
@@ -234,13 +291,9 @@
 	const productsOrganization = ref(null)
 	const orderOrganization = ref(null)
 
-	const statuses = ['created', 'confirmed', 'preparing', 'inuse', 'finished'];
+	const statuses = globals.state.options.orders.statuses
 	const statusLabels = ['Created', 'Confirmed', 'Preparing', 'In use', 'Finished'];
 
-	const isActiveStatus = (index) => {
-	  return statuses.slice(index).includes(order.value.status);
-	};
-
   if (route.meta.context === 'user' && 
       auth.state.user && 
       route.params._id !== auth.state.user?._id && 
@@ -248,13 +301,6 @@
       !auth.state.access?.roles?.includes('ROLE_ADMIN')) {
     router.push('/401');
   }
-	// 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);
@@ -269,6 +315,24 @@
 	  selectedMember.value = null;
 	}
 
+	const isOpenPaymentPopup = ref(false);
+
+	const selectedPayments = ref({
+		type: null,
+		status: null
+	});
+
+	function openPaymentPopup() {
+	  selectedPayments.value.type = order.value.payment.type
+	  selectedPayments.value.status = order.value.payment.status
+
+	  isOpenPaymentPopup.value = true;
+	}
+
+	function closePaymentPopup() {
+	  isOpenPaymentPopup.value = false;
+	}
+
 	onMounted(async()=>{
 		order.value = await orders.actions.read({_id: route.params.order})
 		order.value = order.value[0]
@@ -276,6 +340,7 @@
 	  orderOrganization.value = await organizations.actions.read({
 	    _id: order.value?.owner.target._id,
 	    location: globals.state.position?.location,
+	    lookup: ['spots']
 	  });
 
 	})
@@ -309,25 +374,37 @@
 	  await orders.actions.update(orders.state.current)
 	} 
 
+
 	function getNextStatus(currentStatus) {
-    const currentIndex = statuses.indexOf(currentStatus);
+	  const currentIndex = globals.state.options.orders.statuses.findIndex(status => status.value === currentStatus);
 
-    if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
-      return statuses[currentIndex + 1];
-    }
-    return null; // Если следующий статус не существует
-  }
+	  if (currentIndex !== -1 && currentIndex + 1 < statuses.length) {
+	    return globals.state.options.orders.statuses[currentIndex + 1];
+	  }
+	  return null; // If next status doesn't exist
+	}
 
-  function getStatusLabel(status) {
-    const index = statuses.indexOf(status);
+	const isActiveStatus = (index) => {
+	  return globals.state.options.orders.statuses.slice(index).some(status => status.value === order.value.status);
+	};
+
+  async function changePaymentStatus() {
+    if (selectedPayments.value.status && selectedPayments.value.type) {
+      orders.state.current.payment = selectedPayments.value;
+
+      await orders.actions.update(orders.state.current)
+    } else {
+      console.error('Payment status is void. Must handle somehow.');
+    }
 
-    return status ? statusLabels[index] : "";
+		closePaymentPopup()
   }
+
   async function setNextStatus() {
     const nextStatus = getNextStatus(orders.state.current.status);
 
     if (nextStatus) {
-      orders.state.current.status = nextStatus;
+      orders.state.current.status = nextStatus.value;
 
       await orders.actions.update(orders.state.current)
     } else {
@@ -352,11 +429,6 @@
     orders.state.current.status = 'confirmed';
 
     await orders.actions.update(orders.state.current)
-}
-
-
-	function requestPayment(order) {
-		 // store.dispatch("payments/newPayment", order);
 	}
 
 	function calculateDeliveryTime(distance, date) {
@@ -371,9 +443,6 @@
 	  const startTime = new Date(date).getTime();
 	  const estimatedDeliveryTime = new Date(startTime + basePreparationTime + travelTime);
 
-	  console.log(date)
-	  console.log(estimatedDeliveryTime)
-
 	  return estimatedDeliveryTime;
 	}
 

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

@@ -27,10 +27,12 @@
 			<FormPayment 	
 				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
 				:order="orders.state.current"  
+				:organization="orderOrganization[0]" 
 			/>
 			<FormDelivery 	
 				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
-				:order="orders.state.current"  
+				:order="orders.state.current" 
+				:organization="orderOrganization[0]" 
 			/>
 			
 		</div>
@@ -180,17 +182,10 @@ onMounted(async()=> {
 	orderOrganization.value = await organizations.actions.read({
 	  _id: shopcart.state.organization,
 	  location: globals.state.position?.location,
+	  lookup: ['spots']
 	})
 })
-///////////////////////////////////////////////////////////////////////////////////////////////////
-// WATCHERS
-///////////////////////////////////////////////////////////////////////////////////////////////////
-watch(() => orders.state.current.delivery.address, async (newFilterValue, oldFilterValue) => {
-	orderOrganization.value = await organizations.actions.read({
-	  _id: shopcart.state.organization,
-	  location: orders.state.current.delivery.location,
-	})
-}, { deep: true })
+
 /////////////////////////////
 // Store Verification
 /////////////////////////////
@@ -265,14 +260,14 @@ async function handleCreate() {
   let order = await orders.actions.create(orders.state.current);
 
   if (order) {
-  	shopcart.actions.resetShopcart()
-
   	router.push({
   		name: 'Order',
   		params: {
   			order: order._id
   		}
   	})
+  		
+  	shopcart.actions.resetShopcart()
   } else {
   	alert('something wrong')
   }

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

@@ -53,7 +53,7 @@
             state: null
           }"
           :options="{
-            organization: route.params._id
+            owner: route.params._id
           }"
           v-slot="{ 
             items 
@@ -165,12 +165,14 @@
 
     <FormDelivery  
       v-if="tabOrderCreate === 'delivery'" 
-      :order="orders.state.current"  
+      :order="orders.state.current"
+      :organization="orderOrganization[0]" 
     />
 
     <FormPayment  
       v-if="tabOrderCreate === 'payment'"
       :order="orders.state.current"  
+      :organization="orderOrganization[0]" 
     />
 
     <Popup 
@@ -223,6 +225,7 @@
   import * as globals from '@martyrs/src/modules/globals/views/store/globals';
   import * as auth from '@martyrs/src/modules/auth/views/store/auth';
   import * as orders from '@martyrs/src/modules/orders/store/orders';
+  import * as organizations from '@martyrs/src/modules/organizations/store/organizations';
   import * as products from '@martyrs/src/modules/products/store/products';
 
   import customers from '@martyrs/src/modules/orders/store/customers.store';
@@ -296,7 +299,16 @@
     })
   }
 
-  onMounted(() => {
+  const orderOrganization = ref({})
+
+
+
+  onMounted(async() => {
+
+    orderOrganization.value = await organizations.actions.read({
+      _id: route.params._id,
+      lookup: ['spots']
+    })
 
     // await orders.actions.fetchOrder(route.params.id) // Implement this action in your store
 

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

@@ -4,8 +4,9 @@
       v-if="!MOBILE_APP"
       title="Orders"
       :actions="[
-        ...(route.meta.context !== 'user' ? [{ to: { name: 'BackofficeAdminCreateOrder'}, label: 'Create Order' }] : [])
-      ]"
+        route.meta.context === 'backoffice' && { to: { name: 'BackofficeAdminCreateOrder' }, label: 'Create Order' },
+        route.meta.context === 'organization' && { to: { name: 'OrganizationAdminCreateOrder', params: { _id: route.params._id}}, label: 'Create Order' }
+      ].filter(Boolean)"
       class="mn-b-small"
     />
 
@@ -44,7 +45,7 @@
       }"
       :options="{
         limit: 15,
-        ...(route.meta.context === 'organization' && { organization: route.params._id }),
+        ...(route.meta.context === 'organization' && { owner: route.params._id }),
         ...(route.meta.context === 'user' && { customer: route.params._id }),
         ...(tab !== 'all' && { status: tab })
       }"
@@ -62,98 +63,14 @@
             ? { order: order._id } 
             : { order: order._id, organization: order.owner.target || order.owner._id  }
         }" 
-        class="bg-light pos-relative pd-medium radius-big"
       >
-        <CardHeader 
-          :entity="order"
-          :entityType="'order'"
+        <CardOrderBackoffice 
+          :order="order"
           :user="auth.state.user"
-          :owner="order.creator" 
-          :creator="order.creator"
-          :date="order.createdAt"
-          class="mn-b-small"
+          :formatDate="formatDate"
+          :getTotal="orders.getters.getTotal"
+          :currency="returnCurrency()"
         />
-
-        <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
-          <div class="w-100">
-            <!-- <h3 class="mn-b-thin">{{order.customer.target.profile?.name || order.customer.target.phone || order.customer.target.email || 'No name'}}</h3> -->
-            <p class="t-truncate">{{order.delivery.address || 'Not specified'}}</p> 
-          </div>
-
-          <div class=" w-100 t-right">
-            <h3 class="mn-b-thin">{{returnCurrency()}}{{orders.getters.getTotal(order.positions)}}</h3>
-            <p>#{{order._id.slice(0, 4) + '...' + order._id.slice(-4)}}</p> 
-          </div>
-        </div>
-     
-        <div class="cols-1 mn-b-small gap-thin pd-small bg-white radius-small">
-          <!-- Always display the first two positions -->
-          <div
-            v-for="(position, index) in order.positions.slice(0, 2)"
-            :key="index"
-            class="w-100 flex"
-          >
-            <p class="mn-r-auto">{{ position.name }}</p>
-            <p class="t-right">
-              {{ position.quantity }} {{ position.type }}
-              x
-              {{ position.price }}
-              <span class="t-transp">{{ returnCurrency() }}</span>
-            </p>
-          </div>
-
-          <transition name="fade">
-            <!-- Display the rest of the positions if there are more than two and spoiler is true -->
-            <div v-if="spoiler && order.positions.length > 2">
-              <div
-                v-for="(position, index) in order.positions.slice(2)"
-                :key="index + 2"
-                class="w-100 flex"
-              >
-                <p class="mn-r-auto">{{ position.name }}</p>
-                <p class="t-right">
-                  {{ position.quantity }} {{ position.type }}
-                  x
-                  {{ position.price }}
-                  <span class="t-transp">{{ returnCurrency() }}</span>
-                </p>
-              </div>
-            </div>
-          </transition>
-
-          <!-- Toggle button for additional positions, visible only if there are more than two positions -->
-          <button
-            v-if="order.positions.length > 2"
-            @click.prevent="spoiler = !spoiler"
-            class="radius-big bg-light-transp-50 pd-nano w-100 flex-center flex"
-          >
-            {{ !spoiler ? `+${order.positions.length - 2} more` : `Hide` }} 
-          </button>
-        </div>
-
-
-        <div class="pd-small bg-white radius-small gap-micro flex-v-center flex-nowrap flex"> 
-          <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"
-          >
-            {{order.status}}
-          </span>
-
-          <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 t-white bg-red"
-          >
-            Unpaid
-          </span>
-        </div>
-      
-
-        <div v-if="order.comment" class="pos-relative radius-small bg-fifth-transp-10 mn-t-thin pd-small">
-          <p class="mn-b-thin t-transp uppercase p-small t-medium">Comment</p>
-          <p>{{order.comment}}</p>
-        </div>
       </router-link>
 
       <router-link 
@@ -192,7 +109,7 @@
   import CardOrder from '@martyrs/src/modules/orders/components/blocks/CardOrder.vue'
 
   import CardOrderUser from '@martyrs/src/modules/orders/components/blocks/CardOrderUser.vue'
-  import CardHeader  from '@martyrs/src/modules/globals/views/components/blocks/CardHeader.vue'
+  import CardOrderBackoffice from '@martyrs/src/modules/orders/components/blocks/CardOrderBackoffice.vue'
 
   import SectionPageTitle from '@martyrs/src/modules/globals/views/components/sections/SectionPageTitle.vue'
 

package/src/modules/orders/components/partials/ShopCart.vue

@@ -3,7 +3,7 @@
     <!-- ---------------------------------------------------------------- -->
     <!-- 01. Popup Header  -->
     <!-- ---------------------------------------------------------------- -->
-    <div class="mn-t-medium flex-nowrap flex">
+    <div class="flex-nowrap flex">
       <div class="mn-b-medium w-100">
         <h4 class="mn-b-thin p-big">{{t('title')}}</h4>
         <p class="t-transp p-small">{{t('subtitle')}} {{ t('positions', { count: StoreCartAmount }) }}</p>
@@ -13,7 +13,7 @@
     <!-- ---------------------------------------------------------------- -->
     <!-- 02. Popup Content  -->
     <!-- ---------------------------------------------------------------- -->
-    <div class="rows-1 gap-small mn-b-big shopcart-content">
+    <div class="h-100 flex flex-column w-100 pos-relative o-x-hidden o-y-scroll gap-small shopcart-content">
       <!-- Empty State -->
       <p v-if="!(shopcart.state.positions.length > 0)" class="mn-t-medium"><i>{{t('emptystate')}}</i></p>
       <!-- Shopcart positions -->