Populate already selected options

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

@@ -1,7 +1,7 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
   <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
-    <div v-if="questionText" class="mt-5 mb-4 d-flex">
+    <div v-if="questionText" :class="[this.buttonType === 'radio' ? ['mt-2', 'mb-0'] : ['mt-5', 'mb-4'], 'd-flex']">
       <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">

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

@@ -27,7 +27,6 @@
         </div>
     </transition>
 </div>
-
 </template>
 
 <script>
@@ -59,6 +58,27 @@ export default {
         colorAnswers: Array,
         modelValue: Object
     },
+    mounted() {
+        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: ''
+                        };
+                    }
+                });
+            });
+        }
+    },
     components: {
         listCard,
         buttonQuestion,
@@ -67,7 +87,7 @@ export default {
         colorQuestionText() {
             return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
         },
-        
+
         selectedPart: {
             get: function () {
                 return this.modelValue;
@@ -98,7 +118,7 @@ export default {
 
                 return arr;
             }, {});
-            
+
             return tintMapByColor;
         }
     },

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

@@ -110,9 +110,23 @@ export default {
     computed: {
         PartsForQuestions() {
             const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+            const alreadyPopulatedPartsData = 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,
                     glassLocation: g.glassLocation,

src/store/index.js

@@ -26,8 +26,8 @@ export const state = {
       glassToReplace: null,
     },
     lineItems:{
-      glassParts: null,
-      otherParts: null
+      glassParts: {},
+      otherParts: {}
     }
   },
   applicationUser: {