%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Saved Cards"
description="Manage your saved cards, these cards will be used any payments you make through the take a seat website">
<div v-if="loading == true">
<span class="flex items-center justify-center mb-8">
<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>Fetching Payment Methods</span>
</span>
</div>
<div v-else-if="loading == false && payment_methods.length"
class="grid grid-cols-1 gap-y-3 mb-10">
<div v-for="(payment_method, key) in payment_methods"
v-bind:key="key">
<div class="relative grid grid-cols-3 bg-white border border-black border-opacity-10 pl-6 pr-8 py-4 rounded-lg">
<span>{{ payment_method.billing_details.name }}</span>
<span class="flex items-center justify-center"><span class="font-medium mr-1">Last 4:</span>{{ payment_method.card.last4 }}</span>
<span class="flex items-center justify-end"><span class="font-medium mr-1">Expiry:</span>{{ payment_method.card.exp_month }}/{{ payment_method.card.exp_year }}</span>
</div>
<div class="pt-2 px-3 flex items-center justify-end">
<button v-if="payment_method.id !== default_payment_method.id"
@click="makeMethodPrimary(payment_method.id)"
class="ml-3 uppercase text-xs text-blue-light"
type="button">
<span v-if="isMakingPrimary == false">Make Primary</span>
<span v-else>Processing...</span>
</button>
<button v-if="payment_method.id !== default_payment_method.id"
@click="removePaymentMethod(payment_method.id)"
class="ml-3 uppercase text-xs text-red text-opacity-80"
type="button">
<span v-if="isDeleting == false">Remove</span>
<span v-else>Processing...</span>
</button>
</div>
</div>
</div>
<div class="text-center mb-10"
v-else>
<p class="text-md font-bold">You have no cards yet</p>
</div>
<div class="flex items-center justify-center">
<button @click="modalOpen =! modalOpen"
class="btn btn-primary btn-small rounded-full">Add a new card</button>
</div>
<NewCardModal v-model="modalOpen" />
</Block>
</template>
<script>
export default {
data() {
return {
modalOpen: false,
error: null,
loading: false,
working: false,
isMakingPrimary: false,
isDeleting: false,
card: {},
cardHolderName: null
}
},
computed: {
payment_methods() {
return this.$store.state.account.billing.paymentMethods
},
default_payment_method() {
return this.$store.state.account.billing.defaultPaymentMethod
}
},
async mounted() {
this.loading = true;
await this.$store.dispatch('account/billing/getPaymentMethods').then(() => {
this.loading = false;
})
},
methods: {
async removePaymentMethod(payment_method_id) {
await this.$store.dispatch('account/billing/deletePaymentMethod', {
payment_method: payment_method_id
})
},
async makeMethodPrimary(payment_method_id) {
await this.$store.dispatch('account/billing/makePrimary', {
payment_method: payment_method_id
})
}
}
}
</script>
Zerion Mini Shell 1.0