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

Now dynamically retrieving the alert headers and text from CMS, also now retrieving Places API key from env variables

Browse source
This commit is contained in:
Leah Schumann 2022-03-03 09:28:11 -05:00
parent 30513e56ae
commit 02e6fdb335
8 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
azure-pipelines.yml
View file

@ -77,4 +77,5 @@ stages:
region: us-east-1
appDeployVariables:
__VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
cfDistributionId: $(cfDistributionId)

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

@ -12,7 +12,9 @@
{{ value }}
</option>
</select>
<p class="mt-1 mb-0">There has been an error!</p>
<p class="mt-2 form-test-error" v-if="!suppressError">
There has been an error!
</p>
</div>
</template>

1
src/constants/application-config.js
View file

@ -1,5 +1,6 @@
const applicationConfig = {
CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
};
export { applicationConfig };

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

@ -53,6 +53,11 @@ export default {
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
vm.$refs.customerQuestions.initializeComponent([
resultMap.cmsContent.AlertVerificationWarningWidget,
resultMap.cmsContent.AlertNoMatchWarningWidget
]
);
});
},
data(){

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

@ -7,7 +7,7 @@
</div>
</form>
<transition name="fade" mode="out-in">
<div class="side-doors" v-if="showAddressFields" aria-live="polite">
<div class="address-fields" v-if="showAddressFields" aria-live="polite">
<form>
<div class="row my-4">
<div class="col">
@ -25,16 +25,16 @@
</form>
</div>
</transition>
<alert v-show="displayVerificationWarning"
<alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
alertClass="alert-warning"
alertHeadline="Please verify your address."
alertCopy="We've selected the closest location match. Please revise as needed."
:alertHeadline="alertHeadlineVerificationWarning"
:alertCopy="alertCopyVerificationWarning"
v-bind:isDismissible="false"
/>
<alert v-show="displayNoMatchWarning"
<alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
alertClass="alert-warning"
alertHeadline="Please verify your address."
alertCopy="We were unable to find a location match. Please re-enter your street address."
:alertHeadline="alertHeadlineNoMatchWarning"
:alertCopy="alertCopyNoMatchWarning"
v-bind:isDismissible="false"
/>
</template>
@ -43,6 +43,7 @@
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import alert from "@/ux-components/alert/alert";
import { applicationConfig } from "@/constants/application-config.js";
//import store from "@/store";
export default ({
@ -108,15 +109,24 @@ export default ({
'WV': 'West Virginia',
'WI': 'Wisconsin',
'WY': 'Wyoming',
}
},
alertHeadlineVerificationWarning: "",
alertCopyVerificationWarning: "",
alertHeadlineNoMatchWarning: "",
alertCopyNoMatchWarning: "",
}
},
props: {
},
methods: {
initializeComponent(cmsContent, damageOptions){
initializeComponent(cmsContent) {
// assign alert texts to this component
this.alertHeadlineVerificationWarning = cmsContent[0].HeadlineText;
this.alertCopyVerificationWarning = cmsContent[0].BodyText;
this.alertHeadlineNoMatchWarning = cmsContent[1].HeadlineText;
this.alertCopyNoMatchWarning = cmsContent[1].BodyText;
}
},
computed: {
@ -127,8 +137,10 @@ export default ({
let addressField1 = document.getElementById("autocomplete");
let self = this;
let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
//let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
// Lets keep these here for the moment for easy reference. Actual value comes from env variable.
//"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
//"AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
.then(() => {
@ -168,7 +180,7 @@ export default ({
self.city = "";
self.state = "";
self.zip = "";
self.showAddressFields = true;
self.displayVerificationWarning = false;
self.displayNoMatchWarning = true;
}

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

@ -1,5 +1,5 @@
<template>
<addressQuestions />
<addressQuestions ref="addressQuestions"/>
<div class="row my-4">
<div class="col">
<textboxQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
@ -33,8 +33,9 @@ export default ({
}
},
methods: {
initializeComponent(cmsContent, damageOptions){
initializeComponent(cmsContent){
// pass alert texts to addressQuestions component
this.$refs.addressQuestions.initializeComponent(cmsContent);
}
},
computed: {

3
vue.config.js
View file

@ -1,6 +1,9 @@
process.env.VUE_APP_CONSUMER_API_GATEWAY =
"https://consumerapidev.safelite.com";
process.env.VUE_APP_GOOGLE_PLACES_API_KEY =
"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"
module.exports = {
outputDir: "dist/fmg",
publicPath: "/fmg",

1
vue.release.config.js
View file

@ -1,4 +1,5 @@
process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
module.exports = {
outputDir: "dist/fmg",