(front end prep for Purchasing Tickets module)

resources/assets/js/app.js

@@ -1,20 +1,11 @@
+import TicketCheckout from './components/TicketCheckout.vue'
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * include Vue and Vue Resource. This gives a great starting point for
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-Vue.component('example', require('./components/Example.vue'));
+require('./bootstrap')
 
 const app = new Vue({
-    el: '#app'
-});
+    components: {
+        TicketCheckout,
+    },
+})
+
+app.$mount('#app')

resources/assets/js/bootstrap.js

@@ -1,14 +1,9 @@
-
 window._ = require('lodash');
 
 /**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
+ * Polyfill the global environment to add Promise support for Internet Explorer.
  */
-
-window.$ = window.jQuery = require('jquery');
-require('bootstrap-sass');
+require('es6-promise/auto');
 
 /**
  * Vue is a modern JavaScript library for building interactive web interfaces
@@ -17,19 +12,14 @@ require('bootstrap-sass');
  */
 
 window.Vue = require('vue');
-require('vue-resource');
 
 /**
- * We'll register a HTTP interceptor to attach the "CSRF" header to each of
- * the outgoing requests issued by this application. The CSRF middleware
- * included with Laravel will automatically verify the header's value.
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-Vue.http.interceptors.push((request, next) => {
-    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
-
-    next();
-});
+window.axios = require('axios');
 
 /**
  * Echo exposes an expressive API for subscribing to channels and listening

resources/assets/js/components/Example.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Example Component</div>
-
-                    <div class="panel-body">
-                        I'm an example component!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component ready.')
-        }
-    }
-</script>

resources/assets/js/components/TicketCheckout.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <div class="row middle-xs">
+            <div class="col col-xs-6">
+                <div class="form-group m-xs-b-4">
+                    <label class="form-label">
+                        Price
+                    </label>
+                    <span class="form-control-static">
+                        ${{ priceInDollars }}
+                    </span>
+                </div>
+            </div>
+            <div class="col col-xs-6">
+                <div class="form-group m-xs-b-4">
+                    <label class="form-label">
+                        Qty
+                    </label>
+                    <input v-model="quantity" class="form-control">
+                </div>
+            </div>
+        </div>
+        <div class="text-right">
+            <button class="btn btn-primary btn-block"
+                @click="openStripe"
+                :class="{ 'btn-loading': processing }"
+                :disabled="processing"
+            >
+                Buy Tickets
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: [
+            'price',
+            'concertTitle',
+            'concertId',
+        ],
+        data() {
+            return {
+                quantity: 1,
+                stripeHandler: null,
+                processing: false,
+            }
+        },
+        computed: {
+            description() {
+                if (this.quantity > 1) {
+                    return `${this.quantity} tickets to ${this.concertTitle}`
+                }
+                return `One ticket to ${this.concertTitle}`
+            },
+            totalPrice() {
+                return this.quantity * this.price
+            },
+            priceInDollars() {
+                return (this.price / 100).toFixed(2)
+            },
+            totalPriceInDollars() {
+                return (this.totalPrice / 100).toFixed(2)
+            },
+        },
+        methods: {
+            initStripe() {
+                const handler = StripeCheckout.configure({
+                    key: App.stripePublicKey
+                })
+
+                window.addEventListener('popstate', () => {
+                    handler.close()
+                })
+
+                return handler
+            },
+            openStripe(callback) {
+                this.stripeHandler.open({
+                    name: 'TicketBeast',
+                    description: this.description,
+                    currency: "usd",
+                    allowRememberMe: false,
+                    panelLabel: 'Pay {{amount}}',
+                    amount: this.totalPrice,
+                    image: '/img/checkout-icon.png',
+                    token: this.purchaseTickets,
+                })
+            },
+            purchaseTickets(token) {
+                console.log({
+                    email: token.email,
+                    quantity: this.quantity,
+                    payment_token: token.id,
+                })
+
+                // this.processing = true
+
+                // axios.post(`/concerts/${this.concertId}/orders`, {
+                //     email: token.email,
+                //     quantity: this.quantity,
+                //     payment_token: token.id,
+                // }).then(response => {
+                //     window.location.href = response.body.url
+                // }).catch(response => {
+                //     this.processing = false
+                // })
+            }
+        },
+        created() {
+            this.stripeHandler = this.initStripe()
+        }
+    }
+</script>