ff

jankrnac · Jul 28, 2024 · 1151df0 · 1151df0
1 parent ca37e12
commit 1151df0
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 36 deletions.
diff --git a/app/components/cart/Reciept.vue b/app/components/cart/Reciept.vue
@@ -6,7 +6,7 @@
         <dl class="mt-6 space-y-4">
             <div class="flex items-center justify-between">
                 <dt class="text-sm text-gray-600">Products price</dt>
-                <dd class="text-sm font-medium text-gray-900">{{cart.cartProduct.map(e=>e.product.price).reduce((a, c) => { return a + c })}} Kc</dd>
+                <dd class="text-sm font-medium text-gray-900">{{cart.cartProduct.map(e => { return e.price * e.qty }).reduce((a, c) => { return a + c })}} Kc</dd>
             </div>
 
             <div v-if="cart.deliveryMethod" class="flex items-center justify-between border-t border-gray-200 pt-4">
@@ -57,18 +57,9 @@ defineProps({
         default: false
     }
 })
-const { cart, resetCart } = await useCart()
+const { cart, resetCart } = useCart()
 const route = useRoute()
 
-const creatingOrder = ref(false)
-const createOrder = async () => {
-
-    creatingOrder.value = true
-    
-    const { data:order } = await useApiFetch('order', {method: "POST", body: {cartid: cart.value.id}})
-
-    await navigateTo(`/orders/${order.value.id}/success?cookie_id=${cart.value.cookie_id}`)
-}
 
 const modal = ref(null)
 //the variable name (modal) needs to match the template ref name 

diff --git a/app/pages/cart/delivery.vue b/app/pages/cart/delivery.vue
@@ -4,23 +4,59 @@
 
 			<UForm :state="state" :schema="schema" class="mt-12 lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16" @submit="onSubmit">
 
-				<div class="space-y-4 lg:col-span-8">
-					<UFormGroup label="Email" name="email">
-						<UInput v-model="state.email" size="xl" />
-					</UFormGroup>
-
-					<div class="flex flex-1 justify-between space-x-2">
-						<UFormGroup label="First name" name="firstName" class="flex-1">
-							<UInput v-model="state.firstName" size="xl"/>
+				<div class="lg:col-span-8">
+
+					<h2 class="text-xl font-semibold mb-6">Invoice address</h2>
+					<div class="space-y-4 ">
+						<UFormGroup label="Email" name="email" required>
+							<UInput v-model="state.email" size="xl" />
 						</UFormGroup>
 
-						<UFormGroup label="Last name" name="lastName" class="flex-1">
-							<UInput v-model="state.lastName" size="xl"/>
+						<div class="flex flex-1 justify-between space-x-2">
+							<UFormGroup label="First name" name="firstName" class="flex-1" required>
+								<UInput v-model="state.firstName" size="xl"/>
+							</UFormGroup>
+
+							<UFormGroup label="Last name" name="lastName" class="flex-1" required>
+								<UInput v-model="state.lastName" size="xl"/>
+							</UFormGroup>
+						</div>
+
+						<UFormGroup label="Street" name="street" required>
+							<UInput v-model="state.street" size="xl" />
+						</UFormGroup>
+
+						<div class="flex flex-1 justify-between space-x-2">
+							<UFormGroup label="City" name="city" class="flex-1" required>
+								<UInput v-model="state.city" size="xl" />
+							</UFormGroup>
+
+							<UFormGroup label="ZIP" name="zip" required>
+								<UInput v-model="state.zip" size="xl" />
+							</UFormGroup>
+						</div>
+
+						<UFormGroup label="Phone" name="phone">
+							<UInput v-model="state.email" size="xl" />
 						</UFormGroup>
 					</div>
 
-				</div>
+					<h2 class="text-xl font-semibold mt-16 mb-6">Delivery</h2>
+
+					<URadioGroup v-model="selectedDelivery" :options="deliveryMethods">
+						<template #label="{ option }">
+						<p class="">
+							{{ option.name }}
+						</p>
+						</template>
+					</URadioGroup>
 
+					<h2 class="text-xl font-semibold mt-16 mb-6">Payment</h2>
+
+					<URadioGroup v-model="selectedPayment" legend="Choose something" :options="paymentMethods" />
+
+				</div>
+
 				<CartReciept :pending="pending"/>
 
 
@@ -36,33 +72,47 @@
 import { z } from 'zod'
 
 const state = reactive({
-  email: undefined,
-  firstName: undefined,
-  lastName: undefined
+  	email: undefined,
+  	firstName: undefined,
+  	lastName: undefined,
+  	street: undefined,
+  	city: undefined,
+	zip: undefined
 })
 
 const schema = z.object({
-  email: z.string().email('Invalid email'),
-  firstName: z.string(),
-  lastName: z.string(),
-
+  	email: z.string().email('Invalid email'),
+  	firstName: z.string(),
+  	lastName: z.string(),
+  	street: z.string(),
+	city: z.string(),
+	zip: z.string()
 })
 
+const cart = useState('cart')
 const pending = ref(false)
 
-async function onSubmit(event) {
+async function onSubmit() {
 
 	pending.value = true
 
-	await $fetch('/api/orders', {
-		method: "POST"
+	const order = await $fetch('/api/orders', {
+		method: "POST",
+		body: cart.value.id
 	})
 
 	pending.value = false
 
 	navigateTo({
-		path: '/orders/'+111
+		path: '/orders/'+ order.number
 	})
 
 }
+
+const { data:deliveryMethods } = useFetch('/api/deliveryMethods')
+const selectedDelivery = ref()
+
+const { data:paymentMethods } = useFetch('/api/paymentMethods')
+const selectedPayment = ref()
+
 </script>
diff --git a/app/pages/orders/[number].vue b/app/pages/orders/[number].vue
@@ -6,6 +6,7 @@
             <Icon name="ph:check-circle-thin" size="100px" color="green"/>
 
             <h2 class="font-semibold text-2xl">Order successful</h2>
+
         </div>
     </div>
 </div>
@@ -14,6 +15,6 @@
 
 <script setup>
 
-const { data:order } = await useFetch('/api/orders/' + useRoute().params)
+const { data:order } = await useFetch('/api/orders/' + useRoute().params.number)
 
 </script>
diff --git a/server/api/deliveryMethods/index.get.ts b/server/api/deliveryMethods/index.get.ts
@@ -0,0 +1,11 @@
+export default eventHandler(async (event) => 
+    {    
+        const config = useRuntimeConfig()
+
+        const response = await $fetch('/deliveryMethods', {
+            baseURL: config.public.apiBase
+        })
+
+        return response
+
+    })
diff --git a/server/api/orders/[number]/index.get.ts b/server/api/orders/[number]/index.get.ts
@@ -0,0 +1,13 @@
+export default eventHandler(async (event) => 
+{    
+    const config = useRuntimeConfig()
+
+    const number = getRouterParam(event, 'number')
+
+    const response = await $fetch('/orders/' + number, {
+        baseURL: config.public.apiBase
+    })
+
+    return response
+
+})
diff --git a/server/api/orders/index.get.ts b/server/api/orders/index.get.ts
@@ -3,8 +3,6 @@ export default eventHandler(async (event) =>
     const config = useRuntimeConfig()
     const number = getRouterParam(event, 'number')
 
-    const 
-
     const response = await $fetch('/orders/'+number, {
         baseURL: config.public.apiBase
     })