From cf59f376be1244664cfcbe394e0fac890665d2ec Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 22 Feb 2022 16:10:44 -0500
Subject: [PATCH] vehicle-parts components

---
 .../part-question/part-question.vue           |  2 -
 src/layouts/vehicle-parts/vehicle-parts.vue   | 58 +++++++++++--------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue
index 5501d9a96..3d10bdfe1 100644
--- a/src/layouts/vehicle-parts/part-question/part-question.vue
+++ b/src/layouts/vehicle-parts/part-question/part-question.vue
@@ -8,7 +8,6 @@
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
     <div class="row my-2">
         <div class="col">
-            {{ selectedTint }}
             <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
             require(`@/assets/img/tints/${getTintSourceImage(
               glassLocation,
@@ -22,7 +21,6 @@
         selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
       " class="row my-2">
         <div class="col">
-            {{ selectedPart }}
             <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)" />
         </div>
     </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index edb21d4d7..703c9789c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,18 +1,26 @@
 <template>
-<div class="container-fluid shadow rounded-3 p-0 position-relative">
+<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
     <funnelSubHeader ref="funnelSubHeader" />
-    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
-    {{ glassParts }}
+
     <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" />
     </div>
+
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
 </div>
 </template>
 
 <script>
+// Components
 import partQuestion from "@/layouts/vehicle-parts/part-question/part-question";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+
+// Supporting Files
 import {
     fetchCmsContentForPage
 } from "@/helpers/cms-content-helper";
@@ -42,31 +50,27 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
 
-            // vm.$refs.funnelHeader.initializeComponent(
-            //     resultMap.cmsContent.FunnelHeaderWidget
-            // );
-
-            // vm.$refs.vehicleBanner.initializeComponent(
-            //     resultMap.cmsContent.VehicleBannerWidget
-            // );
-            // vm.$refs.funnelSubHeader.initializeComponent(
-            //     resultMap.cmsContent.FunnelSubHeaderWidget
-            // );
-
-            // vm.$refs.funnelFooter.initializeComponent(
-            //     resultMap.cmsContent.FunnelFooterWidget
-            // );
-
+            vm.$refs.funnelHeader.initializeComponent(
+                resultMap.cmsContent.FunnelHeaderWidget
+            );
+            vm.$refs.vehicleBanner.initializeComponent(
+                resultMap.cmsContent.VehicleBannerWidget
+            );
+            vm.$refs.funnelSubHeader.initializeComponent(
+                resultMap.cmsContent.FunnelSubHeaderWidget
+            );
+            vm.$refs.funnelFooter.initializeComponent(
+                resultMap.cmsContent.FunnelFooterWidget
+            );
             // Part Question dynamic component
 
-    
-            for (const key of Object.keys(vm.$refs)) {
-                if (key.includes(vm.refPrefix) && vm.$refs[key][0] !== undefined) {
-                    const partQuestionComp = vm.$refs[key][0];
+            // for (const key of Object.keys(vm.$refs)) {
+            //     if (key.includes(vm.refPrefix) && vm.$refs[key][0] !== undefined) {
+            //         const partQuestionComp = vm.$refs[key][0];
 
-                    partQuestionComp.initializeComponent()
-                }
-            }
+            //         partQuestionComp.initializeComponent()
+            //     }
+            // }
 
         });
     },
@@ -145,6 +149,10 @@ export default {
     },
     components: {
         partQuestion,
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        funnelFooter
     },
     mounted() {
         console.log("mounted!");