{"version":3,"file":"side-bar.mixin-763d6071.js","sources":["../../../src/components/layouts/side-bar/layout.vue","../../../src/components/layouts/side-bar/side-bar.mixin.js"],"sourcesContent":["<script>\nimport { parsePhone } from '@beautybox/core/utils';\n\nexport default {\n    name: 'app-side-bar-layout',\n    props: {\n        address: {\n            type: String,\n            default: '',\n        },\n        rating: {\n            type: Number,\n            default: 0,\n        },\n        actions: {\n            type: Array,\n            default: () => [],\n        },\n        avatar: {\n            type: String,\n            default: '',\n        },\n        hideMessengers: {\n            type: Boolean,\n            default: false,\n        },\n        loading: {\n            type: Boolean,\n            default: true,\n        },\n        messengers: {\n            type: Array,\n            default: () => [],\n        },\n        name: {\n            type: String,\n            default: '',\n        },\n    },\n    data() {\n        return {\n            rowWrap: 3,\n        };\n    },\n    computed: {\n        messengerRows() {\n            if (this.messengers.length > this.rowWrap) {\n                return [\n                    this.messengers.slice(0, this.rowWrap),\n                    this.messengers.slice(this.rowWrap, this.messengers.length),\n                ];\n            } else {\n                return [this.messengers];\n            }\n        },\n    },\n    methods: {\n        parsePhone,\n        scrollToReviews() {\n            const elementToScroll = document.querySelector('#reviews');\n            if (elementToScroll) {\n                elementToScroll.scrollIntoView({ behavior: 'smooth', alignToTop: true });\n            }\n        },\n    },\n};\n</script>\n\n<template>\n    <div>\n        <v-card flat class=\"c-side-bar\" :class=\"[{ 'is-loading': loading }]\">\n            <div class=\"d-flex\" :class=\"[{ 'flex-column align-center': !$isMobile }]\">\n                <!-- AVATAR -->\n                <div class=\"c-side-bar__avatar\">\n                    <svg\n                        v-if=\"loading\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 180.156 180\"\n                        class=\"skeleton-avatar-icon\"\n                    >\n                        <rect width=\"180\" height=\"180\" fill=\"#dee3e7\" />\n                        <path\n                            fill=\"#fff\"\n                            d=\"M180.1,180H.175c-1.852-55.63,43.518-52.963,66.3-66.3,6.351-3.718,7.053-13.828,3.259-19.26C55.448,74,54.026,62.148,55.8,44.667c2.908-28.594,31.408-29.926,31.408-29.926h5.852s28.5,1.332,31.407,29.926c1.778,17.481.356,29.333-13.925,49.777-3.8,5.432-3.093,15.542,3.259,19.26C136.582,127.037,181.953,124.37,180.1,180Z\"\n                        />\n                    </svg>\n                    <app-image-user-avatar\n                        v-else\n                        square\n                        :image=\"avatar\"\n                        :size=\"$isMobile ? 80 : 76\"\n                    />\n                </div>\n                <div class=\"c-side-bar__title\" :class=\"[{ 'ml-5 ': $isMobile }]\">\n                    <v-skeleton-loader v-if=\"loading\" type=\"heading\" width=\"100%\" />\n                    <template v-else>\n                        <div class=\"c-side-bar__name\" :class=\"{ 'text-center': !$isMobile }\">\n                            {{ name }}\n                        </div>\n                        <div v-if=\"!$isMobile\" class=\"c-side-bar__address text-center\">\n                            {{ address }}\n                        </div>\n                    </template>\n                    <div\n                        v-if=\"$isMobile\"\n                        class=\"c-side-bar__rating d-flex align-center\"\n                        @click=\"scrollToReviews\"\n                    >\n                        <app-rating v-model=\"rating\" readonly medium />\n                        <span v-if=\"rating\" class=\"font-weight-bold ml-1\">{{ rating }}</span>\n                    </div>\n                </div>\n            </div>\n            <template v-if=\"!hideMessengers\">\n                <!--                messengerRows-->\n                <template v-if=\"loading || messengers.length\">\n                    <v-card-actions\n                        v-for=\"(row, index) in messengerRows\"\n                        :key=\"index\"\n                        class=\"c-side-bar__footer mt-5\"\n                    >\n                        <template v-if=\"loading\">\n                            <v-skeleton-loader\n                                v-for=\"item in 3\"\n                                :key=\"item\"\n                                width=\"100%\"\n                                type=\"button\"\n                                :class=\"{ 'ml-4': item !== 1 }\"\n                            />\n                        </template>\n                        <template v-else-if=\"messengers.length\">\n                            <v-btn\n                                v-for=\"messenger in row\"\n                                :key=\"messenger.link\"\n                                :href=\"messenger.link\"\n                                class=\"c-side-bar__btn flex-grow-1 rounded-lg\"\n                                :color=\"messenger.name\"\n                                large\n                            >\n                                <app-svg fill=\"#fff\" :name=\"`social-${messenger.name}--outline`\" />\n                                <span\n                                    v-if=\"row.length < 2\"\n                                    class=\"font-weight-regular white--text ml-2\"\n                                    style=\"font-size: 15px\"\n                                >\n                                    Написать в\n                                    <span class=\"c-side-bar__messenger\">{{ messenger.name }}</span>\n                                </span>\n                            </v-btn>\n                        </template>\n                    </v-card-actions>\n                </template>\n                <template v-if=\"loading || actions.length\">\n                    <v-card-actions\n                        v-if=\"!$isMobile\"\n                        class=\"c-side-bar__footer c-side-bar__footer--actions\"\n                    >\n                        <template v-if=\"loading\">\n                            <v-skeleton-loader\n                                v-for=\"item in 3\"\n                                :key=\"item\"\n                                width=\"100%\"\n                                type=\"button\"\n                                class=\"mt-5\"\n                                :class=\"{ 'ml-4': item !== 1 }\"\n                            />\n                        </template>\n                        <template v-else-if=\"actions.length\">\n                            <template v-for=\"messenger in actions\">\n                                <v-btn\n                                    v-if=\"messenger.text === 'Позвонить' && $isMobile\"\n                                    :key=\"messenger.link\"\n                                    :href=\"`tel: ${parsePhone(messenger.link)}`\"\n                                    color=\"white\"\n                                    class=\"c-side-bar__btn\"\n                                    large\n                                >\n                                    {{ messenger.text }}\n                                </v-btn>\n                                <v-btn\n                                    v-else-if=\"messenger.text === 'Онлайн-запись'\"\n                                    :key=\"messenger.link\"\n                                    color=\"primary\"\n                                    class=\"c-side-bar__btn mt-5\"\n                                    large\n                                    @click=\"$router.push({ name: messenger.link })\"\n                                >\n                                    {{ messenger.text }}\n                                </v-btn>\n                            </template>\n                        </template>\n                    </v-card-actions>\n                </template>\n            </template>\n            <v-skeleton-loader\n                v-if=\"$slots.default && loading\"\n                width=\"100%\"\n                type=\"paragraph\"\n                class=\"skeleton-loader-paragraph\"\n            />\n            <slot v-else-if=\"$slots.default\" />\n        </v-card>\n    </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.c-side-bar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    box-shadow: $box-shadow-light !important;\n    border-radius: $border-radius-card;\n    padding: 20px;\n    @include max(sm) {\n        margin: 0 20px;\n        margin-top: -75px;\n\n        align-items: flex-start;\n    }\n\n    &__avatar {\n        background-color: #fff;\n\n        z-index: z(fixed);\n\n        @include min(md) {\n            position: relative;\n        }\n\n        .c-avatar,\n        .skeleton-avatar-icon,\n        ::v-deep .v-skeleton-loader {\n            border-radius: $border-radius-card !important;\n\n            @include min(md) {\n                margin-top: -58px;\n                box-shadow: 0 8px 16px #00000029;\n            }\n\n            //@include max(sm) {\n            //    margin-top: -45px;\n            //}\n        }\n\n        ::v-deep {\n            .v-skeleton-loader {\n                &__avatar {\n                    background-color: #fff;\n                }\n            }\n        }\n\n        .skeleton-avatar-icon {\n            width: 76px;\n            height: 76px;\n\n            @include max(sm) {\n                width: 90px;\n                height: 90px;\n            }\n        }\n    }\n\n    &__title {\n        //padding: $gutter;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        width: 100%;\n        text-align: left;\n        word-break: break-word;\n\n        //@include max(sm) {\n        //    padding-right: $base-indent;\n        //    padding-left: $base-indent;\n        //}\n        @include max(sm) {\n            justify-content: flex-start;\n        }\n\n        & + .c-side-bar__footer {\n            padding-top: 0;\n        }\n\n        ::v-deep .v-skeleton-loader__heading {\n            width: 100%;\n        }\n    }\n\n    &__name {\n        font-size: 20px;\n        font-weight: 700;\n        line-height: 24px;\n    }\n\n    &__rating {\n        span {\n            margin-top: 2px;\n            line-height: 19px;\n        }\n    }\n\n    &__address {\n        margin-top: $base-indent / 2;\n        color: $color-text--light;\n        font-size: 15px;\n        font-weight: 400;\n        line-height: 21px;\n    }\n\n    &__footer {\n        // margin-top: 20px;\n        padding: 0;\n        align-self: stretch;\n        justify-content: center;\n\n        //@include max(sm) {\n        //    padding-right: $base-indent;\n        //    padding-bottom: $base-indent;\n        //    padding-left: $base-indent;\n        //}\n\n        &--actions {\n            padding-top: 0 !important;\n            @include btnHalfSize;\n        }\n    }\n\n    &__btn {\n        text-transform: initial;\n        border-radius: $border-radius;\n        box-shadow: 0 2px 5px rgb(183, 183, 183) !important;\n\n        &:active {\n            box-shadow: $box-shadow-base--active !important;\n        }\n\n        @include max(sm) {\n            font-size: 16px !important;\n        }\n    }\n\n    &__messenger {\n        display: inline-block;\n        &::first-letter {\n            text-transform: capitalize;\n        }\n    }\n\n    &__bottom {\n        display: flex;\n        flex-direction: row-reverse;\n        width: 100%;\n    }\n    ::v-deep {\n        .skeleton-loader-paragraph {\n            padding: 0 $gutter $gutter;\n        }\n    }\n}\n\n.call {\n    background-color: #fff !important;\n    box-shadow: $box-shadow-base !important;\n}\n\n::v-deep .v-skeleton-loader {\n    &__button {\n        width: 100%;\n    }\n}\n</style>\n","import AppSideBarLayout from '@/components/layouts/side-bar/layout';\nimport { mapActions, mapGetters } from 'vuex';\n\nexport const sideBarMixin = {\n    components: { AppSideBarLayout },\n    data: () => ({\n        loading: true,\n        profile: {},\n    }),\n    computed: {\n        ...mapGetters({\n            SALON_PROFILE: 'SALON_PROFILE',\n        }),\n    },\n    methods: {\n        ...mapActions({\n            GET_PROFILE: 'GET_PROFILE',\n        }),\n    },\n};\n"],"names":["_sfc_main","parsePhone","elementToScroll","sideBarMixin","AppSideBarLayout","mapGetters","mapActions"],"mappings":"6XAGA,MAAAA,EAAA,CACA,KAAA,sBACA,MAAA,CACA,QAAA,CACA,KAAA,OACA,QAAA,EACA,EACA,OAAA,CACA,KAAA,OACA,QAAA,CACA,EACA,QAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EACA,OAAA,CACA,KAAA,OACA,QAAA,EACA,EACA,eAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,WAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EACA,KAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EACA,MAAA,CACA,MAAA,CACA,QAAA,CACA,CACA,EACA,SAAA,CACA,eAAA,CACA,OAAA,KAAA,WAAA,OAAA,KAAA,QACA,CACA,KAAA,WAAA,MAAA,EAAA,KAAA,OAAA,EACA,KAAA,WAAA,MAAA,KAAA,QAAA,KAAA,WAAA,MAAA,CACA,EAEA,CAAA,KAAA,UAAA,CAEA,CACA,EACA,QAAA,CACA,WAAAC,EACA,iBAAA,CACA,MAAAC,EAAA,SAAA,cAAA,UAAA,EACAA,GACAA,EAAA,eAAA,CAAA,SAAA,SAAA,WAAA,EAAA,CAAA,CAEA,CACA,CACA,ywGC9DaC,EAAe,CACxB,WAAY,CAAE,iBAAAC,CAAkB,EAChC,KAAM,KAAO,CACT,QAAS,GACT,QAAS,CAAE,CACnB,GACI,SAAU,CACN,GAAGC,EAAW,CACV,cAAe,eAC3B,CAAS,CACJ,EACD,QAAS,CACL,GAAGC,EAAW,CACV,YAAa,aACzB,CAAS,CACJ,CACL"}