CSR-731 | Change buttonType to buttonTypeString

Removed radio-service-package

src/common-components/button-question/button-question.spec.js

@@ -31,7 +31,7 @@ describe("buttonQuestion.vue", () => {
         // Act
         const wrapper = shallowMount(buttonQuestion, {
             propsData: {
-                buttonType: "listCard",
+                buttonTypeString: "listCard",
                 groupName: "group-name",
             },
         });
@@ -46,7 +46,7 @@ describe("buttonQuestion.vue", () => {
         // Act
         const wrapper = shallowMount(buttonQuestion, {
             propsData: {
-                buttonType: "listButtonHorizontal",
+                buttonTypeString: "listButtonHorizontal",
                 groupName: "group-name",
             },
         });
@@ -61,7 +61,7 @@ describe("buttonQuestion.vue", () => {
         // Act
         const wrapper = shallowMount(buttonQuestion, {
             propsData: {
-                buttonType: "radio",
+                buttonTypeString: "radio",
                 groupName: "group-name",
             },
         });

src/common-components/button-question/button-question.vue

@@ -37,7 +37,7 @@
                         v-for="answer in buttonsInfo"
                         :key="answer.value ? answer.value : answer">
                         <component
-                            :is="buttonType"
+                            :is="buttonTypeString"
                             :buttonLabel="answer.buttonLabel"
                             :buttonLabelSubCopy="answer.buttonLabelSubCopy"
                             :buttonBodyCopy="answer.buttonBodyCopy"
@@ -89,7 +89,7 @@ import { ErrorMessage } from "vee-validate";
 export default {
     name: "buttonQuestion",
     props: {
-        buttonType: {
+        buttonTypeString: {
             type: String,
             default: "listButton",
         },
@@ -128,7 +128,7 @@ export default {
     },
     beforeMount() {
         if (this.buttonTypeObject) {
-            this.$options.components[this.buttonType] = this.buttonTypeObject;
+            this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
         }
     },
     data() {
@@ -140,7 +140,7 @@ export default {
         getFieldSetClasses() {
             if (this.isOverflowScrollable) {
                 return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
-            } else if (this.buttonType == "listCard") {
+            } else if (this.buttonTypeString == "listCard") {
                 return "w-100";
             } else {
                 return "";
@@ -148,7 +148,7 @@ export default {
         },
         getComponentLoopWrapperClasses() {
             let classes;
-            switch (this.buttonType) {
+            switch (this.buttonTypeString) {
                 case "listButton":
                     classes = "w-100";
                     break;
@@ -175,9 +175,9 @@ export default {
 
             classes += this.isWide ? "col-12" : "col";
 
-            if (this.buttonType == "radio") {
+            if (this.buttonTypeString == "radio") {
                 classes += " radio-button-container";
-            } else if (this.buttonType == "servicePackageRadio") {
+            } else if (this.buttonTypeString == "servicePackageRadio") {
                 classes = "package-wrapper";
             }
 

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -1,7 +1,7 @@
 <template>
   <buttonQuestion
     class="address-vehicles-question"
-    buttonType="listButton"
+    buttonTypeString="listButton"
     groupName="ChooseAddressVehicle"
     :questionText="questionText"
     :answers="vehicles"

src/layouts/estimate/estimate.vue

@@ -21,7 +21,7 @@
             cmsWidgetName="VinLookupMethod"
             :answers="answersFromCms"
             groupName="vinLookupMethodOption"
-            buttonType="listButton"
+            buttonTypeString="listButton"
             v-model="selectedVinLookupMethod"
             isRequired
             validationRules="option-required"

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -3,7 +3,7 @@
         <buttonQuestion
             :answers="answersFromCms"
             :groupName="groupName"
-            buttonType="listButtonHorizontal"
+            buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
             :additionalData="{isCashOrInsurance: true}"
             isRequired

src/layouts/quote/service-package-question/service-package-question.vue

@@ -2,7 +2,7 @@
     <buttonQuestion
         :answers="servicePackageAnswers"
         :groupName="groupName"
-        buttonType="servicePackageRadio"
+        buttonTypeString="servicePackageRadio"
         :buttonTypeObject="servicePackageRadio"
         v-model="selectedValues"
         isRequired

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -5,7 +5,7 @@
             isMultiSelect
             :answers="answersToDisplay"
             :groupName="groupName"
-            buttonType="listCard"
+            buttonTypeString="listCard"
             isRequired
             v-model="selectedValues"
             validationRules="damage-location-required"

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -7,7 +7,7 @@
                 :isMultiSelect="isMultiSelect"
                 :answers="answersToDisplay"
                 :groupName="groupName"
-                buttonType="listCard"
+                buttonTypeString="listCard"
                 v-model="selectedValues"
                 :validationRules="validationRules"
                 :suppressError="suppressError"

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -7,7 +7,7 @@
                     isMultiSelect
                     :answers="answersToDisplay"
                     :groupName="groupName"
-                    buttonType="listCard"
+                    buttonTypeString="listCard"
                     v-model="selectedDoorSidesValues"
                     validationRules="damage-side-required"
                     isRequired

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -5,7 +5,7 @@
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
-                buttonType="listButtonHorizontal"
+                buttonTypeString="listButtonHorizontal"
                 useTextForValue
                 v-model="selectedValue"
                 :validationRules="validationRules"

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -5,7 +5,7 @@
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
-                buttonType="listCard"
+                buttonTypeString="listCard"
                 v-model="selectedValues"
                 :suppressError="suppressError"
                 :validationRules="validationRules"

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -8,7 +8,7 @@
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
-                    buttonType="listCard"
+                    buttonTypeString="listCard"
                     :isWide="true"
                     altText=""
                     isRequired
@@ -18,7 +18,7 @@
                         <div class="col">
                             <buttonQuestion
                                 v-model="selectedPartNumber"
-                                buttonType="radio"
+                                buttonTypeString="radio"
                                 class="radioQuestion"
                                 :questionText="glassFeatureQuestion"
                                 :answers="featureListData[selectedTint]"

src/ux-components/radio-service-package/radio-service-package.vue

@@ -1,203 +0,0 @@
-<template>
-  <div class="package-main">
-    <div class="package-wrapper">
-      <input type="radio" name="test-radio" id="testradio">
-      <label for="testradio">
-        <div class="package-specs">
-          <p class="m-0">Economy service <span>As little as $0.00</span></p>
-          <ul>
-            <li>New replacement windshield</li>
-            <li>Expert installation</li>
-            <li>Nationwide lifetime warranty</li>
-          </ul>
-        </div>
-      </label>
-    </div>
-    <div class="package-wrapper">
-      <input type="radio" name="test-radio" id="testradio-2">
-      <label for="testradio-2">
-        <div class="package-specs">
-          <p class="mb-2">Standard service <span>As little as 59.97</span></p>
-          <p class="sub-label m-0">most popular</p>
-          <ul>
-            <li>New replacement windshield</li>
-            <li><textLink linkType="dashedUnderline" text="Rain Defense" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRainDefenseModal" aria-label="Modal window" /> treatment</li>
-            <li>New <textLink linkType="dashedUnderline" text="front wiper blades" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateFrontWiperModal" aria-label="Modal window" /></li>
-            <li>New <textLink linkType="dashedUnderline" text="rear wiper blade" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRearWiperModal" aria-label="Modal window" /></li>
-            <li>Expert <textLink linkType="dashedUnderline" text="recalibration" href="#!" data-bs-toggle="modal" data-bs-target="#EstimateRecalModal" aria-label="Modal window" /></li>
-            <li>Nationwide lifetime warranty</li>
-            <li>New wiper blades</li>
-          </ul>
-        </div>
-      </label>
-    </div>
-    <div class="package-wrapper">
-      <input type="radio" name="test-radio" id="testradio-3">
-      <label for="testradio-3">
-        <div class="package-specs">
-          <p class="mb-2">Premium service <span>As little as $94.97</span></p>
-          <ul>
-            <li>New replacement windshield</li>
-            <li>Expert installation</li>
-            <li>Nationwide lifetime warranty</li>
-            <li>New wiper blades</li>
-            <li>Rain Defense</li>
-          </ul>
-        </div>
-      </label>
-    </div>
-    <modal
-    cmsWidgetName="EstimateRainDefenseModal"
-    />
-    <modal
-    cmsWidgetName="EstimateFrontWiperModal"
-    />
-    <modal
-    cmsWidgetName="EstimateRearWiperModal"
-    />
-    <modal
-    cmsWidgetName="EstimateRecalModal"
-    />
-  </div>
-</template>
-
-<script>
-import textLink from "@/ux-components/text-link/text-link";
-import modal from "@/common-components/modal/modal";
-export default {
-  name: "radioServicePackage",
-  data() {
-    return {
-      isActive: false,
-      hasArrow: true,
-    };
-  },
-  methods: {
-    toggleClass: function(event){
-      this.isActive = !this.isActive;
-    }
-  },
-  components: {
-    textLink,
-    modal
-  }
-}
-</script>
-
-<style lang="scss">
-.package-main {
-  .package-wrapper {
-    margin: 0.5rem 0;
-    input[type="radio"] {
-      opacity: 0;
-      position: absolute;
-      left: -9999px;
-
-      + label {
-        display: flex;
-        align-items: flex-start;
-        position: relative;
-        cursor: pointer;
-        width: 100%;
-        padding: 1rem;
-        border: 1px solid $gray-300;
-        box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
-        border-radius: .5rem;
-        overflow: hidden;
-        min-height: 58px;
-
-        &:before {
-          content: "";
-          position: relative;
-          top: 5px;
-          margin-right: 1rem;
-          border-radius: 50%;
-          border: 1px solid $gray-500;
-          width: 16px;
-          height: 16px;
-          min-width: 16px;
-        }
-
-        &:after {
-          content: "";
-          position: absolute;
-          left: 19px;
-          top: 24px;
-          border-radius: 50%;
-          width: 10px;
-          height: 10px;
-          min-width: 10px;
-        }
-      }
-
-      &:hover {
-        + label {
-          &:before {
-            border: 1px solid #8E9292;
-            box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
-          }
-        }
-      }
-
-      &:checked {
-        + label {
-          .package-specs {
-            max-height: 1000px;
-          }
-        }
-        + label {
-          background-color: $blue-100;
-          border: 1px solid $blue;
-          max-height: 500px;
-        }
-        + label {
-          &:before {
-            box-shadow: 0px 0px 0px 1px $blue;
-          }
-        }
-        + label {
-          &:after {
-            background: $blue;
-          }
-        }
-      }
-
-      &:focus {
-        + label {
-          &:before {
-            border: 2px solid $blue;
-          }
-        }
-      }
-    }
-
-    .package-specs {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      max-height: 0;
-      transition: all .75s ease;
-
-      p {
-        font-weight: 500;
-        display: flex;
-        justify-content: space-between;
-        span {
-          color: $green;
-        }
-        &.sub-label {
-          color: $green;
-          text-transform: uppercase;
-        }
-      }
-      ul {
-        margin: 1rem 0 0 -15px;
-        padding: 0;
-        li {
-          margin-bottom: .5rem;
-        }
-      }
-    }
-  }
-}
-</style>