<template>
    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
        <loadingModal ref="loadingModal" />
        <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" />

                    <serviceZipModalQuestion
                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
                        v-model="serviceZipCodeQuestion"
                        ref="serviceZipCodeQuestion"
                        :carId="carId"
                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
                        :mobileFeePart="mobileFeePart"
                        @updated-mobile-fee-part="setMobileFeePart"
                        @updated-recycle-fee-part="setRecycleFeePart"
                        @updated-serviceability="setServiceabilityDetails"
                        @updated-contains-military-base="setContainsMilitaryBase"
                        @updated-bill-to-account-number="setBillToAccountNumber"
                        linkWidgetName="ServiceZipLinkWidget"
                        modalWidgetName="ServiceZipModalWidget" />

                    <alert
                        ref="alertMilitaryBaseZip"
                        class="my-5"
                        cmsWidgetName="AlertMilitaryBaseZipWidget"
                        v-if="displayMilitaryZipAlert"
                        alertClass="alert-warning" />

                    <alert
                        ref="alertMobileOnly"
                        class="my-5"
                        cmsWidgetName="AlertMobileOnlyWidget"
                        v-if="displayServiceableMobileOnly"
                        alertClass="alert-warning" />

                    <alert
                        ref="alertRecalNoMobile"
                        class="my-5"
                        cmsWidgetName="AlertRecalNoMobileWidget"
                        v-if="displayRecalibrationWarning"
                        @text-link-clicked="openModalAction"
                        alertClass="alert-warning" />

                    <alert
                        ref="alertInshopOnly"
                        class="my-5"
                        cmsWidgetName="AlertInshopOnlyWidget"
                        v-if="displayServiceableInshopOnly"
                        alertClass="alert-warning" />

                    <alert
                        ref="alertNoShops"
                        class="my-5"
                        cmsWidgetName="AlertNoShopsWidget"
                        v-if="displayNoShopsAlert"
                        alertClass="alert-warning" />
                    <alert
                        ref="alertMobileFeeFree"
                        class="my-5"
                        cmsWidgetName="AlertMobileFeeFreeWidget"
                        v-if="showMobileFreeAlert"
                        alertClass="alert-success" />
                </div>
            </div>
            <div class="row justify-content-center appointment-type">
                <div class="col-md-6">
                    <appointmentTypeQuestion
                        v-model="selectedAppointmentType"
                        v-show="isAppointmentTypeDisplayed"
                        :isServiceableMobile="isServiceableMobile"
                        :isServiceableInshop="isServiceableInshop"
                        :isDisplayed="isAppointmentTypeDisplayed"
                        :mobileFeeApplies="mobileFeeApplies"
                        ref="appointmentTypeQuestion"
                        groupName="appointmentTypeQuestion"
                        cmsWidgetName="AppointmentTypeQuestionWidget"
                        validationRules="option-required" />
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-6 col-xl-4">
                    <mobileLocationModalQuestions
                        customComponentId="mobileLocationQuestions"
                        v-if="selectedAppointmentType === 'Mobile'"
                        v-model="mobileLocationQuestions"
                        :mobileFeePart="mobileFeePart"
                        :mobileFeeApplies="mobileFeeApplies"
                        @updated-mobile-fee-part="setMobileFeePart"
                        @updated-recycle-fee-part="setRecycleFeePart"
                        @updated-serviceability="setServiceabilityDetails"
                        @updated-contains-military-base="setContainsMilitaryBase"
                        @updated-mobile-ctu="setCtuForMobile"
                        validationRules="mobile-location-required"
                        ref="mobileLocationQuestions"
                        linkWidgetName="MobileLocationLinkWidget"
                        modalWidgetName="MobileLocationModalWidget"
                        @setMobileLocationAndProceed="setMobileLocationQuestions" />

                    <shopQuestion
                        ref="shopQuestion"
                        v-show="isShopQuestionDisplayed"
                        v-model="selectedProvider"
                        :selectedAppointmentType="selectedAppointmentType"
                        :shopProviderData="shopProviderData"
                        :isDisplayed="isShopQuestionDisplayed"
                        cmsWidgetName="ShopQuestionWidget" />

                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />

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

<script>
// Components
import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";

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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";

