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"
:validationRules="validationRules"
:textPosition="textPosition"
:additionalData="additionalData"
:additionalButtonStyling="additionalButtonStyling"
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
v-model="selectedValues" />
@ -117,7 +117,7 @@ export default {
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
additionalData: null
additionalButtonStyling: String,
},
beforeMount() {
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"
buttonTypeString="listButtonHorizontal"
v-model="selectedValues"
:additionalData="{isCashOrInsurance: true}"
additionalButtonStyling="listButtonHorizontalStrong"
isRequired
/>
</div>

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

@ -24,13 +24,12 @@
groupName="CashOrInsuranceQuestion"
/>
<servicePackageQuestion
v-if="lineItems"
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
v-model="selectedPackage"
groupName="ServicePackageQuestion"
:lineItems="lineItems"
:availableLineItems="availableLineItems"
:isInsuranceSelected="isInsuranceSelected"
/>
<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 textBlock from "@/common-components/text-block/text-block";
import modal from "@/common-components/modal/modal";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -88,9 +86,9 @@ export default {
// 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
@ -102,8 +100,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(cmsContent);
vm.selectedPackage = vm.getDefaultSelectedPackageValue();
vm.lineItems = [
vm.availableLineItems = [
{
partNumber : "001",
Description : "Windshield with Recal",
@ -117,13 +114,18 @@ export default {
{
"partNumber": "SBB16",
"description": "SAFELITE BEAM BLADE 16",
"partType": "PASSENGER FRONT WIPER",
"partType": "FRONT WIPER",
"price": 32.64,
},
{
"partNumber": "A DISPOSAL FEE",
"partType" : "DISPOSAL FEE",
"price" : 15.00,
},
{
"partNumber": "SBB26",
"description": "SAFELITE BEAM BLADE 26",
"partType": "DRIVER FRONT WIPER",
"partType": "FRONT WIPER",
"price": 53.04,
},
{
@ -154,7 +156,7 @@ export default {
pricingRequestResult: null,
isInsuranceSelected: null,
selectedPackage: null,
lineItems: null,
availableLineItems: null,
}
},
methods: {
@ -167,23 +169,9 @@ export default {
if(defaultIsInsuranceSelectedValue != null) {
return defaultIsInsuranceSelectedValue;
} 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: {
funnelHeader,

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

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

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

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

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

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