%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<span class="block text-center text-3xl font-bold mb-6">Summary</span>
<p>You are nearly there. Please carefully check all details are correct before proceeding to payment.</p>
<div class="my-2 mb-6">
<div class="grid grid-cols-3 gap-3 border-b-2 border-gray py-6">
<span class="uppercase text-sm">Therapist</span>
<span class="col-span-2 text-sm">{{ therapist.user.full_name }}</span>
</div>
<div v-if="loading == false"
class="border-b-2 border-gray py-4">
<div class="grid grid-cols-3 gap-3 py-2">
<span class="uppercase text-sm">No. Of Sessions</span>
<span class="text-sm">{{ Object.keys(selected_slots).length }}</span>
</div>
<div v-for="(session, key) in sessions"
v-bind:key="key">
<div class="grid grid-cols-6 gap-3 py-2">
<span class="col-span-2 uppercase text-sm">Session {{ (key+1) }}</span>
<span class="col-span-3 text-sm">{{ $moment.utc(session.slot.start).format('D MMM Y - H:mm')+' - '+$moment.utc(session.slot.end).format('H:mm') }}</span>
<div class="col-span-1 flex items-center justify-end">
<span class="text-sm">{{ session.item_total.formatted }}</span>
</div>
</div>
<div class="grid grid-cols-3 gap-3 py-2">
<span class="uppercase text-sm">Session Type</span>
<span class="text-sm">{{ session.session_name }}</span>
<div class="flex items-center justify-end">
<button
@click="goBack"
class="text-sm uppercase underline"
type="button">Change</button>
</div>
</div>
</div>
</div>
<div v-if="loading == false"
class="grid grid-cols-2 gap-2 border-b-2 border-gray py-6">
<span class="uppercase text-sm">Total Price</span>
<span class="uppercase font-bold flex items-center justify-end">{{ totals.formatted }}</span>
</div>
<div v-else
class="flex items-center justify-center py-6">
<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>
Loading...
</div>
</div>
<div class="flex flex-col items-center justify-center">
<button
@click="nextStep()"
class="btn btn-primary btn-small rounded-full w-full sm:w-auto"
:disabled="selected_slots.length < 1"
type="button">
<span v-if="working == false">{{ button_text }}</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>
<button @click="goBack"
class="mt-6 uppercase text-blue-light text-sm"
type="button">Go Back</button>
</div>
</div>
</template>
<script>
export default {
props: {
value: {
required: true
},
selected_slots: {
type: Object,
required: true
},
working: {
type: Boolean,
required: true,
},
button_text: {
type: String,
required: true,
},
nextStep: {
type: Function,
required: true
}
},
data() {
return {
loading: true
}
},
computed: {
therapist() {
return this.$store.state.booking.therapist
},
sessions() {
return this.$store.state.booking.summary.sessions
},
totals() {
return this.$store.state.booking.summary.totals
},
selected_session() {
return this.$store.state.booking.summary.session
}
},
async mounted() {
await this.$store.dispatch('booking/summary/get', {
user_id: this.therapist.user.id,
sessions: this.selected_slots,
sessions_count: Object.keys(this.selected_slots).length
}).then(() => {
this.loading = false;
})
},
methods: {
goBack() {
this.$emit("input", 1);
}
}
}
</script>
Zerion Mini Shell 1.0