From 8e4f806b711292ae81059558e8e17a9baa49bf61 Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Tue, 5 Jul 2022 08:31:56 -0400
Subject: [PATCH] removed comment

---
 src/layouts/vehicle-parts/vehicle-parts.vue | 479 ++++++++++----------
 src/mixins/vin-pages-mixin.spec.js          |   1 -
 2 files changed, 242 insertions(+), 238 deletions(-)

diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 1e423f69f..ce5727ce3 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,260 +1,265 @@
 <template>
-	<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-		<div class="page-container-grouped-styles vehicle-parts">
-			<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
-			<vehicleBanner
-				ref="vehicleBanner"
-				cmsWidgetName="VehicleBannerWidget"
-				:displayGenericVehicleImage="false"
-			/>
-			<funnelSubHeader
-				ref="funnelSubHeader"
-				cmsWidgetName="FunnelSubHeaderWidget"
-			/>
-			<div class="fade-on-route-transition sub-container make-tall">
-				<div class="prevent-squish my-5">
-					<div class="row">
-						<div class="col">
-							<alert
-								class="rounded border-0 shadow-sm"
-								alertClass="alert-warning"
-								cmsWidgetName="AlertWidget"
-								:isDismissible="false"
-							/>
-						</div>
-					</div>
-				</div>
-				<div v-for="(item, i) in PartsOrQuestions" :key="i">
-					<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-					<hr v-if="i > 0" />
-					<glassPartQuestion
-						:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-						v-model="glassParts[item.glassLocation + '-' + item.glassName]"
-						:glassLocation="item.glassLocation"
-						:glassName="item.glassName"
-						:colorAnswers="item.colorAnswers"
-						:alreadyPopulatedPartsData="alreadyPopulatedPartsData"
-					/>
-				</div>
-				<funnelFooter
-					cmsWidgetName="FunnelFooterWidget"
-					ref="funnelFooter"
-					:isForwardActionDisabled="isForwardActionDisabled"
-					@back-clicked="backButtonAction"
-					@ForwardClicked="forwardButtonAction"
-				/>
-			</div>
-		</div>
-	</Form>
+  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+    <div class="page-container-grouped-styles vehicle-parts">
+      <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner
+        ref="vehicleBanner"
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
+      <funnelSubHeader
+        ref="funnelSubHeader"
+        cmsWidgetName="FunnelSubHeaderWidget"
+      />
+      <div class="fade-on-route-transition sub-container make-tall">
+        <div class="prevent-squish my-5">
+          <div class="row">
+            <div class="col">
+              <alert
+                class="rounded border-0 shadow-sm"
+                alertClass="alert-warning"
+                cmsWidgetName="AlertWidget"
+                :isDismissible="false"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-for="(item, i) in PartsOrQuestions" :key="i">
+          <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+          <hr v-if="i > 0" />
+          <glassPartQuestion
+            :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+            v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+            :glassLocation="item.glassLocation"
+            :glassName="item.glassName"
+            :colorAnswers="item.colorAnswers"
+            :alreadyPopulatedPartsData="alreadyPopulatedPartsData"
+          />
+        </div>
+        <funnelFooter
+          cmsWidgetName="FunnelFooterWidget"
+          ref="funnelFooter"
+          :isForwardActionDisabled="isForwardActionDisabled"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
-// Components
-import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-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";
-import alert from "@/ux-components/alert/alert";
-// Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import store from "@/store";
-import { Form } from "vee-validate";
-import { storeActions } from "@/constants/store-actions";
+  // Components
+  import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-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";
+  import alert from "@/ux-components/alert/alert";
+  // Supporting Files
+  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+  import { settleAllPromises } from "@/helpers/layout-helper";
+  import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+  import store from "@/store";
+  import { Form } from "vee-validate";
+  import { storeActions } from "@/constants/store-actions";
 
