Integrated CMS, refactor

src/constants/dynamictext-mapper.js

@@ -3,7 +3,7 @@
 // Please use lowercase only so that we don't have to worry about case sensitivity.
 
 const customMappings = {
-    glassname: [
+    formattedglassname: [
         { key: 'Windshield Single', transformedValue: 'windshield' },
         { key: 'Windshield Driver', transformedValue: 'driver side split windshield' },
         { key: 'Windshield Passenger', transformedValue: 'passenger side split windshield' },

src/constants/store-actions.js

@@ -11,6 +11,7 @@ const storeActions = {
   GET_EVOX_IMAGE: "getEvoxImage",
   LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
   LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
+  GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",

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

@@ -17,14 +17,13 @@
           " :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
         </div>
     </div>
-
     <transition name="fade" mode="out-in">
         <div v-if="
         selectedTint[name] != undefined &&
         selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
       " class="row my-2" aria-live="polite">
             <div class="col">
-                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" v-on:update:modelValue="EmitPartSelection($event)" />
+                <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
             </div>
         </div>
     </transition>
@@ -49,10 +48,8 @@ export default {
     inheritAttrs: false,
     data() {
         return {
-            glassColorQuestion: String,
+            glassColorQuestion: '',
-            glassFeatureQuestion: String,
+            glassFeatureQuestion: '',
-            featureListData: Object,
-            selectedPart: {}, // v-model for the radio button selections
             selectedTint: {}, // v-model for the list card selections
         };
     },
@@ -60,6 +57,7 @@ export default {
         glassName: String,
         glassLocation: String,
         colorAnswers: Array,
+        modelValue: Object
     },
     components: {
         listCard,
@@ -67,24 +65,21 @@ export default {
     },
     computed: {
         colorQuestionText() {
-            return getCustomTransformValue(
+            return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
-                "Select your current {custom:glassName} color",
-                `${this.glassLocation} ${this.glassName}`
-            );
         },
-    },
+        selectedPart: {
-    mounted() {
+            get: function () {
-        this.featureListData = this.createFeatureListMap(this.colorAnswers);
+                return this.modelValue;
-    },
+            },
-    methods: {
+            set: function (newValue) {
-        initializeComponent(cmsContent, initialData) {
+                this.$emit("update:modelValue", newValue);
-            console.log("Im here");
+            }
         },
 
         // Creates a map of the feature list data in the correct Name/Value
         // format for the button-question component.
-        createFeatureListMap(colorAnswers) {
+        featureListData() {
-            const tintMapByColor = colorAnswers.reduce((arr, item) => {
+            const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
                 // Create the key
                 const itemColor = item.ColorAnswerText;
                 arr[itemColor] = arr[itemColor] || [];
@@ -104,6 +99,12 @@ export default {
             }, {});
 
             return tintMapByColor;
+        }
+    },
+    methods: {
+        initializeComponent(cmsContent, initialData) {
+            this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
+            this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
         },
 
         // Gets tint images based on the glass type, and tint name.
@@ -123,12 +124,6 @@ export default {
             this.selectedTint = {};
             this.selectedPart = {};
         },
-
-        // Emits selected part back to the parent vehicle-parts component
-        // so it can have a object that contains all selected parts.
-        EmitPartSelection(event) {
-            this.$emit("update:modelValue", event);
-        },
     },
 };
 </script>

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

@@ -1,11 +1,12 @@
 <template>
 <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
-    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" />
 
     <div v-for="(item, i) in Parts" :key="i">
         <partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+        <br />
     </div>
 
     <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
@@ -27,11 +28,6 @@ import {
 import {
     settleAllPromises
 } from "@/helpers/layout-helper";
-import {
-    storeActions
-} from "@/constants/store-actions";
-import store from "@/store";
-import baseMixin from "@/mixins/base-mixin";
 
 export default {
     name: "vehicle-parts",
@@ -42,14 +38,13 @@ export default {
         // Settle promises and get results
         const promiseResultMap = [{
             resultKey: "cmsContent",
-            promise: cmsContentPromise,
+            promise: cmsContentPromise
         }];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
-
             vm.$refs.funnelHeader.initializeComponent(
                 resultMap.cmsContent.FunnelHeaderWidget
             );
@@ -64,98 +59,102 @@ export default {
             );
 
             // Part Question dynamic component
-            Object.keys(vm.$refs).filter(r => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined).forEach(c => vm.$refs[c][0].initializeComponent());
+            Object.keys(vm.$refs)
-
+                .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
-
+                .forEach((c) => vm.$refs[c][0].initializeComponent({
+                    ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                    FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
+                }));
         });
     },
     data() {
         return {
-            Parts: [{
-                    glassLocation: 'Rear',
-                    glassName: 'Stationary',
-                    colorAnswers: [{
-                            ColorAnswerText: 'Green Tint',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Backglass - heated glass, solar, 1 hole',
-                                PartNumber: 'test-backglass-green-tint-1-hole',
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Green Tint',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Backglass - heated glass, solar, 2 hole',
-                                PartNumber: 'test-backglass-green-tint-2-hole'
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Backglass - heated glass, solar, 3 hole',
-                                PartNumber: 'test-backglass-gray-tint-privacy-3-hole'
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Backglass - heated glass, solar, 4 hole',
-                                PartNumber: 'test-backglass-blue-tint-4-hole'
-                            }]
-                        },
-                    ]
-                },
-                {
-                    glassLocation: 'Windshield',
-                    glassName: 'Single',
-                    colorAnswers: [{
-                            ColorAnswerText: 'Blue Tint',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Windshield - heated glass, solar, 1 hole',
-                                PartNumber: 'test-windshield-blue-tint-1-hole'
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Blue Tint',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Windshield -heated glass, solar, 2 hole',
-                                PartNumber: 'test-blue-tint-windshield-2-hole'
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Windshield -heated glass, solar, 3 hole',
-                                PartNumber: 'test-gray-tint-privacy-windshield-3-hole'
-                            }]
-                        },
-                        {
-                            ColorAnswerText: 'Gray Tint Privacy',
-                            FeatureAnswers: [{
-                                FeatureAnswerText: 'Windshield -heated glass, solar, 4 hole',
-                                PartNumber: 'test-brown-tint-windshield-4-hole'
-                            }]
-                        },
-                    ]
-                },
-            ],
             glassParts: {},
-            refPrefix: 'partQuestion'
+            refPrefix: "partQuestion",
-        }
+        };
     },
     components: {
         partQuestion,
         funnelHeader,
         vehicleBanner,
         funnelSubHeader,
-        funnelFooter
+        funnelFooter,
     },
-    mounted() {
+    computed: {
-        console.log("mounted!");
+        Parts() {
+            return [{
+                        glassLocation: "Rear",
+                        glassName: "Stationary",
+                        colorAnswers: [{
+                                ColorAnswerText: "Green Tint",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Backglass - heated glass, solar, 1 hole",
+                                    PartNumber: "test-backglass-green-tint-1-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Green Tint",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
+                                    PartNumber: "test-backglass-green-tint-2-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Gray Tint Privacy",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Backglass - heated glass, solar, 3 hole",
+                                    PartNumber: "test-backglass-gray-tint-privacy-3-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Gray Tint Privacy",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Backglass - heated glass, solar, 4 hole",
+                                    PartNumber: "test-backglass-blue-tint-4-hole",
+                                }, ],
+                            },
+                        ],
+                    },
+                    {
+                        glassLocation: "Windshield",
+                        glassName: "Single",
+                        colorAnswers: [{
+                                ColorAnswerText: "Blue Tint",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Windshield - heated glass, solar, 1 hole",
+                                    PartNumber: "test-windshield-blue-tint-1-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Blue Tint",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Windshield -heated glass, solar, 2 hole",
+                                    PartNumber: "test-blue-tint-windshield-2-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Gray Tint Privacy",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Windshield -heated glass, solar, 3 hole",
+                                    PartNumber: "test-gray-tint-privacy-windshield-3-hole",
+                                }, ],
+                            },
+                            {
+                                ColorAnswerText: "Gray Tint Privacy",
+                                FeatureAnswers: [{
+                                    FeatureAnswerText: "Windshield -heated glass, solar, 4 hole",
+                                    PartNumber: "test-brown-tint-windshield-4-hole",
+                                }, ],
+                            },
+                        ],
+                    },
+                ]
+        }
     },
     methods: {
         arePagePrerequisitesValid() {
             return true;
         },
-    }
+    },
-}
+};
 </script>

src/store/index.js

@@ -239,6 +239,20 @@ export const actions = {
       payload: {},
     });
   },
+
+  // Parts API Actions
+  getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetRouteInfo.method,
+      endpoint: endpoints.GetRouteInfo.url,
+      payload: {
+        carId: carId,
+        glass: glassArray,
+        zip: zipCode,
+        vin: vin
+      },
+    });
+  }
 }
 
 export default createStore({