CSR-762 Some naming changes

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

@@ -84,8 +84,8 @@
                         <transition name="fade" mode="out-in">
                             <div
                                 v-if="
-                                    typeof selectedValues == 'string' &&
+                                    typeof primaryValue == 'string' &&
-                                    selectedValues == answer.Name
+                                    primaryValue == answer.value
                                 ">
                                 <slot></slot>
                             </div>
@@ -148,6 +148,11 @@ export default {
             default: true,
         },
     },
+    data() {
+        return {
+            primaryValue: ""
+        }
+    },  
     computed: {
         getFieldSetClasses() {
             if (this.isOverflowScrollable) {
@@ -260,12 +265,13 @@ export default {
         //   }
         //   this.$emit("isCheckedChanged", val);
         // },
-        handleAnswerChange(eventValue) {
+        handleAnswerChange(primaryAnswerValue) {
             console.log({
-              bqEvent: eventValue
+              bqEvent: primaryAnswerValue
             })
-            this.$emit("change", eventValue);
+            this.primaryValue = primaryAnswerValue;
-            this.$emit("update:modelValue", eventValue);
+            this.$emit("change", primaryAnswerValue);
+            this.$emit("update:modelValue", primaryAnswerValue);
         },
     },
     components: {

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

@@ -1,7 +1,5 @@
 <template>
     <div v-for="(q, i) in questions" :key="i">
-        q.answerSelected: {{q.answerSelected}}<br/>
-        currentQuestionNum: {{currentQuestionNum}}
         <transition appear name="fade" mode="out-in">
             <!-- <buttonQuestion
                 v-if="q.answerSelected || (q.questionSequence === currentQuestionNum)"

src/layouts/part-questions/part-questions.vue

@@ -122,11 +122,10 @@ export default {
         },
         async forwardButtonAction() {
             const questionAnswersArray = this.partsQuestionsData.map((glass) => {
-                console.log(glass)
                 return {
                     glassLocation: glass.glassLocation,
                     glassName: glass.glassName,
-                    result: glass.answerData.result,
+                    result: glass.answerData.answerResult,
                     answeredQuestions: glass.answerData.answeredQuestions,
                     isSuppressedPart: glass.isSuppressedPart,
                 };
@@ -194,7 +193,7 @@ export default {
                     
                     // only look for duplicates forward... to parts that follow after the currently being answered part
                     if (gpIndex > answer.glassIndex) {
-                        console.log("RESETTING ANSWERDATA")
+
                         let suppressUntil;
                         // reset this glass part, in case user is changing their previous answers
                         glass.answerData = null;
@@ -298,7 +297,6 @@ export default {
                                     return !q.suppressQuestion;
                                 });
 
-                                console.log("REMAINING QUESTIONS", remainingQuestions)
                                 if (remainingQuestions.length < 1) {
                                     // this is the final answer for this glass part
 
@@ -315,8 +313,6 @@ export default {
                                         answeredQuestions: [answeredQuestionObj],
                                     };
 
-                                    console.log(glass.answerData)
-
                                     // suppress this glass because it has an answer
                                     glass.isSuppressedPart = true;
                                 }
@@ -420,7 +416,6 @@ export default {
 
                 this.selectedAnswers[glass.key] = [];
                 if (!alreadyAnsweredQuestions) {
-                    console.log("NULLING ANSWERDATA")
                     glass.answerData = null;
                 }
 

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

@@ -5,6 +5,10 @@
     <div class="nested-radio">
         <div class="row my-2">
             <div class="col">
+                modelValue: {{modelValue}} <br/>
+                selectedTint: {{selectedTint}}   <br/>
+                selectedPartNumber: {{selectedPartNumber}} <br/>
+                tintSelectionOptions: {{tintSelectionOptions}}
                 <buttonQuestion
                     v-model="selectedTint"
                     :answers="tintSelectionOptions"
@@ -13,7 +17,6 @@
                     altText=""
                     isRequired
                     :groupName="`${glassLocation}-${glassName}`"
-                    @isCheckedChanged="ResetTintAndPartSelections"
                     :validationRules="tintValidationRules"
                 >
                     <div class="row my-2" aria-live="polite">
@@ -198,7 +201,11 @@ export default {
             this.$nextTick(() => {
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
-                    this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0].color;
+                    console.log({
+                        alreadyPopulatedPartsData: this.alreadyPopulatedPartsData,
+                        alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData
+                    })
+                    this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
                 }
             });
         },

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -25,6 +25,7 @@
             </div>
           </div>
         </div>
+        glassParts: {{glassParts}}
         <div v-for="(item, i) in PartsOrQuestions" :key="i">
           <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
           <hr v-if="i > 0" />
@@ -102,7 +103,7 @@ export default {
         return {
             glassParts: {},
             alertWidgetData: Object,
-            alreadyPopulatedPartsData: {},
+            alreadyPopulatedPartsData: [],
         };
     },
     computed: {
@@ -196,15 +197,15 @@ export default {
 
         LoadInitialPartsData() {
             const partsData = this.PartsFromApi;
-            const alreadyPopulatedPartsData =
+            this.alreadyPopulatedPartsData =
                 this.$store.getters.lineItems.glassParts === null
-                ? {}
+                ? []
                 : this.$store.getters.lineItems.glassParts;
 
             partsData.partsOrQuestions.map((g) => {
                 // If the part is already populated, use the value from the store and populate the v-model.
-                Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+                Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
-                const partNumber = alreadyPopulatedPartsData[key].partNumber;
+                const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
                 g.parts.forEach((p) => {
                     if (p.partNumber === partNumber) {
                     this.glassParts[g.glassLocation + "-" + g.glassName] = {

src/router/index.js

@@ -239,6 +239,8 @@ function navigateToUrl(url, optionalQuery = {}) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
 
+  externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
+
   window.location.assign(externalUrl);
 }
 

src/ux-components/list-button/list-button.vue

@@ -141,22 +141,22 @@ export default {
     //     return; // Prevent arrow keys from doing anything if element is a checkbox
     //   }
     // },
-    triggerButton() {
+    // triggerButton() {
-      if (this.selectingInitiatesLoad) {
+    //   if (this.selectingInitiatesLoad) {
-        this.displayLoader();
+    //     this.displayLoader();
-        // this.handleCheckChange();
+    //     // this.handleCheckChange();
-      }
+    //   }
 
-      // TODO KO THIS IS IMPORTANT
+    //   // TODO KO THIS IS IMPORTANT
-      // Move this to input-button-wrapper?
+    //   // Move this to input-button-wrapper?
-      // this.pushEventToGA(
+    //   // this.pushEventToGA(
-      //   this.$route.query[queryStrings.FMG_PAGE],
+    //   //   this.$route.query[queryStrings.FMG_PAGE],
-      //   this.GaActions.CLICKED,
+    //   //   this.GaActions.CLICKED,
-      //   this.value.toString(),
+    //   //   this.value.toString(),
-      //   true,
+    //   //   true,
-      //   this.valueToLogType
+    //   //   this.valueToLogType
-      // );
+    //   // );
-    },
+    // },
     // handleCheckChange() {
     //   const emitEvent = {
     //     checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question

src/ux-components/radio/radio.vue

@@ -1,7 +1,15 @@
 <template>
-  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
+    <!-- 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' : '']">
+    <inputButtonWrapper
-    <input
+        :isMultiSelect="isMultiSelect"
+        :value="value"
+        :groupName="groupName"
+        buttonWrapperClasses="ui-radio form-check"
+        inputClasses="form-check-input"
+        :validationRules="validationRules"
+        @change="handleAnswerChange">
+        <!-- <div class="ui-radio form-check" :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
+        <!-- <input
       type="radio"
       class="form-check-input"
       aria-checked="false"
@@ -13,128 +21,135 @@
       @change="handleCheckChange"
       :checked="checkValue"
       :validationRules="validationRules"
-      />
+      /> -->
-    <label class="d-flex align-items-start form-check-label" :for="buttonID">
+        <div class="d-flex align-items-start form-check-label" :for="buttonID">
-      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
+            <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
-      <span v-if="screenReaderOnlyText" class="sr-only">{{
+            <span v-if="screenReaderOnlyText" class="sr-only">{{
-        screenReaderOnlyText
+                screenReaderOnlyText
-      }}</span>
+            }}</span>
-    </label>
+        </div>
-  </div>
+        <!-- </div> -->
+    </inputButtonWrapper>
 </template>
 
 <script>
 import { useField } from "vee-validate";
 import { queryStrings } from "@/constants/query-strings";
+import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
 
 export default {
-  name: "radio",
+    name: "radio",
-  props: {
+    props: {
-    groupName: String,
+        groupName: String,
-    buttonLabel: String,
+        buttonLabel: String,
-    buttonID: String,
+        buttonID: String,
-    isRequired: Boolean,
+        isRequired: Boolean,
-    value: {
+        value: {
-      type: [String, Number],
+            type: [String, Number],
-      default: "",
+            default: "",
+        },
+        screenReaderOnlyText: String,
+        selectedValues: String,
+        hasError: Boolean,
+        validationRules: String,
+        valueToLogType: String,
     },
-    screenReaderOnlyText: String,
+    data() {
-    selectedValues: String,
+        return {
-    hasError: Boolean,
+            // checkValue: 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);
     },
-  },
+    components: {
-  setup(props) {
+        inputButtonWrapper,
-    const inputType = "radio";
+    },
-    const {
+    // created() {
-        value: inputValue,
+    //   if (this.selectedValues) {
-        handleChange,
+    //     this.checkValue = this.selectedValues === this.value;
-        errors,
+    //     this.handleCheckChange();
-    } = useField(props.groupName, props.validationRules,
+    //   } else{
-    {
+    //     this.checkValue = false;
-      type: inputType,
+    //   }
-      checkedValue: props.value,
+    // },
-    });
+    methods: {
-    return {
+        // handleCheckChange() {
-      handleChange,
+        //   this.handleChange(this.value);
-      errors,
+        //   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);
+        // },
+    },
+    // 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>