Set event triggers for card component

resources/js/panel/credits.vue

@@ -29,7 +29,9 @@
 	<div :class="{right: !selectSaved}" class="menu-slider"><div></div></div>
 	</div>
 
-	<payment-card :stripe="stripe" v-if="!selectSaved"></payment-card>
+	<payment-card @set-card="(c) => {card = c}" @card-valid="(val) => {cardValid = val}"
+	@update-billing-name="billingName = $event.target.value" :stripe="stripe"
+	v-if="!selectSaved"></payment-card>
 
 	<div id="payment-error"></div>
 </section>
@@ -74,6 +76,7 @@ function getSecret() {
 
 //Gets key from the server then sends it with stripe
 function pay() {
+	console.log()
 	this.getSecret().then(secret => {
 		if (!secret) {return}
 		this.loading = true
@@ -82,8 +85,9 @@ function pay() {
 				card: this.card,
 				billing_details: {name:
 				document.getElementById('billing-name').value},
-				setup_future_usage: document.querySelector('#save-card input') == 'on' ? 'off_session' : null
-			}
+			},
+			setup_future_usage: document.querySelector(
+			"#save-card input").value == 'on' ? 'off_session' : null
 		})
 	}).then(result => {
 		if (result.error) {
@@ -106,7 +110,7 @@ export default {
 		return {packs: {credits10: 0, credits50: 0,
 		credits100: 0, credits1000: 0}, loading: false, stripe:
 		Stripe(process.env.VUE_APP_STRIPE_KEY), card:
-		null, cardValid: false, billingName: null, selectSaved: true}
+		null, billingName: null, selectSaved: true, cardValid: false}
 	},
 	computed: {total},
 	methods: {getSecret, pay},

resources/js/panel/orders.vue

@@ -17,6 +17,7 @@
 		</template>
 	</ul>
 	</section>
+	<div class="info-grey"><p>Orders are typically completed within 1-5 days.</p><div></div></div>
 	<section class="history-pane">
 		<h4>Order History</h4>
 	<table>

resources/js/panel/payment-card.vue

@@ -1,7 +1,7 @@
 <template>
 	<form id="payment-form" action="">
 	<label for="name">Name on Card</label>
-	<input v-model="billingName" id="billing-name" type="name">
+	<input @input="$emit('updateBillingName', $event)" id="billing-name" type="name">
 	<div id="card-element"></div>
 	<div id="card-errors"></div>
 	<div id=save-card>
@@ -13,16 +13,19 @@
 
 <script>
 function mountPaymentForm() {
-	this.card = this.stripe.elements().create('card')
-	this.card.mount('#card-element')
+	let card = this.stripe.elements().create('card')
+	card.mount('#card-element')
+	this.$emit('setCard', card)
 
-	this.card.on('change', function(event) {
+	card.on('change', function(event) {
 	let displayError = document.getElementById('card-errors');
 	if (event.error) {
 		displayError.textContent = event.error.message;
+		displayError.textContent = '';
+		this.$emit('cardValid', true)
 	} else {
 		displayError.textContent = '';
-		this.cardValid = true
+		this.$emit('cardValid', true)
 	}
 	}.bind(this));
 }
@@ -33,6 +36,7 @@ export default {
 	},
 	methods: {mountPaymentForm},
 	props: ['stripe'],
-	mounted: mountPaymentForm
+	mounted: mountPaymentForm,
+	emits: ['updateBillingName', 'cardValid', 'setCard']
 }
 </script>

resources/scss/main.scss

@@ -1226,19 +1226,29 @@ div#card-errors {
 		align-items: center;
 		justify-content: center;
 	}
+
+	#billing-name {
+		width: 25em;
+		max-width: 90%;
+	}
 }
 
 #card-element {
 		border: 2px solid grey;
 		border-radius: 4px;
 		padding: 10px;
-	input {
-	}
-
 }
 
-.loading-overlay {
-	position: absolute;
-	width: 100%;
-	height: 100%;
+.info-grey {
+	text-align: center;
+	color: grey;
+	// color: vars.getColor('light2-grey');
+	div {
+		width: 20%;
+		margin: auto;
+		height: 4px;
+		margin-top: 1em;
+		background: vars.getColor('light2-grey');
+		border-radius: 2px;
+	}
 }