Merge pull request #661 from Safelite/feature/CSR-726ComponentCreation

CSR-726 | Create cashOrInsuranceQuestion component

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

@@ -0,0 +1,45 @@
+<template>
+    <div class="cash-or-insurance-question">
+        <buttonQuestion
+            :answers="answersFromCms"
+            :groupName="groupName"
+            buttonType="listButtonHorizontal"
+            v-model="selectedValues"
+            isCashOrInsurance
+            isRequired
+            />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "cashOrInsuranceQuestion",
+    props: {               
+        modelValue: String,
+        groupName: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        answersFromCms(){
+            return this.getCmsContent(this.cmsWidgetName, 'Answers');
+        },
+        selectedValues: {
+            get: function() {
+                // Convert to CMS answer name from bool
+                var cmsAnswerValue = this.modelValue ? "InsuranceAnswer" : "CashAnswer";
+                // list-button-horizontal expects an array of values
+                return [cmsAnswerValue];
+            },
+            set: function(newValue) {
+                // Convert back to bool for parent component
+                this.$emit("update:modelValue", newValue === "InsuranceAnswer");
+            }
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>

src/layouts/quote/quote.vue

@@ -11,22 +11,13 @@
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
         <div class="fade-on-route-transition sub-container make-tall">
-          <buttonQuestion
-            :answers="years"
-            text-position="text-start"
-            questionText="List Button as Radio"
-            groupName="years"
-            />
-          <buttonQuestion
-            questionText="CASH OR INSURANCE"
-            :answers="answersFromCms"
-            groupName="cash-or-insurance"
-            buttonType="listButtonHorizontal"
-            useTextForValue
-            isCashOrInsurance
-            isRequired
-            />
-            <radioServicePackage/>
+          <cashOrInsuranceQuestion
+            ref="cashOrInsurance"
+            cmsWidgetName="CashOrInsuranceQuestionWidget"
+            v-model="isInsurance"
+            groupName="CashOrInsuranceQuestion"
+          />
+          <radioServicePackage/>
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"
             :isForwardActionDisabled="!meta.valid"
@@ -41,25 +32,16 @@
 
 <script>
 // Components
-import buttonQuestion from "@/common-components/button-question/button-question";
 import funnelHeader from "@/common-components/funnel-header/funnel-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
+import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeActions } from "@/constants/store-actions";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
-import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
-import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
-import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
+import { Form } from "vee-validate";
 
-import store from "@/store";
-import baseMixin from "@/mixins/base-mixin";
 
 export default {
     name: "quote",
@@ -72,34 +54,23 @@ export default {
         vm.setCmsContent(cmsContent);
       });
     },
+    data(){
+      return {
+        isInsurance: false,
+      }
+    },
     methods: {
         arePagePrerequisitesValid() {
             return true;
         }
     },
-    computed: {
-        years() {
-            return ["2011", "2012"];
-        },
-        answersFromCms() {
-            return ["Pay on my own", "Pay with insurance"];
-        },
-        selectedChipCountValues: {
-        get: function() {
-            return this.modelValue;
-        },
-        set: function(newValue) {
-            this.$emit("update:modelValue", newValue);
-        }
-    },
-      },
     components: {
       funnelHeader,
       funnelFooter,
       vehicleBanner,
       funnelSubHeader,
       Form,
-      buttonQuestion,
+      cashOrInsuranceQuestion,
       radioServicePackage
     },