{"version":3,"file":"the-side-bar-online-519d926c.js","sources":["../../../src/components/layouts/side-bar/the-side-bar-online.vue"],"sourcesContent":["<script>\nimport { defineAsyncComponent } from 'vue';\nimport { mapGetters } from 'vuex';\nimport { dateDayMonthFormat } from '@beautybox/core/filters';\nimport { metaMixin, servicesMixin } from '@/mixins';\nimport { setBidsInLocalStorage } from '@/utils';\nimport { sideBarMixin } from '@/components/layouts/side-bar/side-bar.mixin';\nimport AppListItemService from '@/components/service-item';\nimport BoxShadow from '@/components/ui/box-shadow';\nimport TheSideBarBottom from '@/components/layouts/side-bar/the-side-bar-bottom';\nconst BPrice = defineAsyncComponent(() => import('@/components/blocks/BPrice.vue'));\n\nexport default {\n    name: 'the-side-bar-online',\n    components: { AppListItemService, BoxShadow, TheSideBarBottom, BPrice },\n    mixins: [sideBarMixin, metaMixin, servicesMixin],\n    data: () => ({\n        hasError: false,\n        loadingBtn: false,\n    }),\n    computed: {\n        ...mapGetters([\n            'BIDS',\n            'BID_INDEX',\n            'SERVICES',\n            'LOADING_SERVICES',\n            'COMMENT',\n            'USER_INFO',\n            'USER_ROLE',\n            'CHECK_BIDS',\n            'COUNT_ADDRESSES',\n            'AVERAGE_SUM',\n            'AVERAGE_PRICE_TYPE',\n        ]),\n        hasBottomBar() {\n            if (this.$isMobile) {\n                const routes =\n                    this.$route.name === 'employees' ||\n                    this.$route.name === 'date' ||\n                    this.$route.name === 'employee-info';\n\n                if (this.$route.name === 'confirm') {\n                    return this.isOnlineAppointmentEnabled;\n                }\n                if (this.$route.name === 'services') {\n                    return this.BIDS[this.BID_INDEX].servicesIDs.length !== 0;\n                }\n                return !routes;\n            }\n            return false;\n        },\n        hasUserInfo() {\n            return !!Object.keys(this.USER_INFO).length;\n        },\n        isRegistrationEnabled() {\n            return this.profile.clientRegistrationRequired;\n        },\n        isOnlineAppointmentEnabled() {\n            return !!this.hasUserInfo || !this.isRegistrationEnabled;\n        },\n        countServicesString() {\n            let countServices;\n\n            this.BIDS.forEach((item) => {\n                countServices = this.SERVICES(item.servicesIDs).length;\n            });\n\n            if (countServices === 0) {\n                return 'Услуги не выбраны';\n            } else if (countServices > 1 && countServices < 5) {\n                return `${countServices} услуги`;\n            } else if (countServices >= 5) {\n                return `${countServices} услуг`;\n            } else {\n                return `${countServices} услуга`;\n            }\n        },\n        averageSum() {\n            return this.AVERAGE_SUM;\n        },\n        averagePriceType() {\n            return this.AVERAGE_PRICE_TYPE;\n        },\n    },\n    created() {\n        this.requestAll([this.getMeta(), this.getData(), this.getServices()]);\n        this.requestEnd(() => {\n            this.loading = false;\n        });\n        this.$bus.$on('appointment:error', this.toggleError);\n        this.$bus.$on('appointment:success', this.toggleSuccess);\n    },\n    beforeDestroy() {\n        this.$bus.$off('appointment:error', this.toggleError);\n        this.$bus.$off('appointment:success', this.toggleSuccess);\n    },\n    methods: {\n        dateDayMonthFormat,\n        async getData() {\n            await this.getInfoProfile();\n        },\n        async getInfoProfile() {\n            const addressID = this.$route.params.id;\n            if (\n                !Object.keys(this.SALON_PROFILE).length ||\n                (this.SALON_PROFILE.addressID !== parseInt(addressID) &&\n                    this.SALON_PROFILE.nickname !== addressID)\n            ) {\n                await this.GET_PROFILE({ id: addressID });\n            }\n            this.profile = { ...this.SALON_PROFILE };\n\n            if (this.profile.hasOwnProperty('role')) {\n                await this.$store.dispatch('SET_USER_ROLE', this.profile.role);\n                await this.getEmployeeInfo();\n            }\n        },\n        async getEmployeeInfo() {\n            let employeeID;\n\n            if (this.$route.query.employeeID) {\n                employeeID = this.$route.query.employeeID;\n            }\n\n            if (this.USER_ROLE === 'master') {\n                employeeID = this.profile.userID;\n            }\n\n            if (employeeID) {\n                const { errors = {}, employee = {} } = await this.$fetch.get(\n                    `/${this.$route.params.id}/employees/${employeeID}`\n                );\n\n                if (!Object.keys(errors).length && Object.keys(employee).length) {\n                    this.$store.commit('SELECT_EMPLOYEE', employee);\n                }\n            }\n\n            if (this.$route.query.serviceID) {\n                const serviceID = this.$route.query.serviceID;\n\n                this.$store.commit('SELECT_SERVICE', [serviceID]);\n            }\n        },\n        async apply(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.loadingBtn = true;\n\n            if (this.$route.name === 'confirm') {\n                this.$bus.$emit('appointment:submit');\n            } else {\n                if (this.CHECK_BIDS) {\n                    await setBidsInLocalStorage(this.BIDS, this.BID_INDEX);\n                    this.loadingBtn = false;\n                    await this.$router.push({ name: 'confirm' });\n                } else {\n                    this.messageError('Необходимо заполнить все поля, чтобы записаться');\n                }\n                this.loadingBtn = false;\n            }\n        },\n        goToOnline(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.$router.push({ name: 'booking' });\n        },\n        onChangeAppointment() {\n            this.$router.replace({ name: 'booking' });\n            this.hasError = false;\n            this.loadingBtn = false;\n        },\n        toggleError() {\n            this.hasError = true;\n            this.loadingBtn = false;\n        },\n        toggleSuccess() {\n            this.hasError = false;\n            this.loadingBtn = false;\n        },\n        onLoading($event) {\n            this.loadingBtn = $event;\n        },\n        onError($event) {\n            this.hasError = $event;\n        },\n    },\n};\n</script>\n\n<template>\n    <div>\n        <app-side-bar-layout\n            v-if=\"!$isMobile\"\n            v-bind=\"profile\"\n            :loading=\"loading\"\n            hide-messengers\n            class=\"c-side-bar__online\"\n        >\n            <div v-if=\"hasError && $route.name === 'confirm'\" class=\"c-side-bar__button\">\n                <v-btn\n                    large\n                    block\n                    color=\"primary\"\n                    class=\"u-text-initial u-text-size--medium\"\n                    @click=\"onChangeAppointment\"\n                >\n                    Изменить заявку\n                </v-btn>\n            </div>\n            <template v-else>\n                <!--Кнопка для экрана выбора услуги-->\n                <div\n                    v-if=\"BIDS[0].servicesIDs.length && $route.name === 'services'\"\n                    class=\"c-side-bar__button\"\n                >\n                    <v-btn\n                        block\n                        large\n                        class=\"\"\n                        color=\"primary\"\n                        :disabled=\"LOADING_SERVICES\"\n                        @click=\"goToOnline\"\n                    >\n                        Продолжить\n                    </v-btn>\n                </div>\n                <!--Кнопка для экрана подтверждения услуги-->\n                <div\n                    v-else-if=\"CHECK_BIDS && $route.name !== 'services'\"\n                    class=\"c-side-bar__button\"\n                >\n                    <v-btn\n                        block\n                        large\n                        color=\"primary\"\n                        class=\"\"\n                        :loading=\"loadingBtn\"\n                        :disabled=\"\n                            ($route.name === 'confirm' && !isOnlineAppointmentEnabled) ||\n                            LOADING_SERVICES\n                        \"\n                        @click=\"apply\"\n                    >\n                        {{ $route.name === 'confirm' ? 'Подтвердить' : 'Записаться' }}\n                    </v-btn>\n                </div>\n                <div v-else class=\"pt-6\" />\n            </template>\n            <div class=\"c-side-bar__services\">\n                <p v-if=\"!BIDS[0].servicesIDs.length\" class=\"empty-text\">Услуги пока не выбраны</p>\n                <template v-else>\n                    <v-skeleton-loader\n                        v-if=\"LOADING_SERVICES\"\n                        type=\"list-item-two-line\"\n                        width=\"100%\"\n                    />\n                    <template v-else>\n                        <v-list v-for=\"(bid, index) in BIDS\" :key=\"index\" class=\"pa-0 mx-0 my-6\">\n                            <!--<strong class=\"d-flex font-weight-medium pt-2 px-6\">\n                                {{ bid.date || 'Дата и время еще не выбраны' }}\n                            </strong>-->\n                            <template v-if=\"!!SERVICES(bid.servicesIDs).length\">\n                                <strong class=\"font-weight-medium pb-2 px-6\">\n                                    <template v-if=\"bid.date\">\n                                        {{ dateDayMonthFormat(bid.date) }}\n                                    </template>\n                                    <template v-else> Дата не выбрана </template>\n                                </strong>\n                                <app-list-item-service\n                                    v-for=\"service in SERVICES(bid.servicesIDs)\"\n                                    :key=\"service.serviceId\"\n                                    v-bind=\"service\"\n                                    cursor=\"default\"\n                                    class=\"c-side-bar__service-item\"\n                                    with-out-avatar\n                                    hide-description\n                                />\n                            </template>\n                        </v-list>\n                    </template>\n                </template>\n            </div>\n            <div class=\"c-side-bar__check\">\n                <div>\n                    <span>Всего</span>\n                    <b-price :value=\"averageSum || 0\" :type=\"averagePriceType\" />\n                </div>\n            </div>\n            <div class=\"c-side-bar__border c-side-bar-border\" />\n        </app-side-bar-layout>\n        <transition name=\"slide-y-reverse-transition\">\n            <the-side-bar-bottom\n                v-if=\"hasBottomBar\"\n                :loading-btn=\"loadingBtn\"\n                :has-error=\"hasError\"\n                @loading=\"onLoading\"\n                @error=\"onError\"\n            />\n        </transition>\n    </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.c-side-bar {\n    &__online {\n        ::v-deep .c-side-bar {\n            border-radius: $border-radius-card $border-radius-card 0 0;\n            padding: $base-indent 0 0 0 !important;\n            &__title {\n                margin-top: $gutter;\n            }\n        }\n    }\n    &__button {\n        padding: $gutter;\n        width: 100%;\n    }\n    &:not(.is-loading) {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n    }\n\n    @include max(xs) {\n        border-bottom-left-radius: 0 !important;\n        border-bottom-right-radius: 0 !important;\n    }\n\n    &__services,\n    &__check {\n        width: 100%;\n        @include border(top);\n    }\n\n    &__services {\n        .empty-text {\n            margin-bottom: 0;\n            padding: $gutter;\n            color: $color-text--light;\n            font-size: 15px;\n            text-align: center;\n        }\n\n        ::v-deep .v-list-item {\n            &__title {\n                white-space: normal;\n            }\n        }\n    }\n\n    &__service-item {\n        //&.v-list-item {\n        //    padding: 0 $gutter;\n        //    margin: $gutter 0;\n        //}\n        ::v-deep .v-list-item {\n            &__title {\n                margin-bottom: 2px !important;\n                font-weight: 400 !important;\n                font-size: 15px;\n                line-height: 21px;\n            }\n            &__content {\n                padding: 0;\n            }\n        }\n    }\n\n    &__check {\n        padding: $gutter;\n        font-size: 17px;\n        font-weight: 500;\n        line-height: 23px;\n\n        & > div {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n\n        span {\n            &:first-child {\n                margin-right: $base-indent;\n            }\n        }\n    }\n}\n\n.c-side-bar-border {\n    //position: relative;\n    position: absolute;\n    bottom: -15px;\n    left: 0;\n    width: 100%;\n    height: 20px;\n    margin-top: -8px;\n    overflow: hidden;\n    background: transparent;\n    text-align: center;\n\n    &::before {\n        content: '';\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        left: 12px;\n        height: 10px;\n        background-image: radial-gradient(\n            circle at 10px -5px,\n            rgb(255, 255, 255) 12px,\n            rgba(255, 255, 255, 0) 13px\n        );\n        background-repeat: repeat-x;\n        background-size: 40px 23px;\n    }\n\n    &::after {\n        content: '';\n        position: absolute;\n        right: 0;\n        bottom: 0;\n        left: -8px;\n        height: 15px;\n        background-image: radial-gradient(\n            circle at 10px 17px,\n            rgba(255, 255, 255, 0) 13px,\n            rgb(255, 255, 255) 14px\n        );\n        background-repeat: repeat-x;\n        background-size: 40px 8px;\n    }\n\n    &__inner {\n    }\n}\n\n.v-list-item {\n    & + .v-list-item {\n        border-top: 0;\n    }\n}\n</style>\n"],"names":["BPrice","defineAsyncComponent","__vitePreload","_sfc_main","AppListItemService","BoxShadow","TheSideBarBottom","sideBarMixin","metaMixin","servicesMixin","mapGetters","routes","countServices","item","dateDayMonthFormat","addressID","employeeID","errors","employee","serviceID","e","setBidsInLocalStorage","$event"],"mappings":"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"}