%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div v-show="value == true"
class="modal fixed z-50 bottom-0 left-0 w-full h-screen">
<div @click="closeModal"
:class="isActive == true ? 'opacity-100' : 'opacity-0'"
class="absolute z-10 top-0 left-0 w-full h-full bg-black bg-opacity-25 cursor-pointer transition duration-100"></div>
<div
:class="isActive == true ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'"
class="relative z-20 h-full bg-white shadow-lg p-10 pt-16 transition transform duration-100">
<button @click="closeModal"
class="absolute top-6 right-10 uppercase hover:text-blue-light focus:outline-none transition"
type="button">Close</button>
<div class="relative h-full bg-gray p-8 overflow-y-auto">
<div class="max-w-lg w-full mx-auto">
<h2 class="mb-8 text-center text-4xl font-bold">Add new card</h2>
<ValidationObserver ref="paymentForm">
<form @submit.prevent="submitForm" role="form" method="POST">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-input-group label="Name on Card">
<t-input
type="text"
v-model="card_name"
placeholder="Name on Card" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<t-input-group label="Card Information">
<div class="px-4 py-4 bg-white border border-black border-opacity-20 rounded-xl" id="new-card-element"></div>
</t-input-group>
<div class="flex items-center justify-center px-10">
<button
:disabled="working == true"
class="w-full btn btn-primary btn-small rounded-full"
type="submit">
<span v-if="working == false">Submit</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>Processing</span>
</span>
</button>
</div>
<p class="text-sm text-center mt-6 text-black text-opacity-75">By subscribing to Take a Seat you are agreeing to all site <NuxtLink class="text-blue-light hover:underline"
to="/terms-conditions" target="_blank">Terms and Conditions</NuxtLink>. Please read carefully before continuing.</p>
</form>
</ValidationObserver>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
required: true
}
},
data() {
return {
isActive: false,
working: false,
card: {},
card_name: null
}
},
computed: {
setup_intent() {
return this.$store.state.account.billing.setupIntent
}
},
mounted() {
const elements = this.$stripe.elements();
this.$store.dispatch('account/billing/setupIntent');
this.card = elements.create('card', {
style: {
base: {
fontSize: '15px',
fontFamily: 'Poppins, sans-serif'
}
}
});
this.card.mount('#new-card-element');
},
methods: {
closeModal: function () {
this.$emit("input", !this.value);
},
submitForm() {
this.$refs.paymentForm.validate().then(success => {
if (!success) {
return;
}
this.saveCard();
});
},
async saveCard() {
if(this.setup_intent !== null) {
this.working = true;
const { setupIntent, error } = await this.$stripe.confirmCardSetup(
this.setup_intent, {
payment_method: {
card: this.card,
billing_details: {
name: this.card_name
}
}
});
if (error) {
this.$toast.error(error.message).goAway(3000);
this.$store.dispatch('account/billing/setupIntent')
this.working = false;
} else {
this.$store.dispatch('account/billing/savePaymentMethod', setupIntent.payment_method).then(() => {
this.$store.dispatch('account/progress/get', { slug: 'financial'})
this.$emit("input", false);
this.working = false;
})
}
}
},
},
watch: {
value: function () {
if(this.value == true) {
setTimeout(() => {
this.isActive = true;
}, 100)
} else {
setTimeout(() => {
this.isActive = false;
}, 100)
}
}
}
}
</script>
<style lang="postcss" scoped>
.modal {
padding-top: 20vh;
}
</style>
Zerion Mini Shell 1.0