DigitalConsumer.ISS/src/layouts/service-location/service-location.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 cmsWidgetName="SiteHeaderWidget" />
                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
                <div class="select-car">
                    <div class="container-fluid pb-2">
                        <div class="row px-3">
                            <div class="col">
                                <div class="select-car-form rounded">
                                    <serviceZipModalQuestion
                                        v-model="serviceZipCodeQuestion"
                                        ref="serviceZipCodeQuestion"
                                        modalWidgetName="ServiceZipModalWidget" />
                                    <buttonQuestion
                                        cmsWidgetName="ServiceTypeQuestionWidget"
                                        :questionText="questionText"
                                        :answers="answersFromCms"
                                        buttonTypeString="listCard"
                                        isRequired
                                        v-model="selectedAppointmentType"
                                        validationRules="selection-required"/>
                                    <div class="select-car">
                                        <div class="container-fluid pb-2">
                                            <div class="row px-3">
                                                <div class="col">
                                                    <div class="select-car-form rounded">
                                                        <siteFooter
                                                        cmsWidgetName="SiteFooterWidget"
                                                        :isForwardActionDisabled="!meta.valid"
                                                        @backClicked="backButtonAction"
                                                        @forwardClicked="forwardButtonAction"
                                                        ref="siteFooter"
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import buttonQuestion from "@/digital-components/button-question/button-question";
import { useMainStore } from "@/store";
import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";

// Import Component
import baseFormMixin from "@/mixins/base-form-mixin";
import baseMixin from "@/mixins/base-mixin";
import { Form, defineRule } from "vee-validate";
import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';

// DEFINE VALIDATION RULES
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
export default {
    name: "service-location",
    mixins: [baseFormMixin, baseMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

        const serviceZipCode = useMainStore().order.customer.address.zipCode;
        const zipCodeData = getZipCodeData(serviceZipCode);

        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
        
        // Settle promises and get results
        const promiseResultMap = [
            {
                resultKey: "cmsContent",
                promise: cmsContentPromise,
            },
            {
                resultKey: "serviceabilityDetails",
                promise: serviceabilityDetailsPromise,
            },
            {
                resultKey: "zipCodeData",
                promise: zipCodeData,
            },
        ];

        const resultMap = await settleAllPromises(promiseResultMap);
        
        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    setup() {
        const mainStore = useMainStore();
        return { mainStore };
    },
    data() {
        return {
            zipCode: this.mainStore.order.customer.address.zipCode,
            state: this.mainStore.order.customer.address.state,
            isServiceZipServiceable: null,
            selectedAppointmentType: "",
        };
    },
    computed: {
        questionText() {
            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
        },
        answersFromCms() {
            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
        },
        serviceZipCodeQuestion: {
            get: function() {
                return {
                    zipCode: this.zipCode,
                    state: this.state,
                };
            },
            set: function (newValue) {
                if (newValue.zipCode !== this.zipCode) {
                    this.selectedAppointmentType = null;
                }

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

                this.$nextTick();
            },
        }        
    },
    methods: {
        arePagePrerequisiteValid() {
            return true;
        },
        backButtonAction() {
            /**
            * this.navigationScenarios comes from base-mixin
            */
            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
        },
        async forwardButtonAction() {},
        resetDependentState() {},
    },
    components: {
        siteFooter,
        siteHeader,
        siteSubHeader,
        buttonQuestion,
        Form,
        serviceZipModalQuestion,
    },
};
</script>

<style lang="scss">
.fade-on-route-transition {
    margin-bottom: 100px;
}
.page-container-grouped-styles {
    overflow: auto;
}

.modal-open {
    .page-container-grouped-styles {
        overflow: hidden;
    }
}
#sub-header span {
    color: $black;
}
.question-text {
    & > span {
        line-height: 1.500rem;
    }
}
.list-card-content p {
    &:first-of-type {
        line-height: 1.5rem;
    }
    &:not(:nth-of-type(1)){
        line-height: 1.250rem;
    }
}
.siteHeader{
    .site-header{
        margin-bottom: 1.25rem !important;
    }

}
.choose-option{
    .button-question >div {
        &:first-of-type {
            margin-bottom: 0.95rem;
            line-height: 1.500rem;
        }
    }
}
.button-question{
    .row.form-test-error{
        line-height:1.500rem;
        padding-left: 0rem !important;
    }
}
</style>