Added Support and Analytics for Release
This commit is contained in:
@@ -0,0 +1,228 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user