-export default {
-	name: "vehicle-parts",
-	async beforeRouteEnter(to, from, next) {
-		// Call APIs
-		const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-		// Settle promises and get results
-		const promiseResultMap = [
-			{
-				resultKey: "cmsContent",
-				promise: cmsContentPromise,
-			},
-		];
-		const resultMap = await settleAllPromises(promiseResultMap);
-		// Call the "next" function to complete the transition to this page.
-		next((vm) => {
-			vm.setCmsContent(resultMap.cmsContent);
+  export default {
+    name: "vehicle-parts",
+    async beforeRouteEnter(to, from, next) {
+      // Call APIs
+      const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+      // Settle promises and get results
+      const promiseResultMap = [
+        {
+          resultKey: "cmsContent",
+          promise: cmsContentPromise,
+        },
+      ];
+      const resultMap = await settleAllPromises(promiseResultMap);
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
 
-			// Glass 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({
-						ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-						FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-					})
-				);
-		});
-	},
-	data() {
-		return {
-			glassParts: {},
-			alertWidgetData: Object,
-			alreadyPopulatedPartsData: {},
-		};
-	},
-	components: {
-		Form,
-		glassPartQuestion,
-		funnelHeader,
-		vehicleBanner,
-		funnelSubHeader,
-		funnelFooter,
-		alert,
-	},
-	computed: {
-		isForwardActionDisabled() {
-			return (
-				Object.keys(this.matchedParts).length !==
-				this.PartsFromApi.partsOrQuestions.length
-			);
-		},
-		matchedParts() {
-			const matchedParts = [];
+        // Glass 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({
+              ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+              FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+            })
+          );
+      });
+    },
+    data() {
+      return {
+        glassParts: {},
+        alertWidgetData: Object,
+        alreadyPopulatedPartsData: {},
+      };
+    },
+    components: {
+      Form,
+      glassPartQuestion,
+      funnelHeader,
+      vehicleBanner,
+      funnelSubHeader,
+      funnelFooter,
+      alert,
+    },
+    computed: {
+      isForwardActionDisabled() {
+        return (
+          Object.keys(this.matchedParts).length !==
+          this.PartsFromApi.partsOrQuestions.length
+        );
+      },
+      matchedParts() {
+        const matchedParts = [];
 
-			// Match them to the parts from the API.
-			this.PartsFromApi.partsOrQuestions.forEach((part) => {
-				const selectedPartForGlassLocationAndName =
-					this.glassParts[`${part.glassLocation}-${part.glassName}`];
-				const selectedPartData = part.parts.filter(
-					(part) =>
-						selectedPartForGlassLocationAndName &&
-						part.partNumber == selectedPartForGlassLocationAndName?.partNumber
-				)[0];
+        // Match them to the parts from the API.
+        this.PartsFromApi.partsOrQuestions.forEach((part) => {
+          const selectedPartForGlassLocationAndName =
+            this.glassParts[`${part.glassLocation}-${part.glassName}`];
+          const selectedPartData = part.parts.filter(
+            (part) =>
+              selectedPartForGlassLocationAndName &&
+              part.partNumber == selectedPartForGlassLocationAndName?.partNumber
+          )[0];
 
-				if (selectedPartData) matchedParts.push(selectedPartData);
-			});
+          if (selectedPartData) matchedParts.push(selectedPartData);
+        });
 
-			return matchedParts;
-		},
-		PartsOrQuestions() {
-			const partsData = this.PartsFromApi;
+        return matchedParts;
+      },
+      PartsOrQuestions() {
+        const partsData = this.PartsFromApi;
 
-			// Map API result data, to vehicle-parts data structure
-			const mappedData = partsData.partsOrQuestions.map((g) => {
-				return {
-					glassName: g.glassName,
-					glassLocation: g.glassLocation,
-					colorAnswers: g.parts.reduce((arr, p) => {
-						arr.push({
-							ColorAnswerText: p.color,
-							FeatureAnswers: [
-								{
-									FeatureAnswerText:
-										p.description === "" ? p.color : p.description,
-									PartNumber: p.partNumber,
-								},
-							],
-						});
-						return arr;
-					}, []),
-				};
-			});
+        // Map API result data, to vehicle-parts data structure
+        const mappedData = partsData.partsOrQuestions.map((g) => {
+          return {
+            glassName: g.glassName,
+            glassLocation: g.glassLocation,
+            colorAnswers: g.parts.reduce((arr, p) => {
+              arr.push({
+                ColorAnswerText: p.color,
+                FeatureAnswers: [
+                  {
+                    FeatureAnswerText:
+                      p.description === "" ? p.color : p.description,
+                    PartNumber: p.partNumber,
+                  },
+                ],
+              });
+              return arr;
+            }, []),
+          };
+        });
 
-			return mappedData;
-		},
+        return mappedData;
+      },
 
-		PartsFromApi() {
-			return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-		},
+      PartsFromApi() {
+        return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+      },
 
