Merge branch 'develop' into feature/CSR-297

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

@@ -5,26 +5,54 @@
     </div>
   </div>
 
-<div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+  <div
-
+    class="container nested-radio"
+    v-for="(value, name, index) in featureListData"
+    :key="index"
+  >
     <div class="row my-2">
       <div class="col">
-            <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
+        <listCard
+          v-model="selectedTint[name]"
+          :value="`${glassLocation}-${glassName}-${name}`"
+          :isRadio="true"
+          :isWide="true"
+          :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
               name
             )}`)
-          " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
+          "
+          :buttonLabel="name"
+          altText=""
+          :buttonID="`${glassLocation}-${glassName}-${name}`"
+          :groupName="`${glassLocation}-${glassName}`"
+          @isCheckedChanged="ResetTintAndPartSelections()"
+        />
       </div>
     </div>
     <transition name="fade" mode="out-in">
-        <div v-if="
+      <div
+        v-if="
           selectedTint[name] != undefined &&
           selectedTint[name].buttonId ===
             `${glassLocation}-${glassName}-${name}`
-        " class="row my-2" aria-live="polite">
+        "
+        class="row my-2"
+        aria-live="polite"
+      >
         <div class="col">
-                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
+          <buttonQuestion
+            v-model="selectedPart[glassLocation]"
+            buttonType="radio"
+            class="radioQuestion"
+            :questionText="glassFeatureQuestion"
+            :answers="value"
+            textPosition="text-start"
+            :loaderEnabled="false"
+            :isRequired="true"
+            :groupName="`${glassLocation}-${glassName}-${name}`"
+          />
         </div>
       </div>
     </transition>
@@ -37,12 +65,8 @@ import listCard from "@/ux-components/list-card/list-card";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 // Supporting files
-import {
+import { getTintImage } from "@/constants/tint-mapper";
-    getTintImage
+import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
-} from "@/constants/tint-mapper";
-import {
-    getCustomTransformValue
-} from "@/constants/dynamictext-mapper";
 
 export default {
   name: "glass-part-question",
@@ -61,26 +85,7 @@ export default {
     modelValue: Object,
   },
   mounted() {
-        if (this.modelValue !== undefined) {
+    this.LoadPreselectedValues();
-            // Populate button-question model-value if parts data already exists in VueX
-            const alreadyPopulatedPartsData =
-                this.$store.getters.lineItems.glassParts;
-
-            Object.keys(alreadyPopulatedPartsData).forEach((key) => {
-                const partNumber = alreadyPopulatedPartsData[key].partNumber;
-                const tintColor = alreadyPopulatedPartsData[key].color;
-
-                Object.keys(this.modelValue).forEach((key) => {
-                    if (this.modelValue[key][0] === partNumber) {
-                        this.selectedTint[tintColor] = {
-                            buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
-                            checkValue: "",
-                            value: "",
-                        };
-                    }
-                });
-            });
-        }
   },
   components: {
     listCard,
@@ -127,8 +132,13 @@ export default {
 
       return tintMapByColor;
     },
+
+    PartDataFromApi() {
+      return this.$store.getters.pageData(this.$route.query.fmgPage);
+    },
   },
   methods: {
+    // Initialize the component data
     initializeComponent(cmsContent) {
       this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
       this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
@@ -149,7 +159,6 @@ export default {
     // Reset selections when tint changes for the same glass to ensure proper selection.
     // Also checks if only a single part is present for the tint.
     ResetTintAndPartSelections() {
-
       this.selectedTint = {};
       this.selectedPart = {};
       this.AutoSelectIfSinglePart();
@@ -158,18 +167,50 @@ export default {
     // Check if only a single part is present for the tint and set the v-model if it is.
     AutoSelectIfSinglePart() {
       // Check if the selected tint only has a single feature
-            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+      Object.keys(this.PartDataFromApi.partsOrQuestions).forEach((key) => {
+        const currentGlassSelection =
+          this.PartDataFromApi.partsOrQuestions[key];
 
-            Object.keys(partsData.partsOrQuestions).forEach((key) => {
+        if (
-                const currentGlassSelection = partsData.partsOrQuestions[key];
+          currentGlassSelection.glassName === this.glassName &&
-
+          currentGlassSelection.glassLocation === this.glassLocation
-                if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
+        ) {
           if (currentGlassSelection.parts.length === 1) {
-                        this.selectedPart = { [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]};
+            this.selectedPart = {
+              [currentGlassSelection.glassLocation]: [
+                currentGlassSelection.parts[0].partNumber,
+              ],
+            };
           }
         }
       });
+    },
+
+    // Loads the preselected values from the store.
+    LoadPreselectedValues() {
+      this.$nextTick(() => {
+        if (this.modelValue !== undefined) {
+          // Populate button-question model-value if parts data already exists in VueX
+          const alreadyPopulatedPartsData =
+            this.$store.getters.lineItems.glassParts;
+
+          Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+            const partNumber = alreadyPopulatedPartsData[key].partNumber;
+            const tintColor = alreadyPopulatedPartsData[key].color;
+
+            Object.keys(this.modelValue).forEach((key) => {
+              if (this.modelValue[key][0] === partNumber) {
+                this.selectedTint[tintColor] = {
+                  buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                  checkValue: "",
+                  value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                };
               }
+            });
+          });
+        }
+      });
+    },
   },
 };
 </script>

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

@@ -6,13 +6,7 @@
     <div class="container-fluid prevent-squish my-5">
         <div class="row">
             <div class="col">
-          <alert
+                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
-            class="rounded border-0 shadow-sm"
-            alertClass="alert-warning"
-            :alertHeadline="alertWidgetData.headline"
-            :alertCopy="alertWidgetData.copy"
-            :isDismissible="false"
-          />
             </div>
         </div>
     </div>
@@ -23,19 +17,9 @@
             <hr v-if="i > 0" />
         </div>
 
-      <glassPartQuestion
+        <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
-        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
-        :glassLocation="item.glassLocation"
-        :glassName="item.glassName"
-        :colorAnswers="item.colorAnswers"
-      />
     </div>
-    <funnelFooter
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-      ref="funnelFooter"
-      @back-clicked="backButtonAction"
-      @ForwardClicked="forwardButtonAction"
-    />
 </div>
 </template>
 
@@ -48,10 +32,18 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
 // Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
-import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+} from "@/helpers/cms-content-helper";
-import { storeMutations } from "@/constants/store-mutations";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
+import {
+    fmgPageValues
+} from "@/router/router-constants/fmgPage-values";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
 import store from "@/store";
 
 export default {
@@ -60,12 +52,10 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
         // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [{
-      {
             resultKey: "cmsContent",
             promise: cmsContentPromise,
-      },
+        }, ];
-    ];
         const resultMap = await settleAllPromises(promiseResultMap);
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
@@ -117,25 +107,10 @@ export default {
     },
     computed: {
         PartsForQuestions() {
-      const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+            const partsData = this.PartsFromApi;
-      const alreadyPopulatedPartsData =
-        this.$store.getters.lineItems.glassParts === null
-          ? {}
-          : this.$store.getters.lineItems.glassParts;
 
             // Map API result data, to vehicle-parts data structure
             const mappedData = 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) => {
-          const partNumber = alreadyPopulatedPartsData[key].partNumber;
-          g.parts.forEach((p) => {
-            if (p.partNumber === partNumber) {
-              this.glassParts[g.glassLocation + "-" + g.glassName] = {
-                [g.glassLocation]: [partNumber],
-              };
-            }
-          });
-        });
 
                 return {
                     glassName: g.glassName,
@@ -143,13 +118,10 @@ export default {
                     colorAnswers: g.parts.reduce((arr, p) => {
                         arr.push({
                             ColorAnswerText: p.color,
-              FeatureAnswers: [
+                            FeatureAnswers: [{
-                {
+                                FeatureAnswerText: p.description === "" ? p.color : p.description,
-                  FeatureAnswerText:
-                    p.description === "" ? p.color : p.description,
                                 PartNumber: p.partNumber,
-                },
+                            }, ],
-              ],
                         });
                         return arr;
                     }, []),
@@ -225,6 +197,35 @@ export default {
                 this.$route
             );
         },
+
+        // Nothing here to reset, the previous pages will setting parts correctly for here.
+        resetDependentState() {
+
         },
+
+        LoadInitialPartsData() {
+            const partsData = this.PartsFromApi;
+            const 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) => {
+                    const partNumber = alreadyPopulatedPartsData[key].partNumber;
+                    g.parts.forEach((p) => {
+                        if (p.partNumber === partNumber) {
+                            this.glassParts[g.glassLocation + "-" + g.glassName] = {
+                                [g.glassLocation]: [partNumber],
+                            };
+                        }
+                    });
+                });
+            });
+        }
+    },
+    mounted(){
+      this.LoadInitialPartsData();
+    }
 };
 </script>

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

@@ -2,7 +2,11 @@
   <div :class="'col' + colLength">
     <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+      :class="[
+        isWide ? 'horizontal' : '',
+        errors.length > 0 ? 'has-error' : '',
+        hasError ? 'has-error' : '',
+      ]"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -18,7 +22,8 @@
       <label
         :for="buttonID"
         class="d-flex w-100 align-items-center px-2 h-100"
-        :class="getLabelClasses" tabindex="-1"
+        :class="getLabelClasses"
+        tabindex="-1"
       >
         <img
           :id="buttonImageId"
@@ -33,7 +38,10 @@
         >
           {{ buttonLabel }}
         </p>
-        <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
+        <p
+          v-if="buttonLabelSubCopy && !isWide"
+          class="fs-7 m-0 order-4 sub-copy"
+        >
           {{ buttonLabelSubCopy }}
         </p>
         <div v-if="isWide" class="order-2">
@@ -70,18 +78,30 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
+    modelValue: Object,
     hasError: Boolean,
   },
   data() {
     return {
       checkValue: Boolean,
-    }
+    };
   },
   created() {
     if (Array.isArray(this.selectedValues)) {
-      this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
+      this.checkValue = this.isMultiSelect
+        ? this.selectedValues.includes(this.value)
+        : this.selectedValues[0];
     }
   },
+  watch: {
+    // Changing this will impact pre-selection data loads on vehicle-parts.
+    // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
+    modelValue(newVal) {
+      if (newVal !== undefined) {
+        this.checkValue = newVal.value;
+      }
+    },
+  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -97,22 +117,25 @@ export default {
   },
   methods: {
     handleCheckChange(newValue, oldValue) {
-      const isInitialization = typeof(oldValue) === 'function';
+      const isInitialization = typeof oldValue === "function";
       if (!isInitialization) {
-        const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
+        const emitEvent = {
-        this.$emit('isCheckedChanged', emitEvent);
+          checkValue: this.checkValue,
-        this.$emit('update:modelValue', emitEvent);
+          value: this.value.toString(),
-      }
+          buttonId: this.buttonID.toString(),
+        };
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
       }
     },
+  },
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
     const {
       value: inputValue,
       handleChange,
       errors,
-    } = useField(props.groupName, props.validationRules,
+    } = useField(props.groupName, props.validationRules, {
-    {
       type: inputType,
       checkedValue: props.value,
     });
@@ -127,10 +150,12 @@ export default {
 <style lang="scss">
 .list-card {
   border: 1px solid $gray-500;
+
   &.invalid {
     //Red border if invalid
     border: 1px solid $red;
   }
+
   img {
     // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
     height: auto;
@@ -138,50 +163,61 @@ export default {
     margin-bottom: 3rem;
     max-width: 100%;
   }
+
   &:hover {
     @include media-breakpoint-up(sm) {
       box-shadow: 0px 0px 0px 4px $blue-300;
       border: 1px solid transparent;
     }
   }
+
   input[type="checkbox"],
   input[type="radio"] {
     opacity: 0;
     width: 0;
     height: 0;
+
     + label {
       display: block;
       position: relative;
+
       &:hover {
         cursor: pointer;
       }
+
       p {
         color: $gray-600;
         text-align: center;
+
         &.sub-copy {
           color: $gray-550;
         }
       }
     }
+
     &:focus + label {
       box-shadow: 0 0 0 2.5px $blue;
       border-radius: 0.5rem;
     }
+
     &:checked + label {
       background: $blue-100;
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+
     &:checked + label {
       p {
         color: $black;
         font-weight: 500;
       }
+
       .sub-copy {
         color: $gray-600;
         font-weight: 400;
       }
     }
+
     + label::before {
       content: "";
       position: absolute;
@@ -197,15 +233,19 @@ export default {
       flex-shrink: 0;
       color: $gray-600;
     }
+
     + label.checkboxTop::before {
       margin: -1.25rem 0.5rem 0 0 !important;
     }
+
     + label.checkboxTop::after {
       margin: -1.5rem 0.5rem 0 0 !important;
     }
+
     &:checked + label::before {
       background: $blue;
     }
+
     &:checked + label::after {
       content: "";
       position: absolute;
@@ -217,26 +257,31 @@ export default {
       transform: rotate(-45deg);
     }
   }
+
   input[type="radio"] {
     + label::before {
       content: "";
       display: none;
     }
+
     + label::after {
       content: "";
       display: none;
     }
+
     + label {
       img {
         margin-bottom: 0;
       }
     }
   }
+
   &.horizontal {
     img {
       margin-bottom: 0;
       width: 5.5rem;
     }
+
     input[type="checkbox"],
     input[type="radio"] {
       + label::before {
@@ -245,30 +290,37 @@ export default {
         margin: 0 0.5rem 0 0;
         order: 1;
       }
+
       &:checked + label::after {
         content: "";
         margin: -0.25rem 0 0 0;
         left: 0.875rem;
       }
+
       &:checked + label {
         p {
           color: $black;
           font-weight: 500;
         }
+
         .sub-copy {
           color: $gray-600;
           font-weight: 400;
         }
       }
+
       + label {
         min-height: 48px;
         color: $gray-600;
+
         img {
           margin-bottom: 0;
         }
+
         p {
           color: $gray-600;
           text-align: left;
+
           &.sub-copy {
             color: $gray-550;
           }