%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block
title="Subscription"
description="You can manage your subscription details here. Remember to set up your subscription to get your account live and receive bookings."
width="max-w-5xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
<div class="border border-black border-opacity-20 p-6 md:p-10">
<h2 class="text-2xl font-medium">Standard Plan</h2>
<span class="block text-lg mb-3">£20/pm</span>
<div class="grid grid-cols-2 gap-4 bg-green bg-opacity-50 border border-green p-2 px-3 rounded-md"
v-if="subscription">
<span class="block text-sm text-black">Status: {{ subscription.active == 'active' ? 'Active' : 'Inactive' }}</span>
<span class="block text-sm text-black" v-if="subscription.is_grace_period == true">Ends: {{ subscription.ends_at }}</span>
</div>
<div v-if="benefits"
class="my-3 mb-5">
<div v-for="(benefit, key) in benefits"
v-bind:key="key"
class="my-1 flex items-center text-sm text-black text-opacity-90">
<svg class="w-5 h-5 mr-1 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>{{ benefit.text }}</span>
</div>
</div>
<button
@click="isModalOpen =! isModalOpen"
class="btn btn-small btn-primary rounded-full"
type="button">
<span v-if="subscription">Edit/update Payment details</span>
<span v-else>Start Subscription</span>
</button>
<div class="mt-5"
v-if="subscription">
<div v-if="working">
<span class="flex items-center text-sm uppercase">
<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>Processing</span>
</span>
</div>
<div v-else>
<button v-if="subscription.active == 'active' && subscription.is_grace_period == false"
@click="cancelSubscription"
class="block uppercase text-red text-sm">Cancel Your Subscription</button>
<button v-else-if="subscription.active == 'active' && subscription.is_grace_period == true"
@click="resumeSubscription"
class="block uppercase text-blue-light text-sm">Resume Your Subscription</button>
</div>
</div>
</div>
<div class="py-8" v-if="subscription">
<h2 class="mb-2 text-2xl font-medium">Do you have a Discount Code?</h2>
<p class="mb-6">Enter your discount code below</p>
<ValidationObserver ref="discountForm">
<form @submit.prevent="submitDiscountForm" role="form" method="POST">
<ValidationProvider rules="required" v-slot="{ errors }">
<div class="relative pr-20">
<t-input
type="text"
v-model="coupon"
placeholder="e.g. DISCOUNT3MONTH" />
<button type="submit"
:disabled="working"
class="w-24 absolute top-0 right-0 h-full border border-black bg-black text-white rounded-r-xl focus:outline:none hover:bg-white hover:text-black">
<span v-if="working == false">Submit</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin 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>
</button>
</div>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</form>
</ValidationObserver>
</div>
</div>
<SubscriptionCardModal v-model="isModalOpen" />
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
isModalOpen: false,
coupon: null,
benefits: [
{ text: 'New Client Referrals' },
{ text: 'From only £20 per month' },
{ text: 'Dedicated human support' },
{ text: 'Beta access to CPD training and courses' },
{ text: 'Immediate booking and payments' },
],
}
},
computed: {
subscription() {
return this.$store.state.account.subscription.subscription
}
},
mounted() {
this.$store.dispatch('account/subscription/getSubscription')
},
methods: {
async cancelSubscription() {
this.$toast.info('Are you sure you want to cancel your subscription?', {
duration : 5000,
action: [
{
text: 'Yes',
onClick : (e, toastObject) => {
toastObject.goAway(0);
this.working = true;
if(this.working == true) {
this.$store.dispatch('account/subscription/cancelSubscription').then((response) => {
this.$auth.fetchUser()
this.$store.dispatch('account/progress/get', { slug: 'financial'})
this.working = false;
this.$toast.success('You have successfully cancelled subscription!').goAway(3000);
})
}
}
},
{
text: 'No',
onClick : (e, toastObject) => {
toastObject.goAway(0);
}
}
],
});
},
async resumeSubscription() {
this.working = true;
if(this.working == true) {
await this.$store.dispatch('account/subscription/resumeSubscription').then((response) => {
this.$auth.fetchUser()
this.$store.dispatch('account/progress/get', { slug: 'financial'})
this.working = false;
this.$toast.success('You have successfully resumed your subscription!').goAway(3000);
})
}
},
async submitDiscountForm() {
this.$refs.discountForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.post('/subscription/discount/create', {
coupon: this.coupon
}).then((response) => {
this.working = false;
if(response.status == 200) {
this.$toast.success('Successfully added your discount').goAway(3000);
}
}).catch((error) => {
this.working = false;
if(error.response.data.message) {
this.$toast.error(error.response.data.message).goAway(1500);
} else {
this.$toast.error(error.response.data).goAway(1500);
}
})
})
}
}
}
</script>
Zerion Mini Shell 1.0