-		RefPrefix() {
-			return "partQuestion";
-		},
-	},
-	methods: {
-		arePagePrerequisitesValid() {
-			// Check if isRepair is populated and if the pageData we need is here (Parts data)
-			if (
-				store.getters.damage.isRepair != null &&
-				Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
-					.length !== 0
-			) {
-				return true;
-			}
+      RefPrefix() {
+        return "partQuestion";
+      },
+    },
+    methods: {
+      arePagePrerequisitesValid() {
+        // Check if isRepair is populated and if the pageData we need is here (Parts data)
+        if (
+          store.getters.damage.isRepair != null &&
+          Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
+            .length !== 0
+        ) {
+          return true;
+        }
 
-			return false;
-		},
-		backButtonAction() {
-			this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-		},
-		async forwardButtonAction() {
-			const selectedGlassPartNumbers = [];
-			const matchedParts = [];
+        return false;
+      },
+      backButtonAction() {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_BACK,
+          this.$route
+        );
+      },
+      async forwardButtonAction() {
+        const selectedGlassPartNumbers = [];
+        const matchedParts = [];
 
-			// Compile all selected parts from the page.
-			for (let [key, value] of Object.entries(this.glassParts)) {
-				for (let [glassKey, glassValue] of Object.entries(value)) {
-					selectedGlassPartNumbers.push(glassValue[0]);
-				}
-			}
+        // Compile all selected parts from the page.
+        for (let [key, value] of Object.entries(this.glassParts)) {
+          for (let [glassKey, glassValue] of Object.entries(value)) {
+            selectedGlassPartNumbers.push(glassValue[0]);
+          }
+        }
 
-			// Match them to the parts from the API.
-			for (let [key, value] of Object.entries(
-				this.PartsFromApi.partsOrQuestions
-			)) {
-				for (let [partKey, partValue] of Object.entries(value.parts)) {
-					const currentPart =
-						this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-					const isMatched = selectedGlassPartNumbers.some(
-						(p) => p === currentPart.partNumber
-					);
+        // Match them to the parts from the API.
+        for (let [key, value] of Object.entries(
+          this.PartsFromApi.partsOrQuestions
+        )) {
+          for (let [partKey, partValue] of Object.entries(value.parts)) {
+            const currentPart =
+              this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+            const isMatched = selectedGlassPartNumbers.some(
+              (p) => p === currentPart.partNumber
+            );
 
-					if (isMatched) {
-						matchedParts.push(currentPart);
-					}
-				}
-			}
+            if (isMatched) {
+              matchedParts.push(currentPart);
+            }
+          }
+        }
 
-			// If no parts could be matched, throw an error.
-			if (this.isForwardActionDisabled) {
-				this.$refs.funnelFooter.removeLoader();
-				throw new Error("Could not match any parts to the selected parts");
-			}
+        // If no parts could be matched, throw an error.
+        if (this.isForwardActionDisabled) {
+          this.$refs.funnelFooter.removeLoader();
+          throw new Error("Could not match any parts to the selected parts");
+        }
 
-			// Save parts to the store.
-			await this.dispatchStoreAction(
-				storeActions.SAVE_GLASS_PARTS,
-				matchedParts
-			);
+        // Save parts to the store.
+        await this.dispatchStoreAction(
+          storeActions.SAVE_GLASS_PARTS,
+          matchedParts
+        );
 
-			// Navigate to the next page.
-			this.$router.navigate(
-				this.navigationScenarios.SELECTED_PARTS,
-				this.$route
-			);
-		},
+        // Navigate to the next page.
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_PARTS,
+          this.$route
+        );
+      },
 
-		LoadInitialPartsData() {
-			const partsData = this.PartsFromApi;
-			const alreadyPopulatedPartsData =
-				this.$store.getters.lineItems.glassParts === null
-					? {}
-					: this.$store.getters.lineItems.glassParts;
+      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();
-	},
-};
+        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>
diff --git a/src/mixins/vin-pages-mixin.spec.js b/src/mixins/vin-pages-mixin.spec.js
index 7ffcab0ee..62d03971b 100644
--- a/src/mixins/vin-pages-mixin.spec.js
+++ b/src/mixins/vin-pages-mixin.spec.js
@@ -864,7 +864,6 @@ describe("vin-pages-mixin", () => {
                     partsOrQuestions: partsOrQuestions
                 });
 
-                // wrapper.vm.navigateToHeritageFunnel = jest.fn();
                 store.commit = jest.fn();
 
                 // Act