jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Before merging latest from develop

Browse source
This commit is contained in:
Leah Schumann 2022-02-24 13:17:47 -05:00
parent 025ae14047
commit fe87962a41
6 changed files with 106 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -4,7 +4,9 @@
:ref="inputId"
:id="inputId"
class="form-control">
<option v-for="option in options" :value="option" :key="option.value">{{ option }}</option>
<option v-for="(value, name, index) in options" :value="name" :key="index">
{{ value }}
</option>
</select>
</template>
@ -22,10 +24,8 @@ export default {
required: true
},
},
data(){
return {
value: String,
}
data() {
},
computed: {
selectedOption: {

13
src/common-components/text-question/text-question.vue
View file

@ -1,6 +1,6 @@
<template>
<label :for="inputId">{{ labelText }}</label>
<input type="text"
<input v-model="value" type="text"
:ref="inputId"
:id="inputId"
:placeholder="placeholderText"
@ -19,8 +19,15 @@ export default {
placeholderText: String,
inputId: String,
},
setup(props) {
computed: {
value: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
};
</script>

81
src/layouts/address-lookup/address-lookup.vue
View file

@ -26,56 +26,55 @@ import store from "@/store";
export default {
name: "address-lookup",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
});
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
});
},
data(){
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
}
return {
}
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
// Invokes
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
},
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
// Invokes
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
},
},
components: {
funnelHeader,
funnelFooter,
vehicleBanner,
funnelSubHeader,
customerQuestions,
funnelHeader,
funnelFooter,
vehicleBanner,
funnelSubHeader,
customerQuestions,
},
};
</script>

38
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -2,7 +2,7 @@
<form>
<div class="row my-4">
<div class="col">
<textQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
<textQuestion v-model="address.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
</div>
</div>
</form>
@ -19,12 +19,7 @@
<dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State" />
</div>
<div class="col-6">
<label for="zip">Zip</label>
<input ref="zip"
id="zip"
class="form-control"
type="text"
autocomplete="off" />
<textQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
</div>
</div>
</form>
@ -55,6 +50,9 @@ export default ({
showAddressFields: false,
displayVerificationWarning: false,
displayNoMatchWarning: false,
address: {
streetAddress: "",
},
streetAddress: "",
city: "",
state: "",
@ -168,13 +166,9 @@ export default ({
});
}
else {
let city = document.querySelector("#city");
let state = document.querySelector("#state");
let zip = document.querySelector("#zip");
city.value = "";
state.value = "";
zip.value = "";
self.city = "";
self.state = "";
self.zip = "";
self.displayVerificationWarning = false;
self.displayNoMatchWarning = true;
@ -190,10 +184,7 @@ export default ({
}
if (place && place.address_components) {
let address1 = "";
let city = document.querySelector("#city");
let state = document.querySelector("#state");
let zip = document.querySelector("#zip");
self.streetAddress= "";
self.showAddressFields = true;
for (const component of place.address_components) {
@ -201,15 +192,15 @@ export default ({
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
self.streetAddress = component.long_name;
break;
}
case "route": {
address1 += component.short_name;
self.streetAddress += ' ' + component.short_name;
break;
}
case "locality": {
city.value = component.long_name;
self.city = component.long_name;
break;
}
case "administrative_area_level_1": {
@ -217,14 +208,13 @@ export default ({
break;
}
case "postal_code": {
zip.value = component.long_name;
self.zip = component.long_name;
break;
}
}
}
addressField1.value = address1;
self.displayVerificationWarning = false;
self.displayNoMatchWarning = false;
}

37
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -1,23 +1,13 @@
<template>
<addressQuestions />
<addressQuestions v-model="address" />
<div class="row my-4">
<div class="col">
<label for="firstName">First name</label>
<input ref="firstName"
id="firstName"
class="form-control"
type="text"
autocomplete="off" />
<textQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
</div>
</div>
<div class="row my-4">
<div class="col">
<label for="lastName">Last name</label>
<input ref="lastName"
id="lastName"
class="form-control"
type="text"
autocomplete="off" />
<textQuestion v-model="lastName" ref="lastName" inputId="lastName" labelText="Last name" />
</div>
</div>
<emailQuestion />
@ -27,6 +17,7 @@
<script>
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import emailQuestion from "@/layouts/address-lookup/customer-questions/email-question/email-question";
import textQuestion from "@/common-components/text-question/text-question";
//import store from "@/store";
@ -34,24 +25,32 @@ export default ({
name: "customer-questions",
data(){
return {
address: {
streetAddress: "",
},
firstName: "",
lastName: "",
}
},
props: {
modelValue: Array,
groupName: String,
},
methods: {
initializeComponent(cmsContent, damageOptions){
}
},
computed: {
value: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
components: {
addressQuestions,
emailQuestion,
textQuestion,
}
})
</script>

26
src/layouts/address-lookup/customer-questions/email-question/email-question.vue
View file

@ -1,12 +1,24 @@
<template>
<div class="row my-4">
<div class="col">
<label for="email">Email address</label>
<input ref="email"
id="email"
class="form-control"
type="text"
autocomplete="off" />
<textQuestion v-model="email" ref="email" inputId="email" labelText="Email address" />
</div>
</div>
</template>
</template>
<script>
import textQuestion from "@/common-components/text-question/text-question";
import store from "@/store";
export default ({
name: "emailQuestion",
data(){
return {
email: "",
}
},
components: {
textQuestion,
},
})
</script>