tech review updates
This commit is contained in:
Bill Richardson
parent
484c434c63
commit
0d06ce769f
2 changed files with 62 additions and 49 deletions
53
src/layouts/schedule/location-alerts/location-alerts.vue
Normal file
53
src/layouts/schedule/location-alerts/location-alerts.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<alert
|
||||
v-for="alert in prefixedAlertReasons"
|
||||
:key="alert.cmsWidgetName"
|
||||
:ref="alert.cmsWidgetName"
|
||||
class="mt-2 mb-3"
|
||||
:cmsWidgetName="alert.cmsWidgetName"
|
||||
alertClass="alert-warning" />
|
||||
</template>
|
||||
<script>
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
|
||||
|
||||
export default {
|
||||
name: "locationAlerts",
|
||||
data() {
|
||||
return {
|
||||
alertReasons: [],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
cmsWidgetPrefix: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
prefixedAlertReasons() {
|
||||
return this.alertReasons.reduce((newObj, alert) => {
|
||||
newObj.push({
|
||||
cmsWidgetName: `${this.cmsWidgetPrefix}${alert}`,
|
||||
alertReason: alert,
|
||||
});
|
||||
return newObj;
|
||||
}, []);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadInitialData(zipCodeCtu) {
|
||||
return getAlertReasons(zipCodeCtu);
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.alertReasons = initialData;
|
||||
},
|
||||
cmsHeadlineTextFound(widgetName) {
|
||||
return this.getCmsContent(widgetName, "HeadlineText") !== "";
|
||||
},
|
||||
},
|
||||
components: {
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,17 +18,9 @@
|
|||
<span v-else class="m-0 text-body" v-html="copy"></span>
|
||||
</span>
|
||||
</div>
|
||||
<template v-if="displayWeatherAlert">
|
||||
<alert
|
||||
v-for="alert in weatherAlerts"
|
||||
v-show="cmsHeadlineTextFound(alert.cmsWidgetName)"
|
||||
:key="alert.cmsWidgetName"
|
||||
:ref="alert.cmsWidgetName"
|
||||
class="mt-2 mb-3"
|
||||
:cmsWidgetName="alert.cmsWidgetName"
|
||||
alertClass="alert-warning" />
|
||||
</template>
|
||||
|
||||
<location-alerts
|
||||
cmsWidgetPrefix="LocationAlert-"
|
||||
ref="locationAlerts" />
|
||||
<date-picker
|
||||
selectableDatesSetting="custom"
|
||||
ref="datePicker"
|
||||
|
|
@ -62,13 +54,13 @@
|
|||
|
||||
<script>
|
||||
// Components
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import datePicker from "@/digital-components/date-picker/date-picker";
|
||||
import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
|
||||
import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
|
||||
|
||||
// Supporting files
|
||||
|
|
@ -77,7 +69,6 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { getAlertReasons } from "@/layouts/schedule/helpers/schedule-helper";
|
||||
import {
|
||||
doesCopyContainRouterLink,
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
|
|
@ -125,7 +116,6 @@ export default {
|
|||
selectedDate: null,
|
||||
selectedTimeSlotId: null,
|
||||
selectableDatesData: [],
|
||||
weatherAlerts: [],
|
||||
mobileEarlyBirdFee: null,
|
||||
};
|
||||
},
|
||||
|
|
@ -167,7 +157,9 @@ export default {
|
|||
const earlyBirdPromise = baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.GET_MOBILE_EARLY_BIRD_FEE
|
||||
);
|
||||
const alertReasonsPromise = getAlertReasons(store.getters.order.serviceLocation.zipCodeCtu);
|
||||
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
|
||||
store.getters.order.serviceLocation.zipCodeCtu
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
|
|
@ -198,8 +190,8 @@ export default {
|
|||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.setData(resultMap.alertReasons);
|
||||
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
|
||||
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
|
||||
if (resultMap.earlyBird) {
|
||||
vm.mobileEarlyBirdFee = resultMap.pricingResults[0];
|
||||
|
|
@ -214,9 +206,6 @@ export default {
|
|||
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
||||
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
|
||||
},
|
||||
displayWeatherAlert() {
|
||||
return this.weatherAlerts.length > 0;
|
||||
},
|
||||
appointmentType() {
|
||||
return this.$store.getters.order.serviceLocation.appointmentType;
|
||||
},
|
||||
|
|
@ -268,34 +257,6 @@ export default {
|
|||
);
|
||||
return newShopTimeSlots;
|
||||
},
|
||||
setData(alertReasonsData) {
|
||||
if (alertReasonsData) {
|
||||
this.convertReasonsToCmsAlerts(alertReasonsData);
|
||||
}
|
||||
},
|
||||
cmsHeadlineTextFound(widgetName) {
|
||||
return this.getCmsContent(widgetName, "HeadlineText") !== "";
|
||||
},
|
||||
convertReasonsToCmsAlerts(data) {
|
||||
this.weatherAlerts = data.reduce((newObj, alert) => {
|
||||
newObj.push({
|
||||
cmsWidgetName: `LocationAlert-${alert}`,
|
||||
alertReason: alert,
|
||||
});
|
||||
return newObj;
|
||||
}, []);
|
||||
},
|
||||
async getWeatherAlertReasons(ctu) {
|
||||
await getAlertReasons(ctu)
|
||||
.then((response) => {
|
||||
if (response.data) {
|
||||
this.convertReasonsToCmsAlerts(response.data);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("error fetching alert reasons..");
|
||||
});
|
||||
},
|
||||
getServiceZipCtuCodeFromStore() {
|
||||
return store.getters.order.serviceLocation.zipCodeCtu;
|
||||
},
|
||||
|
|
@ -342,15 +303,14 @@ export default {
|
|||
},
|
||||
},
|
||||
components: {
|
||||
alert,
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
funnelSubHeader,
|
||||
Form,
|
||||
loadingModal,
|
||||
datePicker,
|
||||
locationAlerts,
|
||||
timeSlotModalQuestion,
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue