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

CSR-731 | Rech review refactor

Browse source
This commit is contained in:
Scott Kiener 2022-11-02 15:38:26 -04:00
parent 5ad36507e0
commit bed5011dbc
8 changed files with 102 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,7 +48,7 @@
:isWide="isWide" :isWide="isWide"
:validationRules="validationRules" :validationRules="validationRules"
:textPosition="textPosition" :textPosition="textPosition"
:additionalData="additionalData" :additionalButtonStyling="additionalButtonStyling"
:lastValuePushedToGa="lastValuePushedToGa" :lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa"
v-model="selectedValues" /> v-model="selectedValues" />
@ -117,7 +117,7 @@ export default {
suppressError: Boolean, suppressError: Boolean,
useTextForValue: Boolean, useTextForValue: Boolean,
valueToLogType: String, valueToLogType: String,
additionalData: null additionalButtonStyling: String,
}, },
beforeMount() { beforeMount() {
if (this.buttonTypeObject) { if (this.buttonTypeObject) {

8
src/constants/part-type-strings.js Normal file
View file

@ -0,0 +1,8 @@
const partTypeStrings = {
FRONT_WIPER : "FRONT WIPER",
REAR_WIPER : "REAR WIPER",
RAIN_DEFENSE: "RAIN DEFENSE",
RECALIBRATION : "RECALIBRATION",
};
export {partTypeStrings};

2
src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
View file

@ -5,7 +5,7 @@
:groupName="groupName" :groupName="groupName"
buttonTypeString="listButtonHorizontal" buttonTypeString="listButtonHorizontal"
v-model="selectedValues" v-model="selectedValues"
:additionalData="{isCashOrInsurance: true}" additionalButtonStyling="listButtonHorizontalStrong"
isRequired isRequired
/> />
</div> </div>

38
src/layouts/quote/quote.vue
View file

@ -24,13 +24,12 @@
groupName="CashOrInsuranceQuestion" groupName="CashOrInsuranceQuestion"
/> />
<servicePackageQuestion <servicePackageQuestion
v-if="lineItems"
ref="servicePackage" ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget" cashCmsWidgetName="CashServicePackageQuestionWidget"
insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget" insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
v-model="selectedPackage" v-model="selectedPackage"
groupName="ServicePackageQuestion" groupName="ServicePackageQuestion"
:lineItems="lineItems" :availableLineItems="availableLineItems"
:isInsuranceSelected="isInsuranceSelected" :isInsuranceSelected="isInsuranceSelected"
/> />
<textBlock <textBlock
@ -73,7 +72,6 @@ import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insura
import servicePackageQuestion from "./service-package-question/service-package-question"; import servicePackageQuestion from "./service-package-question/service-package-question";
import textBlock from "@/common-components/text-block/text-block"; import textBlock from "@/common-components/text-block/text-block";
import modal from "@/common-components/modal/modal"; import modal from "@/common-components/modal/modal";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -88,9 +86,9 @@ export default {
// TODOS - modify as needed, just a rough sketch to place initializations // TODOS - modify as needed, just a rough sketch to place initializations
// get supporting lineitems // get supporting availableLineItems
// get wiper and rain defense lineitems // get wiper and rain defense availableLineItems
// Settle promises and get results // Settle promises and get results
@ -102,8 +100,7 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(cmsContent); vm.setCmsContent(cmsContent);
vm.selectedPackage = vm.getDefaultSelectedPackageValue(); vm.availableLineItems = [
vm.lineItems = [
{ {
partNumber : "001", partNumber : "001",
Description : "Windshield with Recal", Description : "Windshield with Recal",
@ -117,13 +114,18 @@ export default {
{ {
"partNumber": "SBB16", "partNumber": "SBB16",
"description": "SAFELITE BEAM BLADE 16", "description": "SAFELITE BEAM BLADE 16",
"partType": "PASSENGER FRONT WIPER", "partType": "FRONT WIPER",
"price": 32.64, "price": 32.64,
}, },
{
"partNumber": "A DISPOSAL FEE",
"partType" : "DISPOSAL FEE",
"price" : 15.00,
},
{ {
"partNumber": "SBB26", "partNumber": "SBB26",
"description": "SAFELITE BEAM BLADE 26", "description": "SAFELITE BEAM BLADE 26",
"partType": "DRIVER FRONT WIPER", "partType": "FRONT WIPER",
"price": 53.04, "price": 53.04,
}, },
{ {
@ -154,7 +156,7 @@ export default {
pricingRequestResult: null, pricingRequestResult: null,
isInsuranceSelected: null, isInsuranceSelected: null,
selectedPackage: null, selectedPackage: null,
lineItems: null, availableLineItems: null,
} }
}, },
methods: { methods: {
@ -167,23 +169,9 @@ export default {
if(defaultIsInsuranceSelectedValue != null) { if(defaultIsInsuranceSelectedValue != null) {
return defaultIsInsuranceSelectedValue; return defaultIsInsuranceSelectedValue;
} else { } else {
return baseMixin.methods.getEconomyPackagePrice(this.lineItems) > 500; return this.availableLineItems ? baseMixin.methods.getTierOnePackagePrice(this.availableLineItems) > 500 : null;
} }
}, },
getDefaultSelectedPackageValue() {
// placeholder - to be populated via CSR-774
return null;
},
},
computed: {
selectedChipCountValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
},
},
}, },
components: { components: {
funnelHeader, funnelHeader,

106
src/layouts/quote/service-package-question/service-package-question.vue
View file

@ -12,9 +12,17 @@
<script> <script>
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import { splitCopyOnCMSPlaceHolder, processIfStatements } from "@/helpers/cms-content-helper"; import { processIfStatements } from "@/helpers/cms-content-helper";
import { damageLocationsSelected as glassLocation } from "@/constants/damage-locations-selected"; import { damageLocationsSelected as glassLocation } from "@/constants/damage-locations-selected";
import servicePackageRadio from "./service-package-radio/service-package-radio" import servicePackageRadio from "./service-package-radio/service-package-radio"
import {partTypeStrings} from "@/constants/part-type-strings";
const packageNames = {
TIER_ONE: "TierOne",
TIER_TWO: "TierTwo",
TIER_THREE: "TierThree"
}
export default ({ export default ({
name: "servicePackageQuestion", name: "servicePackageQuestion",
@ -24,7 +32,7 @@ export default ({
cashCmsWidgetName: String, cashCmsWidgetName: String,
insuranceCmsWidgetName: String, insuranceCmsWidgetName: String,
isInsuranceSelected: Boolean, isInsuranceSelected: Boolean,
lineItems: null, availableLineItems: null,
}, },
data() { data() {
return { return {
@ -40,11 +48,17 @@ export default ({
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
} }
}, },
nullSafeAvailableLineItems() {
return this.availableLineItems ?? [];
},
servicePackageAnswers() { servicePackageAnswers() {
const cmsWidgetName = this.isInsuranceSelected ? this.insuranceCmsWidgetName : this.cashCmsWidgetName; const cmsWidgetName = this.isInsuranceSelected ? this.insuranceCmsWidgetName : this.cashCmsWidgetName;
let cmsAnswersContent = this.getCmsContent(cmsWidgetName, 'Answers'); let cmsAnswersContent = this.getCmsContent(cmsWidgetName, 'Answers');
if (!this.shouldDisplayStandardPackage) { if (!cmsAnswersContent) {
cmsAnswersContent = cmsAnswersContent.filter(answer => answer.Name != "Standard"); return null;
}
if (!this.shouldDisplayTierTwoPackage) {
cmsAnswersContent = cmsAnswersContent.filter(answer => answer.Name != packageNames.TIER_TWO);
} }
const modifiedAnswers = cmsAnswersContent.map(answer => ({ const modifiedAnswers = cmsAnswersContent.map(answer => ({
value: answer.Name, value: answer.Name,
@ -57,10 +71,10 @@ export default ({
return modifiedAnswers; return modifiedAnswers;
}, },
isRecalibrationOnOrder() { isRecalibrationOnOrder() {
return this.lineItemsContainsPartNumber("RECAL"); return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
}, },
frontWipersApplicableForStandard() { frontWipersApplicableForTierTwo() {
const frontWipersAreAvailable = this.lineItemsContainsPartType("FRONT WIPER"); const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
const isRepair = this.$store.getters.order.damage.isRepair; const isRepair = this.$store.getters.order.damage.isRepair;
const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(glassLocation.WINDSHIELD); const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(glassLocation.WINDSHIELD);
if (frontWipersAreAvailable) { if (frontWipersAreAvailable) {
@ -77,23 +91,23 @@ export default ({
return false; return false;
} }
}, },
rearWiperApplicableForStandard() { rearWiperApplicableForTierTwo() {
const rearWiperIsAvailable = this.lineItemsContainsPartType("REAR WIPER"); const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
return this.glassToReplaceContainsGlassLocation(glassLocation.REAR) && rearWiperIsAvailable; return this.glassToReplaceContainsGlassLocation(glassLocation.REAR) && rearWiperIsAvailable;
}, },
frontWipersApplicableForPremium() { frontWipersApplicableForTierThree() {
const frontWipersAreAvailable = this.lineItemsContainsPartType("FRONT WIPER"); const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
return frontWipersAreAvailable; return frontWipersAreAvailable;
}, },
rearWiperApplicableForPremium() { rearWiperApplicableForTierThree() {
const rearWiperIsAvailable = this.lineItemsContainsPartType("REAR WIPER"); const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
return this.glassToReplaceContainsGlassLocation(glassLocation.REAR) && rearWiperIsAvailable; return this.glassToReplaceContainsGlassLocation(glassLocation.REAR) && rearWiperIsAvailable;
}, },
rainDefenseApplicableForPremium() { rainDefenseApplicableForTierThree() {
const frontWipersAreAvailable = this.lineItemsContainsPartType("FRONT WIPER"); const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(glassLocation.WINDSHIELD); const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(glassLocation.WINDSHIELD);
const glassToReplaceContainsRearGlass = this.glassToReplaceContainsGlassLocation(glassLocation.REAR); const glassToReplaceContainsRearGlass = this.glassToReplaceContainsGlassLocation(glassLocation.REAR);
if(this.frontWipersApplicableForStandard) { if(this.frontWipersApplicableForTierTwo) {
return true; return true;
} else if (!frontWipersAreAvailable) { } else if (!frontWipersAreAvailable) {
return true; return true;
@ -103,12 +117,11 @@ export default ({
return false; return false;
} }
}, },
shouldDisplayStandardPackage() { shouldDisplayTierTwoPackage() {
return this.frontWipersApplicableForStandard || this.rearWiperApplicableForStandard; return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo;
} }
}, },
methods: { methods: {
splitCopyOnCMSPlaceHolder,
processIfStatements, processIfStatements,
getHeaderTextFromCms(cmsWidgetName) { getHeaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'HeaderText'); return this.getCmsContent(cmsWidgetName, 'HeaderText');
@ -129,48 +142,59 @@ export default ({
return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat; return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
}, },
getPackagePrice(packageName) { getPackagePrice(packageName) {
let priceFloat = this.isInsuranceSelected ? 0 : baseMixin.methods.getEconomyPackagePrice(this.lineItems); let priceFloat = this.isInsuranceSelected ? 0 : baseMixin.methods.getTierOnePackagePrice(this.nullSafeAvailableLineItems);
if (packageName === "Standard") { if (packageName === packageNames.TIER_TWO) {
priceFloat += this.getStandardPackageVapsPrice(); priceFloat += this.getTierTwoPackageVapsPrice();
} else if (packageName === "Premium") { } else if (packageName === packageNames.TIER_THREE) {
priceFloat += this.getPremiumPackageVapsPrice(); priceFloat += this.getTierThreePackageVapsPrice();
} }
return priceFloat; return priceFloat;
}, },
getStandardPackageVapsPrice() { getTierTwoPackageVapsPrice() {
let vapsPrice = 0; let vapsPrice = 0;
const priceFrontWipers = this.frontWipersApplicableForStandard; const priceFrontWipers = this.frontWipersApplicableForTierTwo;
const priceRearWipers = this.rearWiperApplicableForStandard; const priceRearWipers = this.rearWiperApplicableForTierTwo;
this.lineItems.forEach(item => { this.nullSafeAvailableLineItems.forEach(item => {
if ((priceFrontWipers && item.partType.toUpperCase().includes("FRONT WIPER")) || (priceRearWipers && item.partType.toUpperCase().includes("REAR WIPER"))) { if ((priceFrontWipers && item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER) || (priceRearWipers && item.partType.toUpperCase() === partTypeStrings.REAR_WIPER)) {
vapsPrice += item.price; vapsPrice += item.price;
} }
}); });
return vapsPrice; return vapsPrice;
}, },
getPremiumPackageVapsPrice() { getTierThreePackageVapsPrice() {
let vapsPrice = 0; let vapsPrice = 0;
const priceFrontWipers = this.frontWipersApplicableForPremium; const priceFrontWipers = this.frontWipersApplicableForTierThree;
const priceRearWipers = this.rearWiperApplicableForPremium; const priceRearWipers = this.rearWiperApplicableForTierThree;
const priceRainDefense = this.rainDefenseApplicableForPremium; const priceRainDefense = this.rainDefenseApplicableForTierThree;
this.lineItems.forEach(item => { this.nullSafeAvailableLineItems.forEach(item => {
if ((priceFrontWipers && item.partType.toUpperCase().includes("FRONT WIPER")) || (priceRearWipers && item.partType.toUpperCase().includes("REAR WIPER")) || (priceRainDefense && item.partType.toUpperCase().includes("RAIN DEFENSE"))) { if ((priceFrontWipers && item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER) || (priceRearWipers && item.partType.toUpperCase() === partTypeStrings.REAR_WIPER) || (priceRainDefense && item.partType.toUpperCase() === partTypeStrings.RAIN_DEFENSE)) {
vapsPrice += item.price; vapsPrice += item.price;
} }
}); });
return vapsPrice; return vapsPrice;
}, },
getCustomValueFromString(str) { getCustomValueFromString(str) {
return this[str]; switch (str) {
case 'isRecalibrationOnOrder':
return this.isRecalibrationOnOrder;
case 'frontWipersApplicableForTierTwo':
return this.frontWipersApplicableForTierTwo;
case 'rearWiperApplicableForTierTwo':
return this.rearWiperApplicableForTierTwo;
case 'frontWipersApplicableForTierThree':
return this.frontWipersApplicableForTierThree;
case 'rearWiperApplicableForTierThree':
return this.rearWiperApplicableForTierThree;
case 'rainDefenseApplicableForTierThree':
return this.rainDefenseApplicableForTierThree;
default:
return null;
}
}, },
lineItemsContainsPartType(partType) { lineItemsContainsPartType(partType) {
const partTypeMatches = this.lineItems.filter(lineItem => lineItem.partType.toUpperCase().includes(partType)); const partTypeMatches = this.nullSafeAvailableLineItems.filter(lineItem => lineItem.partType.toUpperCase() === partType);
return !!partTypeMatches.length; return !!partTypeMatches.length;
}, },
lineItemsContainsPartNumber(partNumber) {
const partNumberMatches = this.lineItems.filter(lineItem => lineItem.partNumber.toUpperCase().includes(partNumber));
return !!partNumberMatches.length;
},
glassToReplaceContainsGlassLocation(glassLocation) { glassToReplaceContainsGlassLocation(glassLocation) {
const glassLocationMatches = this.$store.getters.order.damage.glassToReplace.filter(glassToReplace => glassToReplace.location === glassLocation); const glassLocationMatches = this.$store.getters.order.damage.glassToReplace.filter(glassToReplace => glassToReplace.location === glassLocation);
return !!glassLocationMatches.length; return !!glassLocationMatches.length;

5
src/mixins/base-mixin.js
View file

@ -6,6 +6,7 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params"; import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings"; import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings"; import { dynamicStrings } from "@/constants/dynamic-strings";
import { partTypeStrings } from "../constants/part-type-strings";
export default { export default {
data() { data() {
@ -61,11 +62,11 @@ export default {
state: serviceZipValidationResponse.data.state, state: serviceZipValidationResponse.data.state,
}; };
}, },
getEconomyPackagePrice(lineItems) { getTierOnePackagePrice(lineItems) {
let totalPrice = 0; let totalPrice = 0;
lineItems.forEach((lineItem) => { lineItems.forEach((lineItem) => {
const partType = lineItem.partType.toUpperCase(); const partType = lineItem.partType.toUpperCase();
if (!partType.includes("FRONT WIPER") && !partType.includes("REAR WIPER") && !partType.includes("RAIN DEFENSE")) { if (partType != partTypeStrings.FRONT_WIPER && partType != partTypeStrings.REAR_WIPER && partType != partTypeStrings.RAIN_DEFENSE) {
totalPrice += lineItem.price; totalPrice += lineItem.price;
} }
}); });

1
src/mixins/input-button-wrapper-mixin.js
View file

@ -21,6 +21,7 @@ export default {
textPosition: String, textPosition: String,
screenReaderOnlyText: String, screenReaderOnlyText: String,
isWide: Boolean, isWide: Boolean,
additionalButtonStyling: String,
}, },
computed: { computed: {
selectedValue: { selectedValue: {

13
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -3,7 +3,7 @@
v-bind="$props" v-bind="$props"
:buttonWrapperClasses="[ :buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100', 'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': additionalData?.isCashOrInsurance }, { 'strong': isStrongStyling },
]" ]"
v-model="selectedValue"> v-model="selectedValue">
<div <div
@ -31,6 +31,11 @@ import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default { export default {
name: "listButtonHorizontal", name: "listButtonHorizontal",
mixins: [inputButtonWrapperMixin], mixins: [inputButtonWrapperMixin],
computed: {
isStrongStyling() {
return this.additionalButtonStyling === "listButtonHorizontalStrong";
}
},
components: { components: {
baseInputButton, baseInputButton,
}, },
@ -104,7 +109,7 @@ export default {
} }
// Cash/Insurance option radio button styling // Cash/Insurance option radio button styling
&.radio-fancy { &.strong {
.list-button-horizontal-content { .list-button-horizontal-content {
border: 1px solid $blue-700; border: 1px solid $blue-700;
z-index: 2; z-index: 2;
@ -185,7 +190,7 @@ export default {
//Cash/insurance styling //Cash/insurance styling
&:first-of-type { &:first-of-type {
.list-button-horizontal.radio-fancy { .list-button-horizontal.strong {
input[type="radio"] { input[type="radio"] {
&:checked + .list-button-horizontal-content { &:checked + .list-button-horizontal-content {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@ -201,7 +206,7 @@ export default {
} }
&:last-of-type { &:last-of-type {
.list-button-horizontal.radio-fancy { .list-button-horizontal.strong {
input[type="radio"] { input[type="radio"] {
&:checked + .list-button-horizontal-content { &:checked + .list-button-horizontal-content {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;