Merge pull request #464 from Safelite/feature/richardson/SSR-674
Location Alerts on schedule page
This commit is contained in:
brich1212safe
GitHub
commit
eeed5c6b29
7 changed files with 123 additions and 3 deletions
|
|
@ -11,6 +11,10 @@ const endpoints = Object.freeze({
|
|||
url: (applicationAbbreviation, pageName) => `/content/api/v1/content/${applicationAbbreviation}/${pageName}`,
|
||||
method: 'GET'
|
||||
},
|
||||
GetAlertReasons: {
|
||||
url: '/location/api/v1/location/alert-reasons',
|
||||
method: 'GET'
|
||||
},
|
||||
GetVehicleYears: {
|
||||
url: '/vehicle/api/v1/vehicle/years',
|
||||
method: 'GET'
|
||||
|
|
|
|||
30
src/layouts/schedule-page/helpers/schedule-helper.js
Normal file
30
src/layouts/schedule-page/helpers/schedule-helper.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { useMainStore } from '@/store';
|
||||
|
||||
const getAlertReasons = async (ctu) => {
|
||||
const store = useMainStore();
|
||||
const alertReasons = await store.getAlertReasonsByCtu(ctu);
|
||||
|
||||
return Promise.resolve(alertReasons);
|
||||
};
|
||||
|
||||
// This function will go away after testing.
|
||||
// The Service already went through testing and had these removed from it.
|
||||
export async function mockGetAlertReasons(ctu) {
|
||||
let retList = [];
|
||||
if (ctu === '01853') { // Ocala, FL 34470
|
||||
retList = [
|
||||
'Hurricane', 'ExtremeTemperature'
|
||||
];
|
||||
} else if (ctu === '01814') { // Phoenix, AZ 85026
|
||||
retList = [
|
||||
'ExtremeTemperature'
|
||||
];
|
||||
} else if (ctu === '01845') { // Raleigh, NC 27601
|
||||
retList = [
|
||||
'Hurricane'
|
||||
];
|
||||
}
|
||||
return Promise.resolve(retList);
|
||||
}
|
||||
|
||||
export default getAlertReasons;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<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.vue';
|
||||
import { mockGetAlertReasons } from '@/layouts/schedule-page/helpers/schedule-helper';
|
||||
|
||||
export default {
|
||||
name: 'location-alerts',
|
||||
components: {
|
||||
alert
|
||||
},
|
||||
props: {
|
||||
cmsWidgetPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
alertReasons: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
prefixedAlertReasons() {
|
||||
return this.alertReasons.reduce((newObj, alertReason) => {
|
||||
newObj.push({
|
||||
cmsWidgetName: `${this.cmsWidgetPrefix}${alertReason}`,
|
||||
alertReason
|
||||
});
|
||||
return newObj;
|
||||
}, []);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadInitialData(serviceLocationCtu, providerCtu) {
|
||||
let ctuToUse = serviceLocationCtu;
|
||||
if (providerCtu) {
|
||||
ctuToUse = providerCtu;
|
||||
}
|
||||
return mockGetAlertReasons(ctuToUse); // Change to getAlertReasons after testing.
|
||||
},
|
||||
initializeComponent(initialData) {
|
||||
this.alertReasons = initialData;
|
||||
},
|
||||
cmsHeadlineTextFound(widgetName) {
|
||||
return this.getCmsContent(widgetName, 'HeadlineText') !== '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,6 +18,9 @@
|
|||
marginTopSizeOverride="1" />
|
||||
</template>
|
||||
<div class="main-content-container">
|
||||
<locationAlerts
|
||||
ref="locationAlerts"
|
||||
cmsWidgetPrefix="LocationAlert-" />
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
class="mt-5"
|
||||
|
|
@ -33,6 +36,7 @@
|
|||
// Components
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
|
||||
|
|
@ -49,6 +53,7 @@ export default {
|
|||
components: {
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
locationAlerts,
|
||||
siteFooter,
|
||||
textBlock,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
|
|
@ -59,17 +64,28 @@ export default {
|
|||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const alertReasonsPromise = locationAlerts.methods.loadInitialData(
|
||||
useMainStore().order.serviceLocation.zipCodeCtu,
|
||||
useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
|
||||
);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: 'cmsContent',
|
||||
promise: cmsContentPromise
|
||||
}];
|
||||
},
|
||||
{
|
||||
resultKey: 'alertReasons',
|
||||
promise: alertReasonsPromise
|
||||
}
|
||||
];
|
||||
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
:text="showMoreShopsLinkText"
|
||||
href="#!"
|
||||
:aria-label="showMoreShopsLinkText"
|
||||
@click-event="getNextShopsFromList" />
|
||||
@clickEvent="getNextShopsFromList" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
|
@ -254,6 +254,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/styles/ux-variables-svg-strings.scss";
|
||||
|
||||
.shop-question {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
|
|
@ -265,7 +267,7 @@ export default {
|
|||
}
|
||||
|
||||
.drop-off-alert {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background: url($svg-drop-off-alert);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.75rem;
|
||||
background-position: 0.5rem 0.75rem;
|
||||
|
|
|
|||
|
|
@ -1393,6 +1393,16 @@ export const useMainStore = defineStore({
|
|||
}
|
||||
},
|
||||
|
||||
// Location API Actions
|
||||
getAlertReasonsByCtu(ctu) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.GetAlertReasons.method,
|
||||
endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
|
||||
payload: {},
|
||||
logApiCall: true
|
||||
});
|
||||
},
|
||||
|
||||
// Analytics Actions
|
||||
logExperimentExposure({ userId, sessionKey, pageName, experiment }) {
|
||||
return globalMethods.callHttpClient({
|
||||
|
|
|
|||
1
src/styles/ux-variables-svg-strings.scss
Normal file
1
src/styles/ux-variables-svg-strings.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
$svg-drop-off-alert: "data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A";
|
||||
Loading…
Reference in a new issue