CSR-731 | Two-way binding finished

Commit pre-styling changes

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

@@ -156,6 +156,9 @@ export default {
                 case "radio":
                     classes = "ui-radio d-flex";
                     break;
+                case "servicePackageRadio":
+                    classes = "ui-radio d-flex service-package";
+                    break;
             }
             return classes;
         },
@@ -243,6 +246,7 @@ export default {
         listCard,
         ErrorMessage,
         radio,
+        servicePackageRadio,
     },
 };
 </script>

src/layouts/quote/quote.vue

@@ -156,8 +156,10 @@ export default {
 
     // Call the "next" function to complete the transition to this page.
     next((vm) => {
+      console.log("cmsContent", cmsContent);
       vm.setCmsContent(cmsContent);
       vm.isInsurance = vm.getDefaultIsInsuranceValue();
+      vm.selectedPackage = vm.getDefaultSelectedPackageValue();
     });
   },
   data(){
@@ -165,6 +167,13 @@ export default {
       cashOrInsuranceThreshhold: 600,
       pricingRequestResult: null,
       isInsurance: null,
+      selectedPackage: null,
+    }
+  },
+  watch: {
+    selectedPackage(newPackage, oldPackage) {
+      console.log("new package: ", newPackage);
+      console.log("old package: ", oldPackage);
     }
   },
   methods: {
@@ -178,7 +187,11 @@ export default {
       } else {
         return this.economyPackagePrice > this.cashOrInsuranceThreshhold;
       }
-    }
+    },
+    getDefaultSelectedPackageValue() {
+      // placeholder - to be populated via CSR-774
+      return null;
+    },
   },
   computed: {
     years() {

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

@@ -23,23 +23,28 @@ export default ({
     },
     computed: {
         cashAnswersFromCms(){
-            console.log('Cash answers',this.getCmsContent(this.cashCmsWidgetName, 'Answers'));
+            let cashAnswers = "";
-            return this.getCmsContent(this.cashCmsWidgetName, 'Answers');
+            let cmsContent = this.getCmsContent(this.cashCmsWidgetName, 'Answers');
+            if (cmsContent) {
+                cashAnswers = cmsContent?.map((x) => ({
+                    buttonLabel : x.Name,
+                    value : x.SubWidgetName
+                }));
+            }
+            
+            return cashAnswers;
         },
         insuranceAnswersFromCms() {
             return this.getCmsContent(this.insuranceCmsWidgetName, 'Answers');
         },
-        // selectedValues: {
+        selectedValues: {
-        //     get: function() {
+            get: function() {
-        //         // Convert to CMS answer name from bool
+                return this.modelValue;
-        //         var cmsAnswerValue = this.modelValue ? insuranceAnswer : cashAnswer;
+            },
-        //         return cmsAnswerValue;
+            set: function(newValue) {
-        //     },
+                this.$emit("update:modelValue", newValue);
-        //     set: function(newValue) {
+            }
-        //         // Convert back to bool for parent component
+        },
-        //         this.$emit("update:modelValue", newValue === insuranceAnswer);
-        //     }
-        // },
     },
     components: {
         buttonQuestion,

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

@@ -1,154 +1,93 @@
 <template>
-  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
+    <baseInputButton
-  <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']">
+        v-bind="$props"
-    <input
+        buttonWrapperClasses="ui-radio form-check test000"
-      type="radio"
+        inputClasses="form-check-input"
-      class="form-check-input"
+        @buttonClicked="handleAnswerChange">
-      aria-checked="false"
+        <div class="d-flex align-items-start form-check-label">
-      :name="groupName"
+            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
-      :id="buttonID"
+            <span v-if="screenReaderOnlyText" class="sr-only">{{
-      :aria-required="isRequired"
+                screenReaderOnlyText
-      :value="value"
+            }}</span>
-      :v-model="checkValue"
+        </div>
-      @change="handleCheckChange"
+    </baseInputButton>
-      :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 baseInputButton from "@/common-components/base-input-button/base-input-button";
-import { queryStrings } from "@/constants/query-strings";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
-  name: "radio",
+    name: "servicePackageRadio",
-  props: {
+    mixins: [inputButtonWrapperMixin],
-    groupName: String,
+    components: {
-    buttonLabel: String,
+        baseInputButton,
-    buttonID: String,
-    isRequired: Boolean,
-    value: {
-      type: [String, Number],
-      default: "",
     },
-    screenReaderOnlyText: String,
+    computed: {
-    selectedValues: String,
+        getHeaderTextFromCms(){
-    hasError: Boolean,
+            return this.getCmsContent(this.value, 'HeaderText');
-    validationRules: String,
+        },
-    valueToLogType: String,
+        getSubHeaderTextFromCms(){
-  },
+            return this.getCmsContent(this.value, 'SubheaderText');
-  data() {
+        },
-    return {
+        getBodyTextFromCms(){
-      checkValue: Boolean,
+            return this.getCmsContent(this.value, 'BodyText');
-    };
+        },
-  },
+        getFooterTextFromCms(){
-  created() {
+            return this.getCmsContent(this.value, 'FooterText');
-    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>
+<style lang="scss">
 .form-check {
-  position: relative;
+    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;
+        border: 1px solid $gray-500;
+        border-radius: 50%;
+        margin-right: 0.5rem;
+        opacity: 1;
+        height: 1em;
+        width: 1em;
+
+        &: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");
+            + .form-check-label {
+                p {
+                    font-weight: 500;
+                    font-size: 0.875rem;
+                    color: $black;
+                }
+            }
+        }
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+
+        &,
+        & + .form-check-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: 0.875rem;
+        color: $gray-600;
     }
-  }
-  p {
-    font-weight: 400;
-    font-size: .875rem;
-    color: $gray-600;
-  }
 }
 </style>