CSR-731 | Files created

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

@@ -61,6 +61,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from 'vee-validate';
 import radio from "@/ux-components/radio/radio";
+import servicePackageRadio from "@/layouts/quote/service-package-question/service-package-radio/service-package-radio";
 
 export default {
   name: "buttonQuestion",
@@ -121,7 +122,10 @@ export default {
           classes = "row g-2 justify-content-center";
           break;
         case 'radio':
-          classes = 'ui-radio d-flex'
+          classes = 'ui-radio d-flex';
+          break;
+        case 'servicePackageRadio':
+          classes = "ui-radio d-flex service-package";
           break;
       }
       return classes;
@@ -158,8 +162,12 @@ export default {
       return str.replace(" ", "-");
     },
     getValue(answer){
-      if (this.useTextForValue) { return answer.Text }
-      return answer.Name ? answer.Name : answer;
+      if (this.useTextForValue) 
+        { return answer.Text }
+      else if (this.buttonType == "servicePackageRadio") 
+        { return answer }
+      else 
+        { return answer.Name ? answer.Name : answer; }
     },
     getAnswerString(answer, prop = "Name") {
       switch (typeof answer) {
@@ -198,6 +206,7 @@ export default {
     listCard,
     ErrorMessage,
     radio,
+    servicePackageRadio
   },
 };
 </script>

src/layouts/quote/quote.vue

@@ -24,6 +24,13 @@
             groupName="CashOrInsuranceQuestion"
           />
       <radioServicePackage/>
+      <servicePackageQuestion
+        ref="servicePackage"
+        cashCmsWidgetName="CashServicePackageQuestionWidget"
+        insuranceCmsWidgetName="InsuranceServicePackageWidget"
+        v-model="selectedPackage"
+        groupName="ServicePackageQuestion"
+      />
       <textBlock
       cmsWidgetName="quoteDisclaimer"
       justifyText="left"
@@ -120,6 +127,7 @@ 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 servicePackageQuestion from "./service-package-question/service-package-question";
 import textBlock from "@/common-components/text-block/text-block";
 import store from "@/store";
 
@@ -200,7 +208,8 @@ export default {
     Form,
     radioServicePackage,
     textBlock,
-    cashOrInsuranceQuestion
+    cashOrInsuranceQuestion,
+    servicePackageQuestion,
   },
 
 };

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

@@ -0,0 +1,48 @@
+<template>
+    <div class="service-package-question">
+        <buttonQuestion
+            :answers="cashAnswersFromCms"
+            :groupName="groupName"
+            buttonType="servicePackageRadio"
+            v-model="selectedValues"
+            isRequired
+            />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+
+export default ({
+    name: "servicePackageQuestion",
+    props: {               
+        modelValue: String,
+        groupName: String,
+        cashCmsWidgetName: String,
+        insuranceCmsWidgetName: String,
+    },
+    computed: {
+        cashAnswersFromCms(){
+            console.log('Cash answers',this.getCmsContent(this.cashCmsWidgetName, 'Answers'));
+            return this.getCmsContent(this.cashCmsWidgetName, 'Answers');
+        },
+        insuranceAnswersFromCms() {
+            return this.getCmsContent(this.insuranceCmsWidgetName, 'Answers');
+        },
+        // selectedValues: {
+        //     get: function() {
+        //         // Convert to CMS answer name from bool
+        //         var cmsAnswerValue = this.modelValue ? insuranceAnswer : cashAnswer;
+        //         return cmsAnswerValue;
+        //     },
+        //     set: function(newValue) {
+        //         // Convert back to bool for parent component
+        //         this.$emit("update:modelValue", newValue === insuranceAnswer);
+        //     }
+        // },
+    },
+    components: {
+        buttonQuestion,
+    },
+})
+</script>

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

@@ -0,0 +1,154 @@
+<template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
+  <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
+    <input
+      type="radio"
+      class="form-check-input"
+      aria-checked="false"
+      :name="groupName"
+      :id="buttonID"
+      :aria-required="isRequired"
+      :value="value"
+      :v-model="checkValue"
+      @change="handleCheckChange"
+      :checked="checkValue"
+      :validationRules="validationRules"
+      />
+    <label class="d-flex align-items-start form-check-label" :for="buttonID">
+      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{
+        screenReaderOnlyText
+      }}</span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
+
+export default {
+  name: "radio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    screenReaderOnlyText: String,
+    selectedValues: String,
+    hasError: Boolean,
+    validationRules: String,
+    valueToLogType: String,
+  },
+  data() {
+    return {
+      checkValue: Boolean,
+    };
+  },
+  created() {
+    if (this.selectedValues) {
+      this.checkValue = this.selectedValues === this.value;
+      this.handleCheckChange();
+    } else{
+      this.checkValue = false;
+    }
+  },
+  methods: {
+    handleCheckChange() {
+      this.handleChange(this.value);
+      const emitEvent = {
+        checkValue: this.checkValue,
+        value: this.value.toString(),
+        buttonID: this.buttonID && this.buttonID.toString(),
+      };
+
+      this.$emit("isCheckedChanged", emitEvent);
+      this.$emit("update:modelValue", emitEvent);
+
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
+    },
+  },
+  computed: {
+    getHeaderTextFromCms(){
+        return this.getCmsContent(this.value.SubWidgetName, 'HeaderText');
+    },
+    getSubHeaderTextFromCms(){
+        return this.getCmsContent(this.value.SubWidgetName, 'SubheaderText');
+    },
+    getBodyTextFromCms(){
+        return this.getCmsContent(this.value.SubWidgetName, 'BodyText');
+    },
+    getFooterTextFromCms(){
+        return this.getCmsContent(this.value.SubWidgetName, 'FooterText');
+    }
+  },
+  setup(props) {
+    const inputType = "radio";
+    const {
+        value: inputValue,
+        handleChange,
+        errors,
+    } = useField(props.groupName, props.validationRules,
+    {
+      type: inputType,
+      checkedValue: props.value,
+    });
+    return {
+      handleChange,
+      errors,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-check {
+  position: relative;
+
+  .form-check-input {
+    border: 1px solid $gray-500;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+
+    &:checked {
+      background-color: $white;
+      background-size: 71%;
+      background-position: center;
+      border: 1px solid $blue;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
+      + label {
+        p {
+          font-weight: 500;
+          font-size: .875rem;
+          color: $black;
+        }
+      }
+    }
+    &:focus {
+      box-shadow: 0 0 0 2.5px $blue;
+    }
+
+    &, & + label {
+      margin-top: 0;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &:hover {
+    .form-check-input {
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+  p {
+    font-weight: 400;
+    font-size: .875rem;
+    color: $gray-600;
+  }
+}
+</style>