-
Luke Glasscock authoredLuke Glasscock authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
ContactUs.vue 10.60 KiB
<template>
<div class="contact-us mb-5">
<PageHeader title="Contact Us" />
<v-container class="px-8">
<v-form v-model="valid" ref="form">
<v-row class="px-sm-5 mx-sm-5">
<v-col cols="12" md="6">
<v-text-field
v-model="firstName"
label="First Name"
color="accent"
></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-model="lastName"
label="Last Name"
color="accent"
></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-select
v-model="sector"
:items="sectors"
label="Sector"
color="accent"
></v-select>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-model="organization"
label="Organization"
name="company"
color="accent"
></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-model="email"
label="Email*"
:rules="emailRules"
persistent-hint
hint="* required"
name="email"
color="accent"
required
prepend-icon="mdi-email"
></v-text-field>
</v-col>
<v-col cols="12" md="6">
<v-text-field
v-mask="'(###) ###-#### ext ########'"
v-model="phone"
label="Phone"
name="phone"
color="accent"
prepend-icon="mdi-phone"
></v-text-field>
</v-col>
<v-col cols="12">
<v-select
v-model="helpTopic"
:items="helpTopics"
label="How can we help?"
color="accent"
@change="showHelpDetails = helpTopics[helpTopic].showDetails"
></v-select>
</v-col>
<v-col cols="12" v-if="showHelpDetails">
<v-textarea
v-model="helpDetails"
label="Please provide additional details about the help you need"
color="accent"
counter="2000"
:rules="textareaRules"
rows="1"
auto-grow
></v-textarea>
</v-col>
<v-col cols="12">
<v-select
v-model="hearTopic"
:items="hearTopics"
label="How did you hear about Platform One?"
color="accent"
@change="showHearDetails = hearTopics[hearTopic].showDetails"
></v-select>
</v-col>
<v-col cols="12" v-if="showHearDetails">
<v-textarea
v-model="hearDetails"
:label="
`Please provide additional details about ${showHearDetails}`
"
color="accent"
counter="2000"
:rules="textareaRules"
rows="1"
auto-grow
></v-textarea>
</v-col>
</v-row>
<v-btn
class="my-5"
color="primary"
@click="submit"
:disabled="!valid"
:loading="isBusy"
>
Send Info
<v-icon class="ml-4">mdi-send</v-icon>
</v-btn>
<v-dialog v-model="successDialog" max-width="700">
<v-card>
<v-card-title class="d-flex flex-column my-5">
<v-img
src="@/assets/images/logos/Logo_P1_Yodahead-WH.png"
class="mb-5"
max-width="100"
/>
<h3>Thanks for reaching out</h3>
</v-card-title>
<p class="px-2">
We've recorded your input and will be in touch soon.
</p>
<v-card-actions>
<v-btn
color="primary"
class="mx-auto my-2"
@click="successDialog = false"
>OK</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="errorDialog" max-width="700">
<v-card>
<v-card-title class="d-flex flex-column my-5">
<v-img
src="@/assets/images/logos/Logo_P1_Yodahead-WH.png"
class="mb-5 h-flip"
max-width="100"
/>
<h3>Uh-oh, something went wrong...</h3>
</v-card-title>
<p class="px-2">
We're sorry, we were not able to successfully get your input.
Please try again.
</p>
<v-card-actions>
<v-btn
color="primary"
class="mx-auto my-2"
@click="errorDialog = false"
>OK</v-btn
>
</v-card-actions>
</v-card>
</v-dialog>
</v-form>
<a
href="https://jira.il2.dso.mil/servicedesk/customer/portals"
target="_blank"
rel="noopener noreferrer"
>
If you have a tech issue, please visit the Platform One Support Hub.
</a>
</v-container>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
import { mask } from "vue-the-mask";
export default {
name: "ContactUs",
components: { PageHeader },
methods: {
async doPost() {
// this is the `action` attribute of your Google Forms form
const formUrl =
"https://docs.google.com/forms/d/e/1FAIpQLSdC60d7i2Bzlm6ikkG7j3QIYOCwu9yraerrEvUry7aZUhou3Q/formResponse";
const helpTopicText = this.helpTopic
? this.helpTopics[this.helpTopic].text
: "";
const hearTopicText = this.hearTopic
? this.hearTopics[this.hearTopic].text
: "";
// assemble the POST body
const bodyParts = {
"entry.1237666172": `${this.firstName} ${this.lastName}`.trim(),
"entry.1778121980": helpTopicText,
"entry.1354107096": this.helpDetails || "",
"entry.1536411696": hearTopicText,
"entry.1002159071": this.hearDetails || "",
"entry.1003081443": this.phone || "",
"entry.1603166847": this.organization || "",
"entry.1644077708": this.sector || "",
emailAddress: this.email,
};
// google expects each form attr to be encoded
const body = Object.entries(bodyParts)
.map(([key, val]) => {
return `${key}=${encodeURIComponent(val)}`;
})
.join("&");
return await fetch(formUrl, {
method: "POST",
mode: "no-cors",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body,
});
},
async submit() {
this.isBusy = true;
this.$refs.form.validate();
if (!this.valid) {
this.isBusy = false;
return;
}
try {
const minWait = 3000;
const start = new Date().getTime();
// send data to google
const response = await this.doPost();
const duration = new Date().getTime() - start;
// add a fake wait
if (duration < minWait) {
// add wait
await new Promise((resolve) => {
console.log("add wait", minWait - duration);
let wait = setTimeout(() => {
clearTimeout(wait);
resolve();
}, minWait - duration);
});
}
console.log("response:", response);
// reset form
this.$refs.form.reset();
// show success dialog
this.successDialog = true;
} catch (e) {
console.error(e);
// show error dialog
this.errorDialog = true;
} finally {
this.isBusy = false;
}
},
},
directives: { mask },
data: () => ({
successDialog: false,
errorDialog: false,
isBusy: false,
valid: false,
firstName: "",
lastName: "",
sector: "",
organization: "",
email: "",
phone: "",
helpTopic: "",
helpDetails: "",
hearTopic: "",
hearDetails: "",
sectors: ["Industry", "Academia", "Government", "Military", "Other"],
helpTopics: [
{
value: 0,
text:
"I'm interested in learning more about job opportunities within Platform One",
},
{ value: 1, text: "I'm a prospective customer within the government" },
{
value: 2,
text:
"I'm a vendor and would like to learn more about how we can support you",
},
{
value: 3,
text:
"I'm interested in an internship, residency, or a detail to Platform One",
},
{ value: 4, text: "Other", showDetails: true },
],
hearTopics: [
{
value: 0,
text: "A government organization",
showDetails: "the Government organization",
},
{
value: 1,
text: "An industry organization",
showDetails: "the industry organization",
},
{
value: 2,
text: "A current employee of Platform One",
},
{
value: 3,
text: "A software factory within DoD",
showDetails: "the software factory",
},
{
value: 4,
text: "My management/leadership",
},
{
value: 5,
text: "Google",
},
{
value: 6,
text: "LinkedIn",
},
{
value: 7,
text: "Medium",
},
{
value: 8,
text: "Other",
showDetails: "how you heard about Platform One",
},
],
showHelpDetails: false,
showHearDetails: false,
emailRules: [
(v) => !!v || "Email is required",
(v) => /.+@.+/.test(v) || "Email must be valid",
],
textareaRules: [
(v) => {
// allow empty
if (!v) {
return true;
}
return v.length <= 2000 || "Maximum response size is 2000 characters";
},
],
}),
};
</script>
<style lang="scss">
.contact-us {
.v-dialog {
.v-card {
margin-top: -18px;
}
}
/* fix chrome issue with autofill bg */
input {
background-color: transparent;
-webkit-transition-property: background-color !important;
transition-property: background-color !important;
}
textarea.materialize-textarea.validate {
width: calc(100% - 12px);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
transition-delay: 99999s;
-webkit-text-fill-color: var(--text-color);
}
/* end chrome fix */
.mm-logo {
width: 250px;
}
}
</style>