More changes

src/constants/tint-mapper.js

@@ -1,72 +1,72 @@
 const tintMap = {
     backglass: [
         // Blue Shade
-        { name: "blue shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BlueShade-BlueTint.svg" },
-        { name: "blue shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BlueShade-BrownTint.svg" },
-        { name: "blue shade, gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BlueShade-GrayTint.svg" },
-        { name: "blue shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BlueShade-GreenTint.svg" },
-        { name: "blue shade", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BlueShade-NoTint.svg" },
+        { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
+        { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
+        { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
+        { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
+        { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
 
         // Brown Shade
-        { name: "brown shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-BrownShade-BrownTint.svg" },
+        { name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
 
         // Gray Shade
-        { name: "gray shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GrayShade-BlueTint.svg" },
-        { name: "gray shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GrayShade-BrownTint.svg" },
-        { name: "gray shade, gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GrayShade-GrayTint.svg" },
-        { name: "gray shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GrayShade-GreenTint.svg" },
+        { name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
+        { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
+        { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
+        { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
 
         // Green Shade
-        { name: "green shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GreenShade-BlueTint.svg" },
-        { name: "green shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GreenShade-BrownTint.svg" },
-        { name: "green shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-GreenShade-GreenTint.svg" },
+        { name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
+        { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
+        { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
 
         // Tints Only
-        { name: "blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-BlueTint.svg" },
-        { name: "brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-BrownTint.svg" },
-        { name: "dark brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-DarkBrownTint.svg" },
-        { name: "dark gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-DarkGrayTint.svg" },
-        { name: "gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-GrayTint.svg" },
-        { name: "green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-GreenTint.svg" },
-        { name: "gray tint privacy", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-Privacy.svg" },
+        { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
+        { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
+        { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
+        { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
+        { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
+        { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
+        { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
 
         // No shade or tint
-        { name: "no shade, no tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/BackGlass-NoShade-NoTint.svg" }, // ???
+        { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
     ],
 
     windhshield: [
         // Blue Shade
-        { name: "blue shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BlueShade-BlueTint.svg" },
-        { name: "blue shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BlueShade-BrownTint.svg" },
-        { name: "blue shade, gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BlueShade-GrayTint.svg" },
-        { name: "blue shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BlueShade-GreenTint.svg" },
-        { name: "blue shade", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BlueShade-NoTint.svg" },
+        { name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
+        { name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
+        { name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
+        { name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
+        { name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
 
         // Brown Shade
-        { name: "brown shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-BrownShade-BrownTint.svg" },
+        { name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
 
         // Gray Shade
-        { name: "gray shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GrayShade-BlueTint.svg" },
-        { name: "gray shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GrayShade-BrownTint.svg" },
-        { name: "gray shade, gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GrayShade-GrayTint.svg" },
-        { name: "gray shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GrayShade-GreenTint.svg" },
+        { name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
+        { name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
+        { name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
+        { name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
 
         // Green Shade
-        { name: "green shade, blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GreenShade-BlueTint.svg" },
-        { name: "green shade, brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GreenShade-BrownTint.svg" },
-        { name: "green shade, green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-GreenShade-GreenTint.svg" },
+        { name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
+        { name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
+        { name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
 
         // Tints Only
-        { name: "blue tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-BlueTint.svg" },
-        { name: "brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-BrownTint.svg" },
-        { name: "dark brown tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-DarkBrownTint.svg" },
-        { name: "dark gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-DarkGrayTint.svg" },
-        { name: "gray tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-GrayTint.svg" },
-        { name: "green tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-GreenTint.svg" },
-        { name: "gray tint privacy", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-Privacy.svg" },
+        { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
+        { name: "brown tint", src: "Windshield-NoShade-BrownTint.svg" },
+        { name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" },
+        { name: "dark gray tint", src: "Windshield-NoShade-DarkGrayTint.svg" },
+        { name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" },
+        { name: "green tint", src: "Windshield-NoShade-GreenTint.svg" },
+        { name: "gray tint privacy", src: "Windshield-NoShade-Privacy.svg" },
 
         // No shade or tint
-        { name: "no shade, no tint", src: "@/layouts/vehicle-parts/part-question/assets/tints/Windshield-NoShade-NoTint.svg" }, // ???
+        { name: "no shade, no tint", src: "Windshield-NoShade-NoTint.svg" }, // ???
 
     ]
 }

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

@@ -1,9 +1,11 @@
 <template>
 <p>Select your current {{ colorQuestionText }} color:</p>
-<div v-for="(item, i) in colorAnswers" :key="i">
-    <listCard isRadio buttonImage="./assets/BackGlass-BlueTint-BlueShade.svg" :buttonLabel="item.ColorAnswerText" altText="" buttonID="sample-button" groupID="radio-demo-2" />
+<div aria-labelledby="test" role="radiogroup">
+    <div v-for="(value, name, index) in featureListData" :key="name">
+        <listCard isRadio :buttonImage="require(`@/assets/img/tints/${getTintImage(glassName, name)}`)" :buttonLabel="name" altText="" :buttonID="`${name-index}`" />
 
-    <buttonQuestion buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="testTest" textPosition="text-start" :loaderEnabled=false isRequired=true />
+        <buttonQuestion buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled=false isRequired=true :groupName="name" />
+    </div>
 </div>
 </template>
 
@@ -21,20 +23,6 @@ export default {
         return {
             glassColorQuestion: String,
             glassFeatureQuestion: String,
-            testTest: [
-                {
-                    // Computed to covert my data to name/text data,
-                    // look at answersToDisplay in damage-location-question.vue
-
-                    Name: "DB12209GTYN", // Backing value
-                    Text: "heated glass, solar, 1 hole", // Display to user
-                },
-
-                {
-                    Name: "Zzzzzz",
-                    Text: "AAAAAAA",
-                },
-            ]
         };
     },
     props: {
@@ -45,21 +33,49 @@ export default {
         listCard,
         buttonQuestion
     },
-    mounted() {
-        const s = getTintImage("Backglass", "Green Tint");
-
-        console.log("hi");
-    },
     computed: {
         colorQuestionText() {
             return "Backglass";
         },
+        featureListData() {
+            return this.createFeatureListMap(this.colorAnswers);
+        },
     },
     methods: {
         initializeComponent(cmsContent, initialData) {
             this.glassColorQuestion = cmsContent.ColorQuestion;
             this.glassFeatureQuestion = cmsContent.FeatureQuestion;
         },
+
+        createFeatureListMap(colorAnswers) {
+            const tintMapByColor = colorAnswers.reduce((arr, item) => {
+
+                // Create the key
+                const itemColor = item.ColorAnswerText;
+                arr[itemColor] = arr[itemColor] || [];
+
+                // Map the data to Name/Text object for ButtonQuestion
+                const mappedItem = item.FeatureAnswers.reduce((featureArr, item) => {
+                    featureArr["Text"] = item.FeatureAnswerText;
+                    featureArr["Name"] = item.PartNumber;
+
+                    return featureArr
+                }, {});
+
+                // Add onto the final object
+                arr[itemColor].push(mappedItem);
+
+                return arr;
+            }, {});
+
+            return tintMapByColor;
+        },
+
+        getTintImage(glassType, tintColor) {
+            const tintObject = getTintImage(glassType, tintColor);
+
+            return tintObject === undefined ? "" : tintObject.src;
+        }
     },
 };
 </script>

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

@@ -21,13 +21,27 @@ export default {
                             PartNumber: 'DB12209GTYN'
                         }]
                     },
+                    {
+                        ColorAnswerText: 'Green Tint',
+                        FeatureAnswers: [{
+                            FeatureAnswerText: 'heated glass, solar, 3 hole',
+                            PartNumber: 'DB12209XXXX'
+                        }]
+                    },
                     {
                         ColorAnswerText: 'Gray Tint Privacy',
                         FeatureAnswers: [{
                             FeatureAnswerText: 'heated glass, solar, 1 hole',
                             PartNumber: 'DB12209YPYN'
                         }]
-                    }
+                    },
+                    {
+                        ColorAnswerText: 'Gray Tint Privacy',
+                        FeatureAnswers: [{
+                            FeatureAnswerText: 'heated glass, solar, 5 hole',
+                            PartNumber: 'DB12209YZZZ'
+                        }]
+                    },
                 ]
             }]
         }