171 lines
4.2 KiB
Vue
Executable File
171 lines
4.2 KiB
Vue
Executable File
<template>
|
|
<Header />
|
|
<div class="flex">
|
|
<div class="">
|
|
<SideBar />
|
|
</div>
|
|
<div class=" w-full px-10">
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li>
|
|
<router-link :to="{ name: 'home' }">
|
|
Home
|
|
</router-link>
|
|
</li>
|
|
<li>
|
|
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
|
|
Edit Delivery
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 rounded-md p-6 ">
|
|
<div class="text-[24px]">Create Oil Delivery {{ customer_id }}
|
|
</div>
|
|
<form class="rounded-md px-8 pt-6 pb-8 mb-4 w-full" enctype="multipart/form-data" @submit.prevent="checkoutOil">
|
|
|
|
|
|
<div class="col-span-12 md:col-span-4 mb-5 md:mb-0 gap-10">
|
|
<label class="block text-white text-sm font-bold cursor-pointer label">Order </label>
|
|
<div class=""></div>
|
|
<div class=""></div>
|
|
<div class=""></div>
|
|
</div>
|
|
|
|
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
|
|
<button class="btn">
|
|
Create Oil Order
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
import {defineComponent} from 'vue'
|
|
import axios from 'axios'
|
|
import authHeader from '../../services/auth.header'
|
|
import Header from '../../layouts/headers/headerauth.vue'
|
|
import SideBar from '../../layouts/sidebar/sidebar.vue'
|
|
import Footer from '../../layouts/footers/footer.vue'
|
|
import useValidate from "@vuelidate/core";
|
|
import {notify} from "@kyvg/vue3-notification"
|
|
import {minLength, required} from "@vuelidate/validators";
|
|
|
|
export default defineComponent({
|
|
name: 'PayCancel',
|
|
|
|
components: {
|
|
Header,
|
|
SideBar,
|
|
Footer,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
v$: useValidate(),
|
|
user: null,
|
|
customer: null,
|
|
customer_id: null,
|
|
stripe: null,
|
|
}
|
|
},
|
|
validations() {
|
|
return {
|
|
CreateOilOrderForm: {
|
|
basicInfo: {
|
|
gallons_ordered: {required, minLength: minLength(1)},
|
|
expected_delivery_date: {required},
|
|
},
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.userStatus()
|
|
},
|
|
watch: {
|
|
$route() {
|
|
this.getCustomer(this.$route.params.id);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getCustomer(this.$route.params.id)
|
|
this.getStripePublishableKey();
|
|
},
|
|
|
|
methods: {
|
|
userStatus() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
|
axios({
|
|
method: 'get',
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
if (response.data.ok) {
|
|
this.user = response.data.user;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.user = null
|
|
})
|
|
},
|
|
getCustomer(user_id: any) {
|
|
let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
|
|
axios({
|
|
method: "get",
|
|
url: path,
|
|
withCredentials: true,
|
|
})
|
|
.then((response: any) => {
|
|
this.customer = response.data;
|
|
this.customer_id = response.datauser_id
|
|
|
|
})
|
|
.catch(() => {
|
|
notify({
|
|
title: "Error",
|
|
text: "Could not find customer",
|
|
type: "error",
|
|
});
|
|
});
|
|
},
|
|
checkoutOil() {
|
|
// Get Checkout Session ID
|
|
fetch('http://localhost:5001/create-checkout-session', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ book_id: book.id }),
|
|
})
|
|
.then((result) => result.json())
|
|
.then((data) => {
|
|
// Redirect to Stripe Checkout
|
|
return this.stripe.redirectToCheckout({ sessionId: data.sessionId });
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
});
|
|
},
|
|
|
|
getStripePublishableKey() {
|
|
fetch('http://localhost:5001/config')
|
|
.then((result) => result.json())
|
|
.then((data) => {
|
|
// Initialize Stripe.js
|
|
this.stripe = Stripe(data.publicKey);
|
|
});
|
|
},
|
|
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style> |