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

<template>
    <Form
        ref="theForm"
        v-slot="{ meta }"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="container-fluid fade-on-route-transition policy-vehicles">
            <div class="row justify-content-center">
                <div class="col-md-6 px-0 px-md-2">
                    <siteHeader
                        class="mb-2 header"
                        cmsWidgetName="SiteHeaderWidget" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4">
                    <div class="select-car-form rounded text-center">
                        <vehicleBanner
                            cmsWidgetName="VehicleBannerWidget"
                            :displayGenericVehicleImage="displayGeneric"
                            class="mt-2" />
                        <policyVehiclesQuestion
                            v-model="selectedVehicleVin"
                            cmsWidgetName="PolicyVehiclesQuestion"
                            :vehicles="VehiclesForQuestions"
                            :validationRules="rules.optionRequired" />
                        <siteFooter
                            ref="siteFooter"
                            cmsWidgetName="SiteFooterWidget"
                            :isForwardActionDisabled="!meta.valid"
                            @ForwardClicked="forwardButtonAction"
                            @backClicked="backButtonAction" />
                    </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';
import bailoutMessage from '@/constants/bailoutMessage';
import {
    deductibleForSelectedVehicle,
    endorsementsForSelectedVehicle,
    noCoverageForSelectedVehicle,
    repairWaivedForSelectedVehicle
} from '@/helpers/policy-vehicle-helper';
import coverageType from '@/constants/coverage-type';

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);
        });
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {
        const policyVehicles = useMainStore().order.policy.vehicles;
        return {
            policyVehicles,
            selectedVehicleVin: '',
            displayGeneric: true,
            policyVinFound: true,
            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;
        },
        selectedPolicyVehicle() {
            if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
                return this.policyVehicles.find((p) => p.vin === this.selectedVehicleVin);
            }

            return null;
        },
        noCoverageForSelectedVehicle() {
            return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
        },
        deductibleForSelectedVehicle() {
            return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
        },
        endorsementsForSelectedVehicle() {
            return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
        },
        repairWaivedForSelectedVehicle() {
            return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
        },
        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.displayGeneric = false;
                    useMainStore().updateVehicle({
                        ...vehicle.data,
                        policyVehicleId: this.selectedPolicyVehicle?.id,
                        vin: value
                    });
                }
            }
        }
    },
    beforeMount() {
        if (this.mainStore.order.vehicle.vin) {
            this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
        } else 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);
                const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);

                if (vehicleLookupResponse.error) {
                    if (vehicleLookupResponse.status === 404) {
                        this.mainStore.resetVehicleState();
                        useMainStore().updateVehicle({
                            policyVehicleId: vehicle.id,
                            carId: '0',
                            category: '',
                            year: vehicle.vehicleYear || '',
                            make: vehicle.vehicleMake || '',
                            model: vehicle.vehicleModel || '',
                            style: vehicle.vehicleStyle || '',
                            vin: vehicle.vin
                        });
                        this.policyVinFound = false;
                        return this.navigateForward();
                    }

                    this.mainStore.setBailout(bailoutMessage.vehicleVinLookupError(
                        vehicle.vin,
                        vehicleLookupResponse.data
                    ));
                    return this.navigateForward();
                }

                useMainStore().updateVehicle({
                    ...vehicleLookupResponse.data,
                    policyVehicleId: vehicle.id,
                    vin: this.selectedVehicleVin
                });
                useMainStore().updateVehicleCoverage({
                    noCoverage: this.noCoverageForSelectedVehicle,
                    deductible: this.deductibleForSelectedVehicle,
                    repairWaived: this.repairWaivedForSelectedVehicle,
                    endorsements: this.endorsementsForSelectedVehicle
                });
            }
            else {
                useMainStore().updateCoverageType(coverageType.NONE);
            }
            return this.navigateForward();
        },
        navigateForward() {
            if (this.mainStore.isBailout) {
                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.endorsementsForSelectedVehicle?.length > 0
                && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
                    || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))
            ) {
                this.$router.navigate(
                    this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
                    this.$route
                );
            } else if (!this.policyVinFound) {
                this.$router.navigate(
                    this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
                    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,
                    status: responseError.status,
                    data: responseError.data
                };
            }
        }
    }
};
</script>
<style lang="scss">
.policy-vehicles {
    .button-question {
        .question-text {
            margin: 1rem 0;
            span {
                font-size: 1rem;
                font-weight: 500;
                line-height: 1.5rem;
            }
        }
    }
}
</style>