Show a completed dialog after a purchase

resources/js/panel/credits.vue

@@ -1,5 +1,5 @@
 <template>
-<section class="select-credits">
+<section v-if="!complete" class="select-credits">
 <div class="credits-pane"><h2>10 Credits</h2>
 <h3>$10.99</h3><div><span>Qty</span><input min="0" max="1000" v-model="packs.credits10" type="number"></div>
 </div>
@@ -19,7 +19,7 @@
 	<div id="credits-errors"></div>
 </section>
 
-<section id="payment-section">
+<section v-if="!complete" id="payment-section">
 	<h4>Select a payment method</h4>
 
 	<div class="sliding-menu">
@@ -39,16 +39,19 @@
 	<div id="payment-error"></div>
 </section>
 
-<section class="credits-confirm">
+<section v-if="!complete" class="credits-confirm">
 	<button @click="pay" :disabled="!ready"
 	class="brand-btn">Buy<loading v-if="loading"></loading></button>
 </section>
+
+<PurchaseCompleted v-if="complete"></PurchaseCompleted>
 </template>
 
 <script>
 import Loading from '../icons/loading.vue'
 import PaymentCard from './payment-card.vue'
 import SavedCards from './saved-cards.vue'
+import PurchaseCompleted from './purchase-completed.vue'
 
 function total() {
 	return this.packs.credits10*10.99 + this.packs.credits50*54.99
@@ -104,7 +107,8 @@ function pay() {
 			document.getElementById('payment-error').textContent =
 			result.error.message
 		} else if (result.paymentIntent.status === 'succeeded') {
-			this.$emit('purchaseComplete')
+			setTimeout(() => {this.$emit('purchaseComplete')}, 4000)
+			this.complete = true
 		} else {
 			document.getElementById('payment-error').textContent =
 			'An unknown error occured'
@@ -133,13 +137,13 @@ function ready() {
 }
 
 export default {
-	components:{Loading, PaymentCard, SavedCards},
+	components:{Loading, PaymentCard, SavedCards, PurchaseCompleted},
 	data() {
 		return {packs: {credits10: 0, credits50: 0,
 		credits100: 0, credits1000: 0}, loading: false, stripe:
 		window.Stripe(process.env.VUE_APP_STRIPE_KEY), card:
 		null, billingName: null, selectSaved: true, cardValid: false, cards:
-		null, picked: null
+		null, picked: null, complete: false
 		}
 	},
 	computed: {total, ready},

resources/js/panel/panel.vue

@@ -85,20 +85,15 @@ function getOrders() {
 	})
 }
 
-//Should show completed view and update user information after 5 seconds
-function showCompleted() {
-
-}
-
 export default {
 	components: {
-		Sidebar, Settings, PastOrders, NewOrder
+		Sidebar, Settings, PastOrders, NewOrder, 
 	},
 	data() {
 	return {active: window.location.hash, user: null,
 	token: null, orders: null, loading: true,}
 	},
-	methods: {getUser, getServices, getOrders, showCompleted},
+	methods: {getUser, getServices, getOrders, },
 	created() {
 		let loaders = []
 		loaders.push(this.getUser())

resources/js/panel/purchase-completed.vue

@@ -0,0 +1,9 @@
+<template>
+<div class="status-dialog">
+	<img class="icon" src="../../images/checked2.svg" alt=""/>
+	<h3>Purchase complete. A receipt will be emailed to you.</h3>
+</div>
+</template>
+
+<script>
+</script>

resources/js/panel/services.vue

@@ -81,7 +81,7 @@
 
 	</template>
 
-	<credits :token="token" v-if="page == 'credits'"></credits>
+	<credits @purchase-complete="$emit('updateUser')" :token="token" v-if="page == 'credits'"></credits>
 
 </div>
 </template>
@@ -155,7 +155,6 @@ function page() {
 		case '#credits':
 			return 'credits'
 	}
-	console.log(this.active)
 }
 
 export default {

resources/scss/main.scss

@@ -1261,3 +1261,13 @@ div#card-errors {
 	max-width: 15em;
 	margin: auto;
 }
+
+.status-dialog {
+	margin: auto;
+	max-width: 20em;
+
+	img {
+		margin: auto;
+		display: block;
+	}
+}