@ozdao/martyrs 0.2.423

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

@@ -0,0 +1,308 @@
+<template>
+
+<section class="bg-white pd-thin">
+
+	<!-- Ask to login  -->
+	<AskToLogin class="mn-b-thin" v-if="auth.state.access.status === false" /> 
+
+	<!-- Order form -->
+	<div class="gap-small mn-b-thin cols-2">
+		<!-- Empty State   -->
+		<EmptyState  
+			v-if="shopcart.state.positions < 1" 
+		/>	
+
+		<Succes 
+			v-if="order.status === true && shopcart.state.positions.length > 0" 
+			:order="order" 
+		/>
+		<!-- Order Form -->
+		<div
+			v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0" 
+			class="rows-1 gap-thin"
+		>
+			<FormCustomerDetails
+				:customer="orders.state.current.customer"
+			/>
+			<FormPayment 	
+				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+				:order="orders.state.current"  
+			/>
+			<FormDelivery 	
+				v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+				:order="orders.state.current"  
+			/>
+			
+		</div>
+
+		<!-- Order positions -->
+		<div 
+			v-if="shopcart.state.positions.length > 0" 
+			class="bg-white br-solid br-light br-1px pd-medium radius-medium"
+		>
+			<h4 class="font-second mn-b-thin">Your Order</h4>
+
+			<ul class="flex gap-thin flex-wrap mn-b-thin">
+				<CardOrderItem 
+					v-for="product in shopcart.state.positions" 
+					: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)"
+					@updateRentDates="(product, dates) => shopcart.actions.updateRentDates({ productId: product._id, dates })"
+	        class="w-100 bg-white "
+	      />
+			</ul>
+
+			<div 
+				class="mn-b-thin"
+			>	
+				<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"
+        />
+			</div>
+			<!-- Send order -->
+		  <button 
+		  	v-if="orders.state.current.status !== true && shopcart.state.positions.length > 0"
+		   	:disabled="
+		      errorName 
+		      || errorPhoneOrMessenger 
+		      || errorCity 
+		      || errorAddress 
+		      || errorDelivery 
+		      || errorPayment
+		    "
+		    @click="handleCreate()" 
+		    class="bg-main mn-b-small pd-small radius-big w-100 button"
+		  >
+		    Place an Order
+		  </button>
+
+		  <p class='mn-b-thin'>
+				I agree that placing the order places me under an obligation to make a payment in accordance with <a class="t-semi font-second t-second" href="/legal/terms-of-use" target="_blank">Terms of Use.</a>
+			</p>
+			<p >
+				
+			</p>
+		</div>
+
+	</div>
+
+	
+	
+</section>
+
+</template>
+
+
+<script setup>
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Import components
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Block
+import CardOrderItem from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'
+// Sections
+import AskToLogin from '@martyrs/src/modules/orders/components/sections/AskToLogin.vue'
+import Succes from '@martyrs/src/modules/orders/components/sections/Succes.vue'
+import EmptyState from '@martyrs/src/modules/orders/components/sections/EmptyState.vue'
+
+import PriceTotal from '@martyrs/src/modules/orders/components/elements/PriceTotal.vue';
+
+import FormCustomerDetails from '@martyrs/src/modules/orders/components/sections/FormCustomerDetails.vue'
+import FormDelivery from '@martyrs/src/modules/orders/components/sections/FormDelivery.vue'
+import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Import libs
+///////////////////////////////////////////////////////////////////////////////////////////////////
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute,useRouter } from 'vue-router'
+// Store
+import * as globals from '@martyrs/src/modules/globals/views/store/globals';
+import * as auth from '@martyrs/src/modules/auth/views/store/auth';
+import * as shopcart from '@martyrs/src/modules/orders/store/shopcart';
+import * as organizations from '@martyrs/src/modules/organizations/store/organizations';
+import * as orders from '@martyrs/src/modules/orders/store/orders';
+import * as users from '@martyrs/src/modules/auth/views/store/users';
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Variables and computed
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// Accessing router and store
+const route = useRoute()
+const router = useRouter()
+// COMPUTED
+const order = computed(() => orders.state.current)
+const user = computed(() => users.state.current)
+
+const cartTotalPrice = shopcart.getters.cartTotalPrice
+
+
+const deliveryCost = computed(() => {
+  if (orders.state.current.delivery.type === 'pickup') return 0;
+  if (orders.state.current.delivery.type === 'mail') return 350;
+  if (orders.state.current.delivery.type === 'courier') {
+    const distance = orderOrganization.value[0]?.distance || 0;
+    return Math.trunc(100 + 20 * distance - 7.5 * (distance / 10));
+  }
+  return 0;
+});
+
+// Computed property for total cost
+const totalCost = computed(() => {
+  return deliveryCost.value + cartTotalPrice.value.value;
+});
+// Organization
+const orderOrganization = ref({})
+
+
+if (!globals.state.options.orders.allowUnauthenticatedOrders && !auth.state.user._id) { 
+	router.push({name: 'Sign In'})	
+}
+	
+onMounted(async()=> {
+	
+
+	if (auth.state.user._id) {
+		let data = await users.actions.read({ _id:auth.state.user._id, user: auth.state.user._id });
+		orders.state.current.customer.profile.name = users.state.current.profile.name
+		orders.state.current.customer.phone = users.state.current.phone
+		orders.state.current.customer.phone = users.state.current.phone
+	}
+
+	orders.state.current.organization = shopcart.state.organization
+
+	orderOrganization.value = await organizations.actions.read({
+	  _id: shopcart.state.organization,
+	  location: globals.state.position?.location,
+	})
+})
+///////////////////////////////////////////////////////////////////////////////////////////////////
+// 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
+/////////////////////////////
+const errorName = computed(() => {
+  if (orders.state.current.customer.name?.length < 2) { return true } else { return false }
+});
+
+const errorPhoneOrMessenger = computed(() => {
+  const hasMessengerType = orders.state.current.customer.messenger?.type;
+  const hasMessengerValue = orders.state.current.customer.messenger?.value?.length >	 2;
+  const hasPhone = orders.state.current.customer.number?.length > 0;
+  // Ошибка, если нет ни номера телефона, ни корректного типа и значения мессенджера
+  return !hasPhone && !(hasMessengerType && hasMessengerValue);
+});
+
+const errorAddress = computed(() => {
+  const type = orders.state.current.delivery.type;
+  if (type === "pickup") {
+    return !orders.state.current.delivery.spot;
+  } else if (type === "courier" || type === "mail") {
+    const address = orders.state.current.delivery.address;
+    return !address || typeof address !== 'string' || address.length < 2;
+  }
+  return false;
+});
+
+const errorDelivery = computed(() => {
+  if (orders.state.current.delivery.type) {return false } else {return true } 
+})
+
+const errorPayment = computed(() => {
+  if (orders.state.current.payment.type) { return false } else {return true } 
+})
+/////////////////////////////
+// Methods
+/////////////////////////////
+async function handleCreate() {
+
+	orders.state.current.status = 'created';
+
+	orders.state.current.owner = {
+		target: shopcart.state.organization,
+		type: 'organization'
+	}
+
+	if (auth.state.user._id) {
+		orders.state.current.creator = {
+			target: auth.state.user._id,
+			type: 'user'
+		}
+	}
+
+	if (auth.state.user._id) {
+		orders.state.current.customer = {
+			target: auth.state.user._id,
+			type: 'user'
+		}
+	}
+
+	orders.state.current.positions = shopcart.state.positions
+
+	watch(() => shopcart.state.positions, (newVal) => {
+	  if (newVal) orders.state.current.positions === newVal
+	})
+
+ 	const referralCode = localStorage.getItem('referalCode');
+  
+  if (referralCode) {
+    orders.state.current.referralCode = referralCode;
+  }
+
+  let order = await orders.actions.create(orders.state.current);
+
+  if (order) {
+  	shopcart.actions.resetShopcart()
+
+  	router.push({
+  		name: 'Order',
+  		params: {
+  			order: order._id
+  		}
+  	})
+  } else {
+  	alert('something wrong')
+  }
+}
+</script>
+
+<style lang="scss">
+
+.round-wrapper {
+	position: relative;
+
+	.round {
+		margin: 0;
+		margin-right: 1rem;
+	}
+
+	input:checked {
+		background: #00ff88;
+	}
+
+	.round-checkmark {
+		position: absolute;
+		width: 0.5rem;
+		height: 0.5rem;
+		background: white;
+
+		left: 0.5rem;
+		top:  0.5rem;
+
+		opacity: 1;
+	}
+}
+</style>

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

