From d52b8d6577ebb6558599a226cb11b40bd605e6f1 Mon Sep 17 00:00:00 2001
From: brydon1 <michaela.brydon@safelite.com>
Date: Tue, 11 Jul 2023 14:40:31 -0400
Subject: [PATCH] Fixing display image bug

---
 .../policy-vehicles-question.vue              |  54 +--
 .../policy-vehicles/policy-vehicles.vue       | 318 +++++++++---------
 2 files changed, 182 insertions(+), 190 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
index 6d19b5da..c00a11a9 100644
--- a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue
@@ -1,47 +1,49 @@
 <template>
-    <buttonQuestion 
-    :questionText="questionText" 
+    <buttonQuestion
     ref="policyVehiclesQuestion"
-    buttonTypeString="listButton"
-    isOverflowScrollable    
-    :answers="answers"
     v-model="selectedVehicleVin"
+    :questionText="questionText"
+    buttonTypeString="listButton"
+    isOverflowScrollable
+    :answers="answers"
     isRequired
-    :validation-rules="validationRules" />
+    :validationRules="validationRules" />
 </template>
 <script>
-import buttonQuestion from "@/digital-components/button-question/button-question";
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+
 export default ({
-    name: "policy-vehicles-question",    
+    name: 'policy-vehicles-question',
     components: {
-        buttonQuestion,
+        buttonQuestion
     },
-    props:{
+    props: {
         vehicles: Array,
-        validationRules: String,  
-        modelValue: String,      
+        validationRules: String,
+        modelValue: String
     },
+    emits: ['update:modelValue'],
     computed: {
-      questionText() {
-            return this.getCmsContent("PolicyVehiclesQuestion", "QuestionText");
+        questionText() {
+            return this.getCmsContent('PolicyVehiclesQuestion', 'QuestionText');
         },
-        answers(){
-            const policyVehiclesAnswerfromCMS =  this.getCmsContent("PolicyVehiclesQuestion", "Answers");            
-            const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerfromCMS];
+        answers() {
+            const policyVehiclesAnswerFromCMS = this.getCmsContent('PolicyVehiclesQuestion', 'Answers');
+            const combinedVehicles = [...this.vehicles, ...policyVehiclesAnswerFromCMS];
             return combinedVehicles;
         },
         selectedVehicleVin: {
-            get: function () {
+            get() {
                 return this.modelValue;
             },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
-    },
-})
+            set(newValue) {
+                this.$emit('update:modelValue', newValue);
+            }
+        }
+    }
+});
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .question-text {
   margin-top: 1rem;
     & > span {
@@ -50,4 +52,4 @@ export default ({
         line-height: 2rem;
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 3466f5b9..d6cd1418 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -1,22 +1,35 @@
 <template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
+    <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget"/>
+                <siteHeader
+                    class="mb-2 header"
+                    cmsWidgetName="SiteHeaderWidget" />
                 <div class="select-car">
                     <div class="container-fluid pb-2 px-5">
                         <div class="row">
                             <div class="col">
                                 <div class="select-car-form rounded text-center">
-                                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="displayGeneric" class="mt-2 mb-4" />
-                                    <policyVehiclesQuestion 
-                                    class="px-4" 
-                                    cmsWidgetName="PolicyVehiclesQuestion" 
-                                    :vehicles="VehiclesForQuestions" 
-                                    validationRules="option-required"
-                                    v-model="selectedVehicleVin"
-                                    />
-                                    <siteFooter cmsWidgetName="SiteFooterWidget" ref="siteFooter" :isForwardActionDisabled="!meta.valid" @ForwardClicked="forwardButtonAction" @back-clicked="backButtonAction"/>
+                                    <vehicleBanner
+                                        cmsWidgetName="VehicleBannerWidget"
+                                        :displayGenericVehicleImage="displayGeneric"
+                                        class="mt-2 mb-4" />
+                                    <policyVehiclesQuestion
+                                        v-model="selectedVehicleVin"
+                                        class="px-4"
+                                        cmsWidgetName="PolicyVehiclesQuestion"
+                                        :vehicles="VehiclesForQuestions"
+                                        validationRules="option-required" />
+                                    <siteFooter
+                                        ref="siteFooter"
+                                        cmsWidgetName="SiteFooterWidget"
+                                        :isForwardActionDisabled="!meta.valid"
+                                        @ForwardClicked="forwardButtonAction"
+                                        @backClicked="backButtonAction" />
                                 </div>
                             </div>
                         </div>
@@ -28,70 +41,138 @@
 </template>
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header';
-import siteFooter from "@/iss-components/site-footer/site-footer";
-import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
-import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { required } from "@/helpers/validation-rules";
-import { Form, defineRule } from "vee-validate";
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { issPageValues } from "@/router/router-constants/issPage-values";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { required } from '@/helpers/validation-rules';
+import { Form, defineRule } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin';
+import { issPageValues } from '@/router/router-constants/issPage-values';
 import { useMainStore } from '@/store';
-import { errorMessages } from "@/constants/error-messages";
-import { vehicleSelectionOptions } from "@/constants/vehicle-selection-options";
-import { endorsementOptions } from "@/constants/endorsement-options";
+import { errorMessages } from '@/constants/error-messages';
+import { vehicleSelectionOptions } from '@/constants/vehicle-selection-options';
+import { endorsementOptions } from '@/constants/endorsement-options';
 
 // DEFINE VALIDATION RULES
-defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
 export default {
-    name: "policy-vehicles",
+    name: 'policy-vehicles',
+    components: {
+        siteHeader,
+        siteFooter,
+        vehicleBanner,
+        policyVehiclesQuestion,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
     mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
+        next((vm) => {
+            vm.setCmsContent(cmsContentPromise);
+        });
+    },
     data() {
         const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES);
         return {
-            policyVehicles: policyVehicles,
-            selectedVehicleVin: (policyVehicles?.length ?? 0) == 1
+            policyVehicles,
+            selectedVehicleVin: (policyVehicles?.length ?? 0) === 1
                 ? policyVehicles[0].vin
-                : "",
-            displayGeneric: true,
+                : '',
+            displayGeneric: (policyVehicles?.length ?? 0) !== 1,
             bailout: false
+        };
+    },
+    computed: {
+        VehiclesForQuestions() {
+            // Map API result data, to address-vehicles data structure
+            const vehicles = this.policyVehicles;
+            const mappedData = vehicles?.map((v) => {
+                const maskSymbol = 'X';
+                const vinStart = maskSymbol.repeat(v.vin.length - 6);
+                const vinEnd = v.vin.substring(v.vin.length - 6);
+                return {
+                    vin: v.vin,
+                    vehicle: v,
+                    Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
+                    Name: v.vin,
+                    SubText: `VIN ${vinStart}${vinEnd}`
+                };
+            }) ?? [];
+            return mappedData;
+        },
+        noCompensationForSelectedVehicle() {
+            const vehicle = this.policyVehicles.find((policyVehicle) =>
+                policyVehicle.vin === this.selectedVehicleVin);
+            return (vehicle?.coverages?.length ?? 0) === 0;
+        },
+        deductibleForSelectedVehicle() {
+            const vehicle = this.policyVehicles.find((policyVehicle) =>
+                policyVehicle?.vin === this.selectedVehicleVin);
+            if (!vehicle) {
+                return undefined;
+            }
+
+            return vehicle.coverages?.length ?? false
+                ? vehicle?.coverages[0].deductible
+                : 0;
+        },
+        repairWaivedForSelectedVehicle() {
+            const vehicle = this.policyVehicles.find((policyVehicle) =>
+                policyVehicle.vin === this.selectedVehicleVin);
+            return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
+        },
+        VehiclesFromApi() {
+            return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
+        },
+        selectedVehicle() {
+            const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
+            return vehicle;
         }
     },
-    async beforeRouteEnter(to, from, next)
-    {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-        ];
-        //use resultMap to populate layout content.
-        let resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
+    watch: {
+        async selectedVehicleVin(value) {
+            if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+                // clear previously selected vehicle and image
+                this.mainStore.resetVehicleState();
+                this.displayGeneric = true;
+            } else {
+                // get vehicle details from selected VIN
+                const vehicle = await this.lookupVehicleByVin(value);
+
+                // handle error in case vehicle info doesn't come back for selected VIN
+                if (vehicle?.error === true) {
+                    this.mainStore.resetVehicleState();
+                    this.displayGeneric = true;
+                    return;
+                }
+                if (vehicle) {
+                    // save selected vehicle to the store
+                    this.mainStore.updateVehicle(vehicle.data);
+                    this.displayGeneric = false;
+                }
+            }
+        }
     },
-        methods:
+    methods:
         {
-            backButtonAction() {   
+            backButtonAction() {
                 useMainStore().issConfig.disabledFields.policyNumber = true;
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);          
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
             async forwardButtonAction() {
-                if (this.selectedVehicleVin != vehicleSelectionOptions.VEHICLE_NOT_LISTED){
-                    const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
-                    if (vehicleLookupResponse.error) {                       
+                if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+                    const vehicleLookupResponse
+                        = await this.lookupVehicleByVin(this.selectedVehicleVin);
+                    if (vehicleLookupResponse.error) {
                         this.bailout = true;
-                        return this.navigateForward();                   
+                        return this.navigateForward();
                     }
 
-                    this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { 
+                    this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
                         vin: this.selectedVehicleVin,
                         noCompensation: this.noCompensationForSelectedVehicle,
                         deductible: this.deductibleForSelectedVehicle,
@@ -103,128 +184,37 @@ export default {
                 return this.navigateForward();
             },
             navigateForward() {
-                if(this.bailout)
-                    this.$router.navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                if (this.bailout) {
+                    this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                        this.$route,
+                        {},
+                        {});
+                } else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+                    this.$router
+                        .navigate(this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
                             this.$route,
                             {},
-                            {}
-                        );
-                else if(this.selectedVehicleVin == vehicleSelectionOptions.VEHICLE_NOT_LISTED)
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
+                            {});
+                } else {
+                    this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
                         this.$route,
                         {},
-                        {}
-                    );
-                else
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
-                        this.$route,
-                        {},
-                        {}
-                    ); 
+                        {});
+                }
             },
             async lookupVehicleByVin(vin) {
                 try {
                     return await useMainStore().lookupVehicleByVin(vin);
-                }
-                catch (responseError) {
+                } catch (responseError) {
                     return {
-                        error: true,
+                        error: true
                     };
                 }
-            }, 
-        },
-        computed:{
-            VehiclesForQuestions() {
-                // Map API result data, to address-vehicles data structure
-                const vehicles = this.policyVehicles;
-                const mappedData = vehicles?.map((v) => {
-                    const maskSymbol = "X";
-                    const vinStart = maskSymbol.repeat(v.vin.length - 6);
-                    const vinEnd = v.vin.substring(v.vin.length - 6);
-                    return {
-                    vin: v.vin,
-                    vehicle: v,
-                    Text: v.vehicleYear + " " + v.vehicleMake + " " + v.vehicleModel,
-                    Name: v.vin,
-                    SubText: "VIN " + vinStart + vinEnd,
-                    };
-                }) ?? [];
-                return mappedData;
-            },
-            noCompensationForSelectedVehicle() {
-                const vehicle = this.policyVehicles.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
-                return (vehicle?.coverages?.length ?? 0) == 0;
-            },
-            deductibleForSelectedVehicle() {
-                const vehicle = this.policyVehicles.find((vehicle) => { return vehicle?.vin == this.selectedVehicleVin; });
-                if (!vehicle){
-                    return undefined;
-                }
-
-                return vehicle.coverages?.length ?? false
-                    ? vehicle?.coverages[0].deductible
-                    : 0;
-            },
-            repairWaivedForSelectedVehicle() {
-                const vehicle = this.policyVehicles.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
-                return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
-            },
-            VehiclesFromApi() {
-                return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
-            },
-            selectedVehicle() {
-                const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
-                return vehicle;
-            }, 
-        },
-        watch: {
-            async selectedVehicleVin(value) {
-                if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                    // clear previously selected vehicle and image
-                    this.mainStore.resetVehicleState();
-                    this.displayGeneric = true;
-                }
-
-                else {
-                    // get vehicle details from selected VIN
-                    const vehicle = await this.lookupVehicleByVin(value);
-
-                    // handle error in case vehicle info doesn't come back for selected VIN
-                    if (vehicle?.error === true) {
-                      this.mainStore.resetVehicleState();
-                      this.displayGeneric = true;
-                      return;
-                    } 
-                    if (vehicle) {
-                      // save selected vehicle to the store
-                      this.mainStore.updateVehicle(vehicle.data);
-                      this.displayGeneric = true;
-                      
-                      // get the style(s) associated with the selected YMM
-                      const styleOptions = await this.mainStore.getVehicleStyles(
-                        vehicle.data.year,
-                        vehicle.data.make,
-                        vehicle.data.model,
-                      );
-                      // if there is more than 1 style for the selected vehicle, display generic/blurred image
-                      this.displayGeneric = styleOptions?.data?.length > 1;
-                    }
-                }
             }
-        },     
-        components: {
-            siteHeader,
-            siteFooter,
-            vehicleBanner,
-            policyVehiclesQuestion,
-            Form,
-        },
-    }
+        }
+};
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .header{
     margin-bottom: 0rem !important;
 }
@@ -233,4 +223,4 @@ export default {
     margin-top: 0rem !important;
     line-height: 1.50rem;
 }
-</style>
\ No newline at end of file
+</style>