SSR-316 and SSR-289.

Please keep in mind that prices are present but incorrect.
Also note that in cases of very short view height, tall modals appear underneath the header hamburger menu.  This is endemic to all such situations, and not specific to these cards.
This commit is contained in:
David Back 2023-04-26 08:18:12 -04:00
parent 9eea941c68
commit 8a39ff7989
6 changed files with 85 additions and 79 deletions

View file

@ -21,7 +21,7 @@ export default {
url: cfDistroUrl + endpoint,
data: payloadAndAnalyticsData,
crossDomain: true,
responseType: {},
responseType: 'json',
headers: headers,
})
.then((response) => {

View file

@ -24,6 +24,7 @@
};
export default {
name: 'servicePackageQuestion',
emits: ['vapsItemsSelected'],
props: {
cmsWidgetName: String,
groupName: String,
@ -34,16 +35,10 @@
data() {
return {
servicePackageRadio: servicePackageRadio,
selectedPackageName: null
selectedPackageName: packageNames.TIER_ONE
};
},
watch: {
availableLineItems() {
const store = useMainStore();
if (this.allGlassPartsAndSupportingItemsHavePrices(store.order.lineItems)) {
this.selectDefaultPackage();
}
},
selectedPackageName(newValue) {
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@ -51,10 +46,14 @@
},
computed: {
nullSafeAvailableLineItems() {
if (this.availableLineItems?.lineItems) {
return this.availableLineItems.lineItems;
}
return this.availableLineItems ?? [];
},
servicePackageAnswers() {
if (!this.cmsWidgetName) return {};
if (!this.cmsWidgetName) return [];
const cmsAnswersContent = [
{
Name: 'TierOne',
@ -84,6 +83,9 @@
));
return modifiedAnswers;
},
isRecalibrationOnOrder() {
return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
},
frontWipersApplicableForTierTwo() {
const store = useMainStore();
const frontWipersAreAvailable = this.lineItemsContainsPartType(
@ -205,50 +207,6 @@
});
return vapsPrice;
},
selectDefaultPackage() {
const store = useMainStore();
const vapsFromStore = store.lineItems.vaps;
let lowestTierForPackage = packageNames.TIER_ONE;
if (vapsFromStore?.length > 0) {
vapsFromStore.every((vapsItem) => {
let lowestTierForThisItem = this.getLowestTierForThisItem(vapsItem);
if (lowestTierForThisItem === packageNames.TIER_THREE) {
lowestTierForPackage = packageNames.TIER_THREE;
return false;
} else if (lowestTierForThisItem === packageNames.TIER_TWO) {
lowestTierForPackage = packageNames.TIER_TWO;
return true;
} else {
return true;
}
});
}
this.selectedPackageName = lowestTierForPackage;
},
allGlassPartsAndSupportingItemsHavePrices(lineItems) {
if (lineItems?.glassParts) {
for (let i = 0; i < lineItems.glassParts.length; i++) {
if (this.priceIsNullOrZero(lineItems.glassParts[i])) {
return false;
}
}
}
if (lineItems?.supportingItems) {
for (let i = 0; i < lineItems.supportingItems.length; i++) {
if (this.priceIsNullOrZero(lineItems.supportingItems[i])) {
return false;
}
}
}
return true;
},
priceIsNullOrZero(lineItem) {
return (
(lineItem.kitPrice == null || lineItem.kitPrice == 0) &&
(lineItem.laborAmount == null || lineItem.laborAmount == 0) &&
(lineItem.sellingPrice == null || lineItem.sellingPrice == 0)
);
},
getLowestTierForThisItem(vapsItem) {
let lowestTierForThisItem = null;
switch (vapsItem.partType) {
@ -345,7 +303,7 @@
return !!glassLocationMatches.length;
},
getTotalLineItemPrice(lineItem) {
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
}
},
components: {

View file

@ -1,5 +1,5 @@
<template>
<baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
<baseInputButton v-bind="$props" v-model="selectedValue">
<div class="package-label mb-4"
:class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
for="testradio">
@ -26,12 +26,7 @@
<textLink linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
@click-event="
$emit('buttonEvent', {
eventName: 'openModal',
args: getRouterLinkRouteFromCopy(copy),
})
"
@click-event="textLinkEmit(copy)"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
aria-label="Modal window" />
</span>
@ -61,6 +56,7 @@ import {
} from '@/helpers/cms-content-helper';
export default {
name: 'servicePackageRadio',
emits:['link-event'],
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
@ -85,8 +81,13 @@ export default {
.split('- ') //At some point we'll want a better delimiter
.filter((lineItem) => lineItem);
}
},
textLinkEmit(copy) {
this.$parent.$emit('link-event', {
args: getRouterLinkRouteFromCopy(copy)
});
}
},
}
};
</script>

View file

@ -12,7 +12,7 @@
groupName="ServicePackageQuestion"
:availableLineItems="availableLineItems"
@vapsItemsSelected="vapsItemsSelectedAction"
v-on="{ 'buttonEvent.openModal': openModalAction }"
v-on:link-event="openModalAction"
validationRules="option-required"
isRequired />
<textBlock cmsWidgetName="PriceDisclaimerWidget"
@ -35,7 +35,7 @@
<script>
// Components
import baseFormMixin from '@/mixins/base-form-mixin';
import baseFormMixin from '@/mixins/base-form-mixin';
import siteHeader from '@/iss-components/site-header/site-header';
import siteFooter from '@/iss-components/site-footer/site-footer';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
@ -52,12 +52,12 @@
defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
const store = useMainStore();
export default {
name: 'service-packages',
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
const store = useMainStore();
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
@ -106,18 +106,17 @@
},
data() {
return {
selectedVaps: null,
availableLineItems: null,
supportingItems: null,
pricedGlassParts: null
selectedVaps: [],
availableLineItems: [],
supportingItems: [],
pricedGlassParts: []
};
},
methods: {
openModalAction(modalName) {
this.$refs[modalName].openModal();
this.$refs[modalName.args].openModal();
},
arePagePrerequisitesValid() {
const store = useMainStore();
return (
store.order.serviceLocation.zipCode &&
store.order.serviceLocation.zipCodeCtu &&
@ -134,8 +133,48 @@
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
//TODO: save items
if (!this.allGlassPartsAndItemsHavePrices()) {
console.error('One or more items have no price assigned!');
}
if (this.pricedGlassParts.length > 0) {
store.saveGlassParts(this.pricedGlassParts);
}
store.saveSupportingItems(this.supportingItems);
store.saveVaps(this.selectedVaps);
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
allGlassPartsAndItemsHavePrices() {
if (this.pricedGlassParts) {
for (let i = 0; i < this.pricedGlassParts.length; i++) {
if (this.priceIsNullOrZero(this.pricedGlassParts[i])) {
return false;
}
}
}
if (this.supportingItems) {
for (let i = 0; i < this.supportingItems.length; i++) {
if (this.priceIsNullOrZero(this.supportingItems[i])) {
return false;
}
}
}
if (this.selectedVaps) {
for (let i = 0; i < this.selectedVaps.length; i++) {
if (this.priceIsNullOrZero(this.selectedVaps[i])) {
return false;
}
}
}
return true;
},
priceIsNullOrZero(lineItem) {
return (
(lineItem.kitPrice == null || lineItem.kitPrice == 0) &&
(lineItem.laborAmount == null || lineItem.laborAmount == 0) &&
(lineItem.sellingPrice == null || lineItem.sellingPrice == 0)
);
}
},
components: {

View file

@ -483,11 +483,11 @@ const routingTable = function(store) {
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
destinationIssPageValue: issPageValues.SERVICE_LOCATION
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationIssPageValue: issPageValues.SERVICE_LOCATION
destinationIssPageValue: issPageValues.REVIEW_PAGE
}
]
},

View file

@ -497,8 +497,8 @@ export const useMainStore = defineStore({
///WARNING
///TODO: this is temp test code until serviceLocation is complete.
/// and ctu is available. Also, EON may need to be implemented.
zipCodeToUse = "44902"
ctuToUse = "01820"
zipCodeToUse = "44902";
ctuToUse = "01820";
let queryString =
`ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
`&CTU=${ctuToUse}` +
@ -905,7 +905,15 @@ export const useMainStore = defineStore({
// Save new values
this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray);
},
saveGlassParts(glassParts) {
this.order.lineItems.glassParts = glassParts;
},
saveSupportingItems(supportingItems) {
this.order.lineItems.supportingItems = supportingItems;
},
saveVaps(vaps) {
this.order.lineItems.vaps = vaps;
},
addEventToBus (event) {
this.applicationUser.eventBus.push(event);
},
@ -1178,7 +1186,7 @@ export const useMainStore = defineStore({
resetPartsAndDependencies() {
this.resetGlassPartsState();
this.updateSupportingItems(null);
},
}
},
persist: true
});