DigitalConsumer.ISS/src/layouts/policy-vehicles/policy-vehicles.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
        <div class="page-container-grouped-styles">
            <div class="fade-on-route-transition position-relative">
                <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="true" 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"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Form>
</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";
// 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 { useMainStore } from '@/store';
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));
export default {
    name: "policy-vehicles",
    mixins: [BaseFormMixin],
    data() {
    return {
      selectedVehicleVin: "",
      bailout: false
        }
    },
    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);
            });
        },
        methods:
        {
            backButtonAction() {   
                this.mainStore.issConfig.disabledFields.policyNumber = true; 
                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) {                       
                        this.bailout = true;     
                        return this.navigateForward();                   
                    }

                    this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { 
                        vin: this.selectedVehicleVin,
                        noCoverage: this.noCoverageForSelectedVehicle,
                        deductible: this.deductibleForSelectedVehicle,
                        repairWaived: this.repairWaivedForSelectedVehicle
                     });
                    // Update that verified
                    // If they go backwards select vehicle => forward => one deductible => back to vehicle selection => forward again => right info
                        // backwards => vehicle unverified => clear coverage info
                        // keep this in mind
                    this.mainStore.updateVehicle(this.vehicleFromLookup);
                }
                return this.navigateForward();
            },
            navigateForward() {
                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
                    this.$router.navigate(
                        this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
                        this.$route,
                        {},
                        {}
                    ); 
            },
            async lookupVehicleByVin(vin) {
            try {
                return await this.mainStore.lookupVehicleByVin(vin);
            }
            catch (responseError) {
                return {
                    error: {
                        status: responseError.status,
                    },
                };
            }
            },        
           
        },
        computed:{
            VehiclesForQuestions() {
                // Map API result data, to address-vehicles data structure
                const vehicles = this.VehiclesFromApi;
                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;
            },
            VehiclesFromApi() {
                return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
            },
            noCoverageForSelectedVehicle() {
                const vehicle = this.VehiclesFromApi.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
                return vehicle.coverages.length == 0;
            },
            deductibleForSelectedVehicle() {
                const vehicle = this.VehiclesFromApi.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
                return vehicle?.coverages?.length == 0 ?? true
                    ? 0
                    : vehicle.coverages[0].deductible;
            },
            repairWaivedForSelectedVehicle() {
                const vehicle = this.VehiclesFromApi.find((vehicle) => { return vehicle.vin == this.selectedVehicleVin; });
                return vehicle.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
            }
        },
        components: {
            siteHeader,
            siteFooter,
            vehicleBanner,
            policyVehiclesQuestion,
            Form,
        },
    }
</script>
<style lang="scss">
.header{
    margin-bottom: 0rem !important;
}
.form-test-error{
    text-align: left;
    margin-top: 0rem !important;
    line-height: 1.50rem;
}
</style>