%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader :classObject="'pb-48 md:pb-20 tas-bg-'+therapist.colour">
<div class="relative z-20 text-center">
<figure class="relative inline-block w-40 mb-8">
<div :class="'tas-border-'+therapist.colour"
class="absolute top-0 left-0 w-full h-full border-10"></div>
<img class="block w-full"
:src="therapist.user.photo_url"
:alt="therapist.user.first_name" />
</figure>
<h1>
<span class="block w-full text-5xl md:text-7xl leading-none ">{{ therapist.user.first_name }}</span>
<span class="block w-full uppercase text-2xl">{{ therapist.user.last_name }}</span>
</h1>
</div>
<div class="page-header-bottom grid grid-cols-1 md:grid-cols-3">
<div class="flex items-center justify-center md:justify-start mb-6 md:mb-0">
<NuxtLink
class="uppercase font-medium flex items-center justify-center"
to="/therapists">
<svg class="w-4 h-4 mr-1" 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="M15 19l-7-7 7-7" />
</svg>
Back
</NuxtLink>
</div>
<div v-if="therapist.is_booking_enabled"
class="flex items-center justify-center">
<NuxtLink
:to="'/booking/'+therapist.slug"
class="btn btn-primary rounded-full uppercase text-sm font-medium"
type="button">Book {{ therapist.user.first_name }}</NuxtLink>
</div>
<div v-else
class="flex items-center justify-center">
<button
@click="showModal = true"
class="btn btn-primary rounded-full uppercase text-sm font-medium"
type="button">Contact {{ therapist.user.first_name }}</button>
</div>
<div v-if="therapist.is_booking_enabled"
class="flex items-center justify-center md:justify-end">
<NextAvailability
classes="justify-center md:justify-end"
:therapist_id="therapist.id"
:therapist_slug="therapist.slug"
:is_booking_enabled="therapist.is_booking_enabled" />
</div>
</div>
</PageHeader>
<t-modal
v-model="showModal"
:header="'Send '+therapist.user.first_name+' a message'">
<ValidationObserver ref="contactForm">
<form @submit.prevent="onSubmit" role="form" method="POST">
<t-input-group label="Name">
<ValidationProvider rules="required" name="name" v-slot="{ errors }">
<t-input
v-model="form.name"
type="text"
placeholder="Enter your name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Email">
<ValidationProvider rules="required|email" name="email" v-slot="{ errors }">
<t-input
v-model="form.email"
type="email"
placeholder="Enter your email address" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Mobile">
<ValidationProvider rules="required|phone_number" name="phone" v-slot="{ errors }">
<t-input
v-model="form.phone"
type="tel"
placeholder="e.g +44" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group
label="Message">
<ValidationProvider rules="required" name="message" v-slot="{ errors }">
<t-textarea v-model="form.message" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<recaptcha />
<span class="flex items-center justify-center text-sm text-black text-opacity-70 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span>This message will be encrypted and only seen by {{ therapist.user.full_name }}</span>
</span>
<div class="flex items-center justify-center bg-gray p-3 -mx-3 -mb-3 rounded-b-lg">
<button
class="btn btn-primary btn-small"
type="submit">
<span v-if="working == false">Send Message</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>Sending</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</t-modal>
<section class="grid grid-cols-1 lg:grid-cols-3 gap-10 md:mb-8">
<article class="bg-gray p-8 lg:col-span-2">
<h3 class="text-3xl font-bold my-0 mb-6">About {{ therapist.user.first_name }}</h3>
<div class="prose max-w-full"
v-html="therapist.description"></div>
<div v-if="therapist.tags"
class="flex flex-wrap mt-8">
<div
v-for="(tag, key) in therapist.tags"
v-bind:key="key"
class="rounded-full px-3 py-2 mr-2 mb-2 bg-white text-sm leading-3 transition">{{ tag.name }}</div>
</div>
</article>
<aside class="bg-gray p-8 lg:col-span-1">
<header class="mb-6">
<h3 class="text-3xl font-bold text-center">Overview</h3>
</header>
<div v-if="therapist.products.length > 0"
class="border-t border-black border-opacity-10 py-3 grid grid-cols-2 gap-x-3">
<h3 class="text-sm font-medium uppercase">Prices</h3>
<div>
<span class="block font-medium">From {{ therapist.price_from.formatted }}</span>
<a class="block text-blue-light uppercase text-sm" href="#prices">View Prices</a>
</div>
</div>
<div v-if="therapist.location"
class="border-t border-black border-opacity-10 py-3 grid grid-cols-2 gap-x-3">
<h3 class="text-sm font-medium uppercase">Location</h3>
<div>
<span v-if="therapist.location.address_type == 'Practice Location'"
class="block font-medium">{{ therapist.location.formatted }}</span>
<span v-else
class="block font-medium">{{ therapist.location.town_city }}</span>
</div>
</div>
<div v-if="therapist.languages.length > 0"
class="border-t border-black border-opacity-10 py-3 grid grid-cols-2 gap-x-3">
<h3 class="text-sm font-medium uppercase">Languages</h3>
<div>
<span v-for="(language, key) in therapist.languages"
v-bind:key="key"
class="block font-medium">{{ language.name }}</span>
</div>
</div>
<div v-if="therapist.main_specialism"
class="border-t border-black border-opacity-10 py-3 grid grid-cols-2 gap-x-3">
<h3 class="text-sm font-medium uppercase">Main Specialism</h3>
<div>
<span class="block font-medium">{{ therapist.main_specialism.name }}</span>
<a class="block text-blue-light uppercase text-sm" href="#specialisms">View All</a>
</div>
</div>
<div v-if="therapist.sessions"
class="border-t border-black border-opacity-10 py-3 grid grid-cols-2 gap-x-3">
<h3 class="text-sm font-medium uppercase">Sessions</h3>
<div>
<span v-for="(session, key) in therapist.sessions"
v-bind:key="key"
class="block font-medium">{{ session.name }}</span>
<a v-if="therapist.products.length > 0"
class="block text-blue-light uppercase text-sm" href="#prices">Book a Session</a>
</div>
</div>
<div class="border-t border-black border-opacity-10 pt-6 flex flex-wrap items-center justify-center">
<button
@click="showModal = true"
class="btn btn-primary rounded-full uppercase text-sm font-medium"
type="button">Contact {{ therapist.user.first_name }}</button>
</div>
</aside>
</section>
<section v-if="therapist.specialisms.length > 0"
class="pt-8 pb-10 md:pt-12 md:pb-20 px-6 lg:px-0"
id="specialisms">
<header class="max-w-2xl mx-auto w-full">
<h3 class="text-3xl font-bold text-center mb-10">Specialisms</h3>
</header>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-4 sm:mt-16">
<NuxtLink class="bg-gray border-l-8 border-yellow p-3 sm:p-4 transition hover:bg-yellow"
v-for="(specialism, key) in therapist.specialisms"
v-bind:key="key"
:to="'/therapists/specialism/'+specialism.slug">
{{ specialism.name }}
</NuxtLink>
</div>
</section>
<section v-if="therapist.products.length > 0 && therapist.sessions.length > 0"
id="prices" class="bg-black py-10 md:py-20 px-6 md:px-8 mb-8">
<header class="max-w-2xl mx-auto w-full text-white">
<h3 class="text-3xl font-bold text-center mb-10">{{ therapist.user.first_name }}'s Rates</h3>
<article v-html="therapist.pricing_text" />
</header>
<div v-if="therapist.products" class="max-w-5xl mx-auto w-full mt-16">
<div class="flex flex-wrap items-center justify-center -mx-2">
<div v-for="(session, key) in therapist.sessions"
v-bind:key="key"
class="px-2 mb-4 w-full md:w-1/2 lg:w-1/4">
<TherapistPrice
:slug="therapist.slug"
:session="session"
:products="therapist.products"
:is_booking_enabled="therapist.is_booking_enabled" />
</div>
</div>
</div>
</section>
<section v-if="therapist.image_one.url"
:style="'background-image: url('+therapist.image_one.url+')'"
class="md:-mx-8 relative md:h-screen bg-cover bg-center bg-gray">
<img
class="block md:hidden"
:src="therapist.image_one.url" />
</section>
<section v-if="therapist.questions_one.length > 0"
class="py-20 px-6 lg:px-0">
<div class="max-w-3xl mx-auto w-full">
<header class="text-center mb-20">
<figure class="relative inline-block w-32 mb-8">
<div :class="'tas-border-'+therapist.colour"
class="absolute top-0 left-0 w-full h-full border-15"></div>
<img class="block w-full"
:src="therapist.user.photo_url"
:alt="therapist.user.first_name" />
</figure>
<h2 class="text-3xl font-bold">Get to Know {{ therapist.user.first_name }}</h2>
</header>
<article v-for="(question, key) in therapist.questions_one"
v-bind:key="key"
class="mb-10">
<h2 class="mb-6 text-xl font-bold">{{ question.question }}</h2>
<p>{{ question.answer }}</p>
</article>
</div>
</section>
<div v-if="therapist.is_booking_enabled"
class="pt-8 md:pt-20 md:pb-16 px-4 md:px-6 bg-white flex flex-col items-center justify-center">
<h2 class="text-xl sm:text-2xl font-bold mb-6">Book a session with {{ therapist.user.first_name }}</h2>
<NuxtLink
:to="'/booking/'+therapist.slug"
class="btn btn-primary rounded-full uppercase text-sm font-medium"
type="button">Book {{ therapist.user.first_name }}</NuxtLink>
</div>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: this.full_name+' | %s',
meta: [
{
hid: 'description',
name: 'description',
content: this.therapist.short_description
}
],
}
},
data() {
return {
working: false,
showModal: false,
form: {
name: null,
email: null,
phone: null,
message: null
}
}
},
computed: {
therapist() {
return this.$store.state.therapists.single
},
full_name() {
return this.therapist.user.full_name;
}
},
async mounted() {
try {
await this.$recaptcha.init()
} catch (e) {
console.error(e);
}
},
async asyncData ({ store, params }) {
await store.dispatch('therapists/single', params.slug)
},
methods: {
async onSubmit() {
try {
const token = await this.$recaptcha.execute('login')
this.sendMessage(token);
} catch (error) {
console.log('Login error:', error)
}
},
async sendMessage(token) {
await this.$refs.contactForm.validate().then(success => {
if (!success) {
return;
}
let formData = new FormData();
formData.append('recaptcha_token', token);
formData.append('name', this.form.name);
formData.append('email', this.form.email);
formData.append('phone', this.form.phone);
formData.append('message', this.form.message);
this.working = true;
this.$axios.post('/user/'+this.therapist.user.id+'/messages', formData)
.then((response) => {
this.$toast.success('Your message has been sent, '+this.therapist.user.first_name+' will be in touch soon!').goAway(3000);
this.working = false;
this.showModal = false;
}).catch((error) => {
this.working = false;
this.$refs.contactForm.setErrors(error.response.data.errors);
})
});
}
},
beforeDestroy() {
this.$recaptcha.destroy()
}
}
</script>
<style>
</style>
Zerion Mini Shell 1.0