%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Rates"
description="Please set your session prices. We don’t want you to devalue your services so have set rates for individual or couples only."
width="max-w-3xl">
<ValidationObserver ref="form">
<form @submit.prevent="submit" role="form" method="POST">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-0">
<ValidationProvider rules="required|integer" v-slot="{ errors }">
<t-input-group label="Individual Price">
<money v-model="products.individuals_price"
v-bind="money"></money>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<ValidationProvider rules="required|integer" v-slot="{ errors }">
<t-input-group label="Couples Price">
<money v-model="products.couples_price"
v-bind="money"></money>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
</div>
<div class="mt-6 flex items-center justify-center">
<button
class="btn btn-primary btn-small"
type="submit">
<span v-if="working == false">Save Changes</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Saving</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</Block>
</template>
<script>
export default {
name: 'ProfileRates',
data() {
return {
working: false,
products: {
individuals_price: 0,
couples_price: 0,
},
money: {
decimal: ',',
thousands: ',',
prefix: '£ ',
suffix: '',
precision: 0,
masked: false
}
}
},
computed: {
session_types() {
return this.$store.state.session_types.list
}
},
async mounted() {
await this.$axios.get('/account/profile/products').then((response) => {
if(response.data.data.length) {
this.products.individuals_price = response.data.data[0].price;
this.products.couples_price = response.data.data[1].price;
}
}).catch((error) => {
this.$toast.error(error).goAway(1000);
})
},
methods: {
async submit() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.post('/account/profile/products/create', {
individuals_price: this.products.individuals_price,
couples_price: this.products.couples_price,
}).then((response) => {
this.working = false;
this.$store.dispatch('account/progress/get', { slug: 'profile' })
this.$toast.success('Successfully updated your rates!').goAway(3000);
}).catch((error) => {
this.working = false;
this.$toast.error(error).goAway(3000);
})
});
}
}
}
</script>
Zerion Mini Shell 1.0