example-code/javascript-vue/js/panel/services.vue

<template>
<div>
	<div class="sliding-menu">
	<a href="#new-order" :class="{selected: page == 'new-order'}">Services</a>
	<a href="#credits" :class="{selected: page == 'credits'}">Credits</a>
	<div :class="page" class="menu-slider"><div></div></div>
	</div>
	<h4 class="credits-display"><img class="icon" src="../../images/coin-stack.svg" alt=""><span> {{(credits/100).toLocaleString('en')}}</span></h4>

	<template v-if="page == 'new-order'">

	<div class="services-legend">
	<h5>Name</h5><h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5>
	</div>

	<ServicePane :site="'youtube'" :services="services"
	@select="select"></ServicePane>

	<ServicePane :site="'instagram'" :services="services"
	@select="select"></ServicePane> 

	<ServicePane :site="'twitter'" :services="services"
	@select="select"></ServicePane>

	<ServicePane :site="'tiktok'" :services="services"
	@select="select"></ServicePane>

	<div id="overlay" v-if="selected">

	<div v-if="!completed" class="overlay-item">
	<img @click="completed = false; selected = null" class="cancel icon"
	src="../../images/cancel-icon2.svg" alt=""/>
		<img v-if="selected.site == 'youtube'" class="icon"
		src="../../images/youtube-icon.svg" alt=""/>
		<img v-if="selected.site == 'instagram'" class="icon"
		src="../../images/instagram-icon.svg" alt=""/>
		<img v-if="selected.site == 'twitter'" class="icon"
		src="../../images/twitter.svg" alt=""/>
		<img v-if="selected.site == 'tiktok'" class="icon"
		src="../../images/tik-tok.svg" alt=""/>
		<h3>{{selected.name}}</h3>
		<h4>Cost: {{(cost).toLocaleString('en')}}</h4>
		<h4>Quantity</h4>
		<div><input required :min="selected.minimum" :max="selected.maximum"
		type="number" v-model="amount" id="selQty"><span> /
		{{selected.maximum.toLocaleString('en')}}</span></div> 

		<template v-if="selected.modifier == 'location'">
		<h4>Location</h4>
		<div><select required id="country" name="">
		<option value="usa">USA</option>
		<option value="canada">Canada</option>
		<option value="uk">United Kingdom</option>
		<option value="germany">Germany</option>
		<option value="france">France</option>
		</select>
		</div> 
		</template>

		<template v-if="selected.modifier == 'language'">
		<h4>Location</h4>
		<div><select required id="language" name="">
		<option value="english">English</option>
		<option value="french">French</option>
		<option value="spanish">Spanish</option>
		<option value="german">German</option>
		<option value="arabic">Arabic</option>
		</select>
		</div> 
		</template>

		<h4>URL</h4>
		<div><input required type="url" id="url" v-model="url"></div> 
		<button @click="buyService" :disabled="paying">Submit<loading
		v-if="paying"></loading></button>
		<p id="overlay-error">{{errorText}}</p>
	</div>

	<div class="overlay-item" v-else-if="completed">
	<img @click="completed = false; selected = null" class="cancel icon"
	src="../../images/cancel-icon2.svg" alt=""/>
	<img class="icon" src="../../images/checked2.svg" alt=""/>
	<h3>Success!</h3>
	</div>

	</div>

	</template>

	<credits @purchase-complete="$emit('updateUser')" :preferred="preferred" :token="token" v-if="page == 'credits'"></credits>

</div>
</template>

<script>
import ServicePane from './service-pane.vue'
import Credits from './credits.vue'
import Loading from '../icons/loading.vue'

function select(service) {
	this.completed = false
	if (this.amount < service.minimum){
		this.amount = service.minimum;
	}
	if (this.amount > service.maximum){
		this.amount = service.maximum;
	}

	this.selected = service
	this.errorText = ''
}

function cost() {
	return (this.selected.price * this.amount / 100000).toFixed(2)
}

function buyService() {
	if (!this.url) {
		this.errorText = "You must provide a URL."	
		return
	} else if (Math.ceil(this.cost > this.credits)) {
		this.errorText = 'Insuficient Credits'
		return
	} else if (this.amount < this.selected.minimum || this.amount > this.selected.maximum) {
		this.errorText = 'Invalid amount'
		return
	}

	this.paying = true
	let note = ''
	let country = document.getElementById('country')
	let language = document.getElementById('language')

	if (country) {
		note = JSON.stringify({'location': country.value})
	} else if (language) {
		note = JSON.stringify({'language': language.value})
	}
	
	fetch('/panel/orders', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'service': this.selected.id,
		'quantity': this.amount, 'url': this.url, 'note': note}), }).then(
			response => {
				if (response.ok) {
					this.errorText = `Success!`
					this.completed = true
					this.$emit('updateUser')
					this.$emit('updateOrders')
				} else if (response.status == 520) {
					this.errorText = 'Insuficient Credits'
				} else {
					this.errorText = `Error ${response.status}:
					${response.statusText}`
				}

				this.paying = false
			}
		)

}

function page() {
	switch (this.active) {
		case '#new-order':
			return 'new-order'
		case '#credits':
			return 'credits'
	}
}

export default {
	data() {
		return {servicePane: true, services: null, selected: null, amount: 0,
		paying: false, url: '', completed: false, errorText: ''}
	},
	components: {ServicePane, Loading, Credits},
	props: ['token', 'credits', 'active', 'preferred'],
	created() {
		fetch("/panel/services", {
			method: 'GET',
			headers: {'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-XSRF-TOKEN': this.token}
		}).then(response => {
			response.json().then(data => {this.services = data})
		})
	},
	methods: {select, buyService},
	computed: {cost, page},
	emits: ['updateUser', 'updateOrders']
}
</script>