@@ -0,0 +1,319 @@
+<template>
+  <div class="h-100 flex flex-column pd-thin">
+    <Block class="mn-b-thin">
+      <header class="flex-v-center flex-nowrap flex">
+        <h2 class="mn-r-auto">Create Order</h2>
+        <Button 
+          :submit="onSubmit"
+          :callback="redirectTo"
+          class="pd-small radius-big bg-main t-black uppercase t-medium"
+        >
+          Add Order 
+        </Button>
+      </header>
+    </Block>
+
+    <Tab 
+      v-model:selected="tabOrderCreate"
+      :tabs="[
+        {name: 'Positions', value: 'positions'},
+        {name: 'Customer', value: 'customer'},
+        {name: 'Delivery', value: 'delivery'},
+        {name: 'Payment', value: 'payment'}
+      ]"
+      class="t-medium radius-medium bg-light mn-b-small"
+    />
+
+    <Popup 
+      @close-popup="closeProductsPopup" 
+      :isPopupOpen="isOpenProductsPopup"
+      class="bg-white flex flex-column radius-big pd-medium pos-relative"
+    >
+
+      <h3 class="mn-b-small">Add to order</h3>
+
+      <div class="bg-light h-max-100 mn-b-thin o-scroll pd-medium radius-big">
+        <Feed
+          :showLoadMore="false"
+          :search="{
+            placeholder: 'Search products...',
+            class: 'bg-white mn-b-thin'
+          }"
+          :states="{
+            empty: {
+              title: 'No Products Found',
+              description: 'Currently, there are no such products available.'
+            },
+            skeleton: {
+              hide: true
+            }
+          }"
+          :store="{
+            read: (options) => products.actions.read(options),
+            state: null
+          }"
+          :options="{
+            organization: route.params._id
+          }"
+          v-slot="{ 
+            items 
+          }"
+          class=""
+        >
+          <CardOrderItem
+            v-for="(product, index) in items" :key="product._id"
+            :editable="false" 
+            :product="product" 
+            @click="() => { 
+              let p = { ...product };
+              p.quantity = 1;
+              globals.actions.add(orders.state.current.positions, p) 
+              closeProductsPopup();
+            }"
+            class="bg-white pd-thin radius-medium w-100 mn-b-thin"
+          />
+        </Feed>
+      </div>
+    </Popup>
+
+    <Block
+      v-if="tabOrderCreate === 'positions'"
+      title="Positions"
+      :actions="[{
+        label: '+',
+        function: () => openProductsPopup()
+      }]"
+      class="mn-b-small"
+    >
+      <span 
+        v-if="orders.state.current.positions.length === 0" 
+        class="w-100"
+      >
+        No positions added yet
+      </span> 
+
+      <CardOrderItem
+        v-for="(product, index) in orders.state.current.positions" 
+        :key="product._id"
+        :editable="true" 
+        :product="product" 
+        @increase="() => { globals.actions.increment(orders.state.current.positions, product) }"
+        @decrease="() => { globals.actions.decrement(orders.state.current.positions, product) }"
+        @remove="() => { globals.actions.delete(orders.state.current.positions, product) }"э
+        @updateRentDates="(product, dates) => orders.mutations.updateRentDates({ positions: orders.state.current.positions, productId: product._id, dates })"
+        class="mn-b-thin pd-thin radius-medium bg-white"
+      /> 
+    </Block>
+
+    <Block
+      v-if="tabOrderCreate === 'customer'"
+      title="Customer"
+      class="mn-b-semi"
+      :actions="[{
+        label: '+',
+        function: () => openCustomerPopup()
+      }]"
+    >
+      <CardUser
+        v-if="orders.state.current.customer._id"
+        :user="orders.state.current.customer"
+        :photo="orders.state.current.customer.profile.photo"
+        :name="orders.state.current.customer.profile.name || orders.state.current.customer.phone || orders.state.current.customer.email"
+        @click="() => { 
+          orders.mutations.resetCustomer(orders.state.current.customer)
+        }"
+        class="bg-white pd-thin h-4r radius-medium w-100 mn-b-thin"
+      />
+      <Feed
+        v-else
+        :search="{
+          placeholder: 'Search customer...',
+          class: 'bg-white mn-b-thin'
+        }"
+        :states="{
+          empty: {
+            title: 'No Products Found',
+            description: 'Currently, there are no such products available.'
+          }
+        }"
+        :store="{
+          read: (options) => customers.read(options),
+          state: null
+        }"
+        :options="{
+          owner: route.params._id
+        }"
+        v-slot="{ 
+          items 
+        }"
+        class="bg-light h-max-20r o-scroll"
+      >
+        <CardUser
+          v-for="(user, index) in items" 
+          :key="user._id"
+          :user="user"
+          :photo="user.profile.photo"
+          :name="user.profile.name || user.phone || user.email"
+          @click="() => { 
+            orders.state.current.customer = user
+          }"
+          class="bg-white pd-thin h-4r radius-medium w-100 mn-b-thin"
+        />
+      </Feed>
+      
+    </Block>
+
+    <FormDelivery  
+      v-if="tabOrderCreate === 'delivery'" 
+      :order="orders.state.current"  
+    />
+
+    <FormPayment  
+      v-if="tabOrderCreate === 'payment'"
+      :order="orders.state.current"  
+    />
+
+    <Popup 
+      title="Add customer" 
+      @close-popup="closeCustomerPopup" 
+      :isPopupOpen="isOpenCustomerPopup"
+      :class="'bg-white w-min-30r w-max-30r radius-big pd-medium'"
+    >
+      <FormAddCustomer 
+        @callbackCustomer="closeCustomerPopup"
+      />
+    </Popup>
+
+    <Block
+      class="mn-b-semi"
+    >
+      <div class="h3 flex">
+        <span class="mn-r-auto t-transp">In total</span>
+        <span>{{ cartTotalPrice }} {{returnCurrency()}} </span  >
+      </div>
+    </Block>
+</div>
+
+
+</template>
+
+<script setup="props">
+  import { computed, ref, defineProps, onMounted, reactive, toRefs, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+
+
+  import Field from '@martyrs/src/components/Field/Field.vue'
+  import Button from "@martyrs/src/components/Button/Button.vue";  
+  import Tab from '@martyrs/src/components/Tab/Tab.vue'
+  import Popup from '@martyrs/src/components/Popup/Popup.vue';
+	import Block from '@martyrs/src/components/Block/Block.vue';
+  import Feed from '@martyrs/src/components/Feed/Feed.vue'
+
+  import CardOrderItem  from '@martyrs/src/modules/orders/components/blocks/CardOrderItem.vue'
+  import CardPosition from '@martyrs/src/modules/products/components/blocks/CardPosition.vue';
+  import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'
+
+  import BlockSearch from '@martyrs/src/modules/globals/views/components/blocks/BlockSearch.vue'
+
+  import FormAddCustomer from '@martyrs/src/modules/orders/components/sections/FormAddCustomer.vue'
+  import FormDelivery from '@martyrs/src/modules/orders/components/sections/FormDelivery.vue'
+  import FormPayment from '@martyrs/src/modules/orders/components/sections/FormPayment.vue'
+
+  // Import your store
+  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 products from '@martyrs/src/modules/products/store/products';
+
+  import customers from '@martyrs/src/modules/orders/store/customers.store';
+	
+  // Accessing router
+  const route = useRoute()
+  const router = useRouter()
+
+   orders.mutations.resetOrder(orders.state.current)
+
+  let cartTotalPrice = computed(() => {
+    return Number(orders.state.current.positions.reduce((total, product) => {
+      return total + product.price * product.quantity;
+    }, 0));
+  })
+
+  // Tab
+  const tabOrderCreate = ref('positions')
+
+  // Popup
+  const isOpenProductsPopup = ref(false);
+
+  function openProductsPopup() {
+    isOpenProductsPopup.value = true;
+  }
+
+  function closeProductsPopup() {
+    isOpenProductsPopup.value = false;
+  }
+
+  const isOpenCustomerPopup = ref(false);
+
+  function openCustomerPopup() {
+    isOpenCustomerPopup.value = true;
+  }
+
+  function closeCustomerPopup() {
+    isOpenCustomerPopup.value = false;
+  }
+
+  // Data
+  let order = ref(null)
+
+  async function onSubmit() {
+
+    orders.state.current.creator = {
+      type: 'User',
+      target: auth.state.user._id
+    }
+
+    orders.state.current.owner = {
+      type: 'Organization',
+      target: route.params._id,
+    }
+
+    orders.state.current.customer = {
+      type: 'Customer',
+      target: orders.state.current.customer._id || null,
+    }
+
+    order.value = await orders.actions.create(orders.state.current)
+  }
+
+  function redirectTo () {
+    router.push({
+      name: route.meta.context === 'backoffice' ? 'BackofficeOrderEdit' : 'OrganizationOrderEdit',
+      params: { 
+        order: order.value._id,
+        _id: route.params._id
+      } 
+    })
+  }
+
+  onMounted(() => {
+
+    // await orders.actions.fetchOrder(route.params.id) // Implement this action in your store
+
+    // order.value = orders.state.current
+  })
+
+</script>
+
+
+<style lang="scss">
+
+.vue-select {
+  width: inherit;
+
+  margin-right: 1rem;
+}
+.vue-select-header {
+  height: 3rem;
+}
+</style>