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

<template>
    <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" />
                <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
                                        v-model="selectedVehicleVin"
                                        class="px-4"
                                        cmsWidgetName="PolicyVehiclesQuestion"
                                        :vehicles="VehiclesForQuestions"
                                        :validationRules="rules.optionRequired" />
                                    <siteFooter
                                        ref="siteFooter"
                                        cmsWidgetName="SiteFooterWidget"
                                        :isForwardActionDisabled="!meta.valid"
                                        @ForwardClicked="forwardButtonAction"
                                        @backClicked="backButtonAction" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
// Components
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.js';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
import endorsementOptions from '@/constants/endorsement-options.js';
import globalRules from '@/constants/global-rules.js';
import { useMainStore } from '@/store/index.js';

export default {
    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().order.policy.vehicles;
        return {
            policyVehicles,
            selectedVehicleVin: '',
            displayGeneric: true,
            bailout: false,
            rules: {
                optionRequired: globalRules.OPTION_REQUIRED
            }
        };
    },
    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;
        },
        noCoverageForSelectedVehicle() {
            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;
        },
        selectedVehicleHasEndorsements() {
            const vehicle = this.policyVehicles.find((policyVehicle) =>
                policyVehicle?.vin === this.selectedVehicleVin);
            if (!vehicle) {
                return false;
            }
            return vehicle.endorsements?.length > 0;
        },
        repairWaivedForSelectedVehicle() {
            const vehicle = this.policyVehicles.find((policyVehicle) =>
                policyVehicle.vin === this.selectedVehicleVin);
            return vehicle?.endorsements?.includes(endorsementOptions.REPAIR_WAIVED) ?? false;
        },
        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 = false;
                }
            }
        }
    },
    beforeMount() {
        if (this.policyVehicles?.length === 1) {
            this.selectedVehicleVin = this.policyVehicles[0].vin;
        }
    },
    methods:
        {
            backButtonAction() {
                useMainStore().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
                    });

                    useMainStore().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 if (this.selectedVehicleHasEndorsements) {
                    this.$router.navigate(
                        this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
                        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) {
                    return {
                        error: true
                    };
                }
            }
        }
};
</script>
<style lang="scss" scoped>
.header{
    margin-bottom: 0rem !important;
}
.form-test-error{
    text-align: left;
    margin-top: 0rem !important;
    line-height: 1.50rem;
}
</style>