// Supporting files
import baseMixin from "@/mixins/base-mixin.js";
import experimentMixin from "@/mixins/experiment-mixin.js";
import { experimentSettings } from "@/constants/experiments";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {
    getPricedMobileFeePart,
    getServiceabilityDetails,
    getShopProviderData,
    getZipCodeData,
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { applicationConfig } from "@/constants/application-config";
import { Provider } from "@/layouts/service-location/classes/provider";
import { partNumberStrings } from "@/constants/part-number-strings";

import store from "@/store";

// Validation
import { defineRule } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";

const MOBILE_FEE_PART_TYPE = "MOBILE FEE";

// DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => {
    if (
        !value.addressQuestions.streetAddress ||
        !value.addressQuestions.city ||
        !value.addressQuestions.state ||
        !value.addressQuestions.zipCode ||
        !value.isVehicleProtected
    ) {
        return errorMessages.MOBILE_LOCATION_REQUIRED;
    }
    return true;
});

export default {
    name: "service-location",
    data() {
        return {
            streetAddress: this.getServiceAddressFromStore(),
            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
            carId: this.getCarIdfromStore(),
            city: this.getServiceCityFromStore(),
            state: this.getServiceStateFromStore(),
            zipCode: this.getServiceZipCodeFromStore(),
            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
            isGlassServiceableInshop: null,
            isRecalibrationServiceableInshop: null,
            isGlassServiceableMobile: null,
            isRecalibrationServiceableMobile: null,
            selectedAppointmentType: this.getSelectedAppointmentType(),
            selectedProvider: this.getSelectedProvider(),
            mobileFeePart: null,
            recycleFeePart: null,
            zipContainsMilitaryBase: false,
            zipCodeCtu: null,
            billToAccountNumber: null,
            shopProviderData: null,
            navigatingForward: false,
        };
    },
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);

        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
        const zipCodeDataPromise = getZipCodeData(serviceZipCode);

        const serviceabilityDetailsPromise = getServiceabilityDetails(
            serviceZipCode,
            null,
            "service-location"
        );

        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");

        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);

        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "zipCodeData",
                promise: zipCodeDataPromise,
            },
            {
                resultKey: "mobileFeePart",
                promise: mobileFeePartPromise,
            },
            {
                resultKey: "serviceabilityDetails",
                promise: serviceabilityDetailsPromise,
            },
            {
                resultKey: "shopProviderData",
                promise: shopProviderDataPromise,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);

        // Call the "next" function to complete the transition to this page.
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
            vm.setData(
                resultMap.zipCodeData,
                resultMap.serviceabilityDetails,
                resultMap.mobileFeePart,
                resultMap.shopProviderData
            );
        });
    },
    computed: {
        serviceZipCodeQuestion: {
            get: function () {
                return {
                    state: this.state,
                    zipCode: this.zipCode,
                    zipCodeCtu: this.zipCodeCtu,
                };
            },
            set: function (newValue) {
                if (newValue.zipCode !== this.zipCode) {
                    this.resetMobileLocation();
                    this.selectedAppointmentType = null;
                    this.selectedProvider = new Provider();
                }

                this.state = newValue.state;
                this.zipCode = newValue.zipCode;
                this.zipCodeCtu = newValue.zipCodeCtu;

                this.$nextTick();
            },
        },
        mobileLocationQuestions: {
            get: function () {
                return {
                    addressQuestions: {
                        streetAddress: this.streetAddress,
                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
                        city: this.city,
                        state: this.state,
                        zipCode: this.zipCode,
                    },
                    isVehicleProtected: this.isVehicleProtected,
                };
            },
        },
        isServiceableMobile() {
            if (this.isRecalibrationServiceableMobile !== null) {
                return (
                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
                    this.isMobileStaticRecalibrationApplicable
                );
            } else {
                return this.isGlassServiceableMobile;
            }
        },
        isMobileStaticRecalibrationApplicable() {
            return (
                this.displayMSR &&
                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
            );
        },
        displayMSR() {
            return (
                experimentMixin.methods
                    .getSettingValue(experimentSettings.DISPLAY_MSR)
                    ?.toLowerCase() === "true"
            );
        },
        isCashItacNoComp() {
            return !this.isInsurance || this.isITAC || this.isNoComp;
        },
        mobileFeeHasPrice() {
            return (
                this.mobileFeePart?.laborAmount > 0 ||
                this.mobileFeePart?.sellingPrice > 0 ||
                this.mobileFeePart?.kitPrice > 0
            );
        },
        mobileFeeApplies() {
            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
                return this.isCashItacNoComp;
            } else {
                return this.mobileFeeHasPrice;
            }
        },
        showMobileFreeAlert() {
            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
                return true;
            }
            return false;
        },
        isServiceableInshop() {
            if (this.isRecalibrationServiceableInshop !== null) {
                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
            } else {
                return this.isGlassServiceableInshop;
            }
        },
        isShopQuestionDisplayed() {
            return (
                this.selectedAppointmentType === "Inshop" ||
                this.selectedAppointmentType === "Dropoff"
            );
        },
        isAppointmentTypeDisplayed() {
            return this.zipCode && !this.displayNoShopsAlert;
        },
        requiresInshopRecalibration() {
            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
            return (
                this.isServiceableInshop &&
                this.isGlassServiceableMobile &&
                this.isRecalibrationServiceableMobile === false &&
                !this.isMobileStaticRecalibrationApplicable
            );
        },
        displayRecalibrationWarning() {
            return this.requiresInshopRecalibration;
        },
        displayServiceableInshopOnly() {
            return (
                !this.displayRecalibrationWarning &&
                this.isServiceableInshop &&
                !this.isServiceableMobile
            );
        },
        displayMilitaryZipAlert() {
            return this.zipContainsMilitaryBase && this.isServiceableMobile;
        },
        displayServiceableMobileOnly() {
            return this.isServiceableMobile && !this.isServiceableInshop;
        },
        displayNoShopsAlert() {
            return !this.isServiceableInshop && !this.isServiceableMobile;
        },
        recalibrationInformationModal() {
            return this.$refs.recalibrationInformationModal;
        },
        isInsurance() {
            return store.getters.payment.isInsurance;
        },
        isITAC() {
            return store.getters.order.policy.isItac;
        },
        isNoComp() {
            return store.getters.order.policy.isNoComp;
        },
    },
    methods: {
        arePagePrerequisitesValid() {
            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
            if (store.getters.payment.isInsurance) {
                if (
                    store.getters.payment.parentAccountNumber !==
                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
                    store.getters.order.policy.policyNumber &&
                    store.getters.order.serviceLocation.zipCode
                ) {
                    return true;
                } else {
                    // prettier-ignore
                    {
                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
                    }

                    return false;
                }
            } else {
                if (
                    store.getters.lineItems.supportingItems &&
                    store.getters.order.serviceLocation.zipCode
                ) {
                    return true;
                } else {
                    // prettier-ignore
                    {
                        console.log(new Date() + "Cash: servce-location invalid prereqs");
                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
                    }
                    return false;
                }
            }
        },
        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
            if (zipCodeData) {
                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
                this.zipCodeCtu = zipCodeData.zipCodeCtu;
            }

            if (serviceabilityDetails) {
                this.setServiceabilityDetails(serviceabilityDetails);
            }

            if (mobileFeePart) {
                this.mobileFeePart = mobileFeePart;
            }

            if (shopProviderData) {
                this.shopProviderData = shopProviderData;
            }

            var gaLabel = this.GaLabels.NO;
            if (this.isServiceableMobile) {
                gaLabel = this.GaLabels.YES;
            }

            this.pushEventToGA(
                this.GaCategories.APPOINTMENT,
                this.GaActions.MOBILE_AVAILABLE,
                gaLabel,
                true
            );
        },
        setContainsMilitaryBase(val) {
            if (this.zipContainsMilitaryBase !== val) {
                this.zipContainsMilitaryBase = val;
            }
        },
        setBillToAccountNumber(val) {
            this.billToAccountNumber = val;
        },
        setCtuForMobile(val) {
            this.zipCodeCtu = val;
        },
        setMobileFeePart(mobileFeePart) {
            this.mobileFeePart = mobileFeePart;
        },
        setRecycleFeePart(recycleFeePart) {
            this.recycleFeePart = recycleFeePart;
        },
        //creating async function as the computed property can not directly handle asynchronous operations or promises.
        async setMobileLocationQuestions(newValue) {
            var newZipCode = newValue.addressQuestions.zipCode;
            if (newZipCode !== this.zipCode) {
                await getShopProviderData(newZipCode).then((result) => {
                    if (this.isServiceableMobile) {
                        this.shopProviderData = result.data;
                        this.selectedProvider = new Provider(
                            this.shopProviderData.mobileProviderNumber
                        );
                    }
                });
            }
            if (this.isServiceableMobile) {
                this.setMobileLocation(newValue);
                //proceed to next page
                this.forwardButtonAction();
            } else {
                this.closeModalAction("mobileLocationQuestions");
                await getZipCodeData(newZipCode).then((zipCodeData) => {
                    this.serviceZipCodeQuestion = {
                        state: zipCodeData.state,
                        zipCode: newZipCode,
                        zipCodeCtu: zipCodeData.zipCodeCtu,
                    };
                });
            }
        },
        getCarIdfromStore() {
            return store.getters.vehicle.carId;
        },
        getServiceAddressFromStore() {
            return store.getters.order.serviceLocation.address;
        },
        getServiceAddress2FromStore() {
            return store.getters.order.serviceLocation.address2;
        },
        getServiceCityFromStore() {
            return store.getters.order.serviceLocation.city;
        },
        getServiceStateFromStore() {
            return store.getters.order.serviceLocation.state;
        },
        getServiceZipCodeFromStore() {
            return store.getters.order.serviceLocation.zipCode;
        },
        getIsVehicleHeavyTruckFromStore() {
            return store.getters.order.vehicle?.isBigTruck ?? false;
        },
        getIsVehicleProtectedFromStore() {
            return store.getters.order.serviceLocation.isVehicleProtected;
        },
        getSelectedAppointmentType() {
            return store.getters.order.serviceLocation.appointmentType;
        },
        getSelectedProvider() {
            return store.getters.order.serviceLocation.provider;
        },
        resetMobileLocation() {
            this.streetAddress = "";
            this.apartmentNumberOrBusinessName = "";
            this.city = "";

            this.isVehicleProtected = null;
        },
        setServiceabilityDetails(serviceabilityDetails) {
            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
            this.isRecalibrationServiceableInshop =
                serviceabilityDetails.isRecalibrationServiceableInshop;
            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
            this.isRecalibrationServiceableMobile =
                serviceabilityDetails.isRecalibrationServiceableMobile;
        },
        setMobileLocation(mobileLocation) {
            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
            this.apartmentNumberOrBusinessName =
                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
            this.city = mobileLocation.addressQuestions.city;
            this.state = mobileLocation.addressQuestions.state;
            this.zipCode = mobileLocation.addressQuestions.zipCode;
            this.isVehicleProtected = mobileLocation.isVehicleProtected;
        },
        async reloadShopData(zipCode) {
            await this.$refs.shopQuestion.reloadShopData(zipCode);
        },
        openRecalibrationInformationModal() {
            this.recalibrationInformationModal.openModal();
        },
        backButtonAction() {
            const payment = store.getters.order.payment;
            if (
                payment?.isInsurance &&
                (payment?.insuranceCoverage?.isVerified ||
                    store.getters.order.referralNumber.length === 6)
            ) {
                navigateToHeritageFunnel({
                    shouldSaveSession: false,
                    pageNameToLog: "service-location",
                    navType: "back",
                });
            } else {
                this.$router.navigateWithoutSaving(
                    this.navigationScenarios.CLICKED_BACK,
                    this.$route
                );
            }
        },
        updateAndSaveIsMSRFeeApplicable() {
            const isMSRFeeApplicable =
                this.isMobileStaticRecalibrationApplicable &&
                this.selectedAppointmentType == "Mobile";
            this.dispatchStoreAction(
                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
                isMSRFeeApplicable
            );
        },
        updateAndSaveSupportingItems() {
            let supportingItems = store.getters.lineItems.supportingItems;
            let shouldSaveSupportingItems = false;

            supportingItems =
                !supportingItems && this.isMobileStaticRecalibrationApplicable
                    ? []
                    : supportingItems;

            // for insurance orders, fees can get removed causing supportingitems to be null or empty
            if (!supportingItems) {
                return;
            }

            // update recyle fee price
            if (this.recycleFeePart) {
                const recycleFeeIndex = supportingItems.findIndex(
                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
                );
                if (recycleFeeIndex >= 0) {
                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
                    supportingItems[recycleFeeIndex].sellingPrice =
                        this.recycleFeePart.sellingPrice;
                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;

                    shouldSaveSupportingItems = true;
                }
            }

            // if we have a mobile fee, then save/update supporting items
            if (this.selectedAppointmentType == "Mobile") {
                const mobileFeeIndex = supportingItems.findIndex(
                    (item) => item.partType == MOBILE_FEE_PART_TYPE
                );
                // If it already exists, update the price with latest data
                if (mobileFeeIndex >= 0) {
                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
                } else {
                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
                }

                shouldSaveSupportingItems = true;
            } else {
                // if it's not a mobile, then make sure we remove any that may have been added
                const removeMobileFeeIndex = supportingItems?.findIndex(
                    (item) => item.partType == MOBILE_FEE_PART_TYPE
                );

                if (removeMobileFeeIndex >= 0) {
                    supportingItems.splice(removeMobileFeeIndex, 1);
                    shouldSaveSupportingItems = true;
                }
            }

            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
            if (shouldSaveSupportingItems) {
                this.dispatchStoreAction(
                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                    supportingItems,
                    false
                );
            }
        },
        async forwardButtonAction() {
            this.navigatingForward = true;

            if (
                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
                this.selectedProvider &&
                this.selectedProvider.address
            ) {
                this.selectedProvider.address.streetAddress = null;
                this.selectedProvider.address.city = null;
                this.selectedProvider.address.state = null;
                this.selectedProvider.address.zipCode = null;
                this.selectedProvider.address.zipCodeCtu = null;
            }

            var ctu = this.zipCodeCtu;
            if (this.selectedAppointmentType == AppointmentTypeStrings.IN_SHOP) {
                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
                    ctu = this.selectedProvider.address.zipCodeCtu;
                }

                this.city = null;
                this.streetAddress = null;
            }

            await this.dispatchStoreAction(
                this.storeActions.SAVE_SERVICE_LOCATION,
                {
                    address: this.streetAddress,
                    address2: this.apartmentNumberOrBusinessName,
                    city: this.city,
                    state: this.state,
                    zipCode: this.zipCode,
                    zipCodeCtu: ctu,
                    appointmentType: this.selectedAppointmentType,
                    isVehicleProtected: this.isVehicleProtected,
                    provider: {
                        providerNumber: this.selectedProvider?.providerNumber,
                        address: {
                            streetAddress: this.selectedProvider?.address?.streetAddress,
                            city: this.selectedProvider?.address?.city,
                            state: this.selectedProvider?.address?.state,
                            zipCode: this.selectedProvider?.address?.zipCode,
                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
                        },
                    },
                },
                false
            );

            if (this.billToAccountNumber) {
                this.dispatchStoreAction(
                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
                    this.billToAccountNumber,
                    false
                );
            }

            this.updateAndSaveSupportingItems();
            this.updateAndSaveIsMSRFeeApplicable();
            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
        },
        openModalAction(modalName) {
            this.$refs[modalName].openModal();
        },
        closeModalAction(modalName) {
            this.$refs[modalName].closeModal();
        },
    },
    watch: {
        zipCode: {
            handler(newValue) {
                if (!this.navigatingForward) {
                    getShopProviderData(this.zipCode).then(async (result) => {
                        this.shopProviderData = result.data;
                        if (this.selectedAppointmentType === "Mobile") {
                            this.selectedProvider = new Provider(
                                this.shopProviderData.mobileProviderNumber
                            );
                        } else {
                            this.selectedProvider = new Provider();
                        }
                    });
                }
            },
        },
        selectedAppointmentType: {
            handler(newValue) {
                if (newValue === "Mobile") {
                    this.selectedProvider = new Provider(
                        this.shopProviderData.mobileProviderNumber
                    );
                } else {
                    this.selectedProvider = new Provider();
                }
            },
        },
    },
    components: {
        alert,
        serviceZipModalQuestion,
        appointmentTypeQuestion,
        mobileLocationModalQuestions,
        funnelHeader,
        navbar,
        funnelSubHeader,
        Form,
        loadingModal,
        contentGroupModal,
        shopQuestion,
    },
};
</script>

<style lang="scss">
.appointment-type-question {
    .button-question {
        .col {
            @include media-breakpoint-up(md) {
                padding: 0 0.75rem;
            }
            @include media-breakpoint-up(xl) {
                width: 33.3333333%;
                flex: 0 0 auto;
            }
        }
    }
}
.question-text {
    & > span {
        text-align: center;
        color: $black;
    }
}
</style>
