first commit

src/pages/pay/cancel.vue

@@ -0,0 +1,172 @@
+<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) => {
+          console.log(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>