229 lines
6.0 KiB
Vue
229 lines
6.0 KiB
Vue
<script setup lang="ts">
|
|
import {Head, Link, useForm, usePage} from '@inertiajs/vue3'
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
|
|
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
|
|
import {SharedProps} from "@/Types/types";
|
|
import {computed} from "vue";
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
const page = usePage<SharedProps>().props;
|
|
|
|
const REASONS = [
|
|
{ value: 'general_feedback', label: 'General Feedback' },
|
|
{ value: 'bug_report', label: 'Bug Report' },
|
|
{ value: 'missing_data', label: 'Missing Data' },
|
|
]
|
|
|
|
const form = useForm({
|
|
reason: null as string | null,
|
|
name: page.auth.user?.name ?? '',
|
|
email: page.auth.user?.email ?? '',
|
|
message: '',
|
|
})
|
|
|
|
const rules = {
|
|
required: (v: string) => !!v || 'Required',
|
|
email: (v: string) => /.+@.+\..+/.test(v) || 'Enter a valid email',
|
|
}
|
|
|
|
const submitted = computed(() => !!page.flash.success)
|
|
|
|
const submit = () => {
|
|
form.post(route('support.store'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => form.reset(),
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Panel>
|
|
<Head title="Support" />
|
|
<PanelHeader centered>Technical Support</PanelHeader>
|
|
|
|
<template v-if="!submitted">
|
|
<PanelSubHeader centered>
|
|
Please fill out this form or email <Link href="mailto:hello@flightsgoneby.com">hello@flightsgoneby.com</Link> for any feedback or technical support needed.
|
|
</PanelSubHeader>
|
|
<PanelSubHeader centered>
|
|
For missing airlines or airports, please include a link to Wikipedia page or airlines website if available.
|
|
</PanelSubHeader>
|
|
|
|
<v-form class="contact-form" @submit.prevent="submit">
|
|
|
|
<v-text-field
|
|
v-model="form.name"
|
|
label="Name"
|
|
:error-messages="form.errors.name"
|
|
variant="outlined"
|
|
class="contact-field"
|
|
/>
|
|
|
|
<v-text-field
|
|
v-model="form.email"
|
|
label="Email"
|
|
type="email"
|
|
readonly
|
|
:error-messages="form.errors.email"
|
|
variant="outlined"
|
|
class="contact-field"
|
|
/>
|
|
|
|
<v-select
|
|
v-model="form.reason"
|
|
:items="REASONS"
|
|
item-title="label"
|
|
item-value="value"
|
|
label="Contact Reason"
|
|
:rules="[rules.required]"
|
|
:error-messages="form.errors.reason"
|
|
variant="outlined"
|
|
class="contact-field"
|
|
/>
|
|
|
|
<v-textarea
|
|
v-model="form.message"
|
|
label="Message"
|
|
:rules="[rules.required]"
|
|
:error-messages="form.errors.message"
|
|
variant="outlined"
|
|
rows="5"
|
|
auto-grow
|
|
class="contact-field"
|
|
/>
|
|
|
|
<div class="contact-form-actions">
|
|
<v-btn
|
|
type="submit"
|
|
:loading="form.processing"
|
|
class="contact-form-submit"
|
|
elevation="0"
|
|
>
|
|
Send Message
|
|
</v-btn>
|
|
</div>
|
|
</v-form>
|
|
</template>
|
|
|
|
<div v-else class="contact-form-sent">
|
|
<i class="mdi mdi-check-circle-outline contact-form-sent-icon" aria-hidden="true" />
|
|
<p class="contact-form-sent-title">Message Sent</p>
|
|
<p class="contact-form-sent-body">
|
|
{{ page.flash.success }} We'll get back to you as soon as we can.
|
|
</p>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.contact-form {
|
|
color: #c8cdd8;
|
|
}
|
|
|
|
.contact-form-header {
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.contact-form-eyebrow {
|
|
display: block;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.22em;
|
|
color: #ffc107;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.contact-form-title {
|
|
font-family: 'Barlow', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.5rem;
|
|
color: #e6e9f0;
|
|
margin: 0;
|
|
}
|
|
|
|
.contact-field {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
:deep(.contact-field .v-field) {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:deep(.contact-field .v-field__outline) {
|
|
color: rgba(255, 255, 255, 0.12) !important;
|
|
}
|
|
|
|
:deep(.contact-field.v-input--focused .v-field__outline) {
|
|
color: #ffc107 !important;
|
|
}
|
|
|
|
:deep(.contact-field .v-label) {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.08em;
|
|
color: #778 !important;
|
|
}
|
|
|
|
:deep(.contact-field .v-field__input) {
|
|
color: #c8cdd8 !important;
|
|
font-family: 'Barlow', sans-serif;
|
|
}
|
|
|
|
.contact-form-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.contact-form-submit {
|
|
background: #ffc107 !important;
|
|
color: #14161c !important;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
border-radius: 4px;
|
|
padding: 0 1.5rem !important;
|
|
}
|
|
|
|
.contact-form-submit:hover {
|
|
background: #ffcd38 !important;
|
|
}
|
|
|
|
.contact-form-sent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
color: #c8cdd8;
|
|
}
|
|
|
|
.contact-form-sent-icon {
|
|
font-size: 2.5rem;
|
|
color: #6fbf73;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.contact-form-sent-title {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: #e6e9f0;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.contact-form-sent-body {
|
|
max-width: 360px;
|
|
font-size: 0.9rem;
|
|
color: #9099ab;
|
|
margin: 0;
|
|
}
|
|
</style>
|