DigitalConsumer.FixMyGlass/src/layouts/address-vehicles/address-vehicles.vue

<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <div class="container-fluid page-container-grouped-styles">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4 mt-4">
                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />

                    <alert
                        ref="alertFoundMultipleVehicles"
                        class="my-5"
                        alertClass="alert-warning"
                        :manualHeadline="AlertFoundMultipleVehiclesHeader"
                        manualCopy=""
                        v-bind:isDismissible="false" />

                    <addressVehiclesQuestion
                        ref="addressVehiclesQuestion"
                        cmsWidgetName="VehicleConfirmationQuestion"
                        :vehicles="VehiclesForQuestions"
                        validationRules="vehicle-required"
                        v-model="selectedVehicleVin"
                        :isCarIdDifferent="isCarIdDifferent" />

                    <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
                        <textBlock
                            :customText="AlertProvideVinBody"
                            justifyText="left"
                            class="mb-3"
                            marginTopSizeOverride="3" />
                    </div>

                    <navbar
                        cmsWidgetName="FunnelFooterWidget"
                        ref="navbar"
                        :isForwardActionDisabled="!meta.valid"
                        @back-clicked="backButtonAction"
                        @ForwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
</template>

<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import alert from "@/ux-components/alert/alert";
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
import textBlock from "@/digital-components/text-block/text-block";

// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
import {
    doesCopyContainRouterLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { routerParams } from "@/router/router-constants/router-params";
import vinPagesMixin from "@/mixins/vin-pages-mixin";

// DEFINE VALIDATION RULES
defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED));

export default {
    name: "address-vehicles",
    mixins: [vinPagesMixin],
    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);
        });
    },
    props: {
        validationRules: String,
    },
    data() {
        return {
            selectedVehicleVin: "",
            isCarIdDifferent: false,
            isSelectedGlassAvailableForVehicle: true,
        };
    },
    computed: {
        vehicleCount() {
            return this.VehiclesForQuestions.length;
        },
        AlertFoundMultipleVehiclesHeader() {
            return this.getCmsContent("FoundMultipleVehicles", "HeadlineText").replaceAll(
                "{custom:vehicleCount}",
                this.vehicleCount
            );
        },
        AlertProvideVinBody() {
            return this.getCmsContent("ProvideVinAlert", "BodyText");
        },
        splitAlertProvideVinBodyForLink() {
            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
            return this.splitCopyOnCMSPlaceHolder(this.AlertProvideVinBody);
        },
        VehiclesForQuestions() {
            // Map API result data, to address-vehicles data structure
            const mappedData = this.VehiclesFromApi.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.vehicle,
                    Text: v.vehicle.year + " " + v.vehicle.make + " " + v.vehicle.model,
                    Name: v.vin,
                    SubText: "VIN " + vinStart + vinEnd,
                };
            });

            return mappedData;
        },
        VehiclesFromApi() {
            return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
        },
        selectedVehicle() {
            return this.VehiclesForQuestions.find(({ vin }) => vin === this.selectedVehicleVin);
        },
    },
    methods: {
        doesCopyContainRouterLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        arePagePrerequisitesValid() {
            if (
                store.getters.order.vehicle.carId &&
                store.getters.order.serviceLocation.zipCode &&
                store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES)
            ) {
                return true;
            }
            return false;
        },
        backButtonAction() {
            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        async forwardButtonAction() {
            const vinLookup = await this.dispatchStoreActionWithLogging(
                storeActions.LOOKUP_VEHICLE_BY_VIN,
                {
                    vin: this.selectedVehicle.vin,
                },
                "address-vehicles"
            ).catch(() => {
                this.$refs.navbar.removeLoader();
            });

            if (!vinLookup) {
                return;
            }

            this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
                vinLookup.data.carId,
                "address-vehicles"
            );

            await this.dispatchStoreAction(
                storeActions.SAVE_VIN,
                {
                    vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
                        vin: this.selectedVehicle.vin,
                    }),
                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
                },
                false
            );

            return await this.navigateForward();
        },
        async navigateForward() {
            if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
                this.$router.navigateWithSaving(
                    this.navigationScenarios.CLICKED_FORWARD,
                    this.$route,
                    {},
                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
                );
            } else {
                await this.navigateForwardWithSingleCarMatch();
            }
        },
    },

    watch: {
        selectedVehicleVin: {
            handler() {
                // does this vehicle match the previously selected carId?
                this.isCarIdDifferent =
                    this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
                if (this.isCarIdDifferent) {
                    this.$refs.navbar.updateButtonText(
                        `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
                    );
                } else {
                    this.$refs.navbar.updateButtonText(
                        this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
                    );
                }
            },
            deep: true,
        },
    },

    components: {
        Form,
        funnelHeader,
        funnelSubHeader,
        alert,
        navbar,
        addressVehiclesQuestion,
        textBlock,
    },
};
</script>

<style lang="scss">
.alert-provide-vin {
    font-size: 0.875rem;
    line-height: 1.4;

    a {
        text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
        line-height: inherit;
    }
}
</style>