From bed5011dbc77ac86ccc334ada850ea460eb6ec2c Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Wed, 2 Nov 2022 15:38:26 -0400
Subject: [PATCH] CSR-731 | Rech review refactor

---
 .../button-question/button-question.vue       |   4 +-
 src/constants/part-type-strings.js            |   8 ++
 .../cash-or-insurance-question.vue            |   2 +-
 src/layouts/quote/quote.vue                   |  38 +++----
 .../service-package-question.vue              | 106 +++++++++++-------
 src/mixins/base-mixin.js                      |   5 +-
 src/mixins/input-button-wrapper-mixin.js      |   1 +
 .../list-button-horizontal.vue                |  13 ++-
 8 files changed, 102 insertions(+), 75 deletions(-)
 create mode 100644 src/constants/part-type-strings.js

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 8081814d0..53094e206 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -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) {
diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
new file mode 100644
index 000000000..6a2a490ff
--- /dev/null
+++ b/src/constants/part-type-strings.js
@@ -0,0 +1,8 @@
+const partTypeStrings = {
+    FRONT_WIPER : "FRONT WIPER",
+    REAR_WIPER : "REAR WIPER",
+    RAIN_DEFENSE: "RAIN DEFENSE",
+    RECALIBRATION : "RECALIBRATION",
+  };
+
+  export {partTypeStrings};
\ No newline at end of file
diff --git a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
index 6c906aa99..7f2afa177 100644
--- a/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
+++ b/src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue
@@ -5,7 +5,7 @@
             :groupName="groupName"
             buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
-            :additionalData="{isCashOrInsurance: true}"
+            additionalButtonStyling="listButtonHorizontalStrong"
             isRequired
             />
     </div>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 2110c8044..5bfa88d11 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -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,
diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue
index 298a15856..5311bc2f5 100644
--- a/src/layouts/quote/service-package-question/service-package-question.vue
+++ b/src/layouts/quote/service-package-question/service-package-question.vue
@@ -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;
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index 93488e26f..22f1b49ce 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -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;
         }
       });
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
index 3feaad290..e5c6808df 100644
--- a/src/mixins/input-button-wrapper-mixin.js
+++ b/src/mixins/input-button-wrapper-mixin.js
@@ -21,6 +21,7 @@ export default {
         textPosition: String,
         screenReaderOnlyText: String,
         isWide: Boolean,
+        additionalButtonStyling: String,
     },
     computed: {
         selectedValue: {
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 70e018bfa..0d48039d2 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -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;