{"version":3,"file":"FrequencyV2-293c6d58.js","sources":["../../../resources/js/bookingForm/src/ExtraV2.vue","../../../resources/js/bookingForm/src/FrequencyV2.vue"],"sourcesContent":["<template>\n    <el-tooltip\n        class=\"extra\"\n        popper-class=\"tooltip-text\"\n        placement=\"top\"\n        :disabled=\"!(extra.description != '' && extra.description != 'N/A' && extra.description != null)\">\n\n        <!-- Extra description tooltip -->\n        <template slot=\"content\">{{ extra.description }}</template>\n\n        <div @click=\"toggle\" :class=\"{ active: (isActive) }\" :style=\"extra.quantity_based == 0 ? 'cursor: pointer;' : ''\">\n\n            <!-- Extra Icon -->\n            <div class=\"extra-icon\">\n                <img v-if=\"extra.icon\" :src=\"extra.icon.file\" height=\"36\"/>\n                <img v-else src=\"/images/cleaning.png\" />\n            </div>\n\n            <!-- Name & Price -->\n            <div class=\"extra-name\">{{ extra.name }}</div>\n            <div class=\"extra-price\">{{ currency }}{{ extra.price }}</div>\n\n            <!-- Quantity Based -->\n            <div v-if=\"extra.quantity_based === 1\" class=\"extra-input-number\">\n                <div class=\"el-input-number__container\">\n                    <span\n                        class=\"el-input-number__decrease\"\n                        :class=\"!counter ? 'disabled' : ''\"\n                        role=\"button\"\n                        @keydown.enter=\"decrease\"\n                        @click=\"decrease\">\n                        <i class=\"el-icon-minus\"></i>\n                    </span>\n                </div>\n                <div class=\"el-input-number__container\">\n                    <span\n                        class=\"el-input-number__increase\"\n                        role=\"button\"\n                        @keydown.enter=\"increase\"\n                        @click=\"increase\">\n                        <i class=\"el-icon-plus\"></i>\n                    </span>\n                </div>\n            </div>\n\n            <!-- Quantity Based Counter-->\n            <div v-if=\"extra.quantity_based === 1 && counter\" class=\"extra-counter\">{{ counter }}X</div>\n\n            <!-- Quantity Based Input Number -->\n            <div v-if=\"extra.quantity_based === 2\" class=\"extra-quantity-number\">\n                <el-input-number @input=\"toggle\" v-model=\"counter\" size=\"mini\" :min=\"0\" :max=\"99999\" :class=\"!counter ? 'input-disabled' : ''\" />\n            </div>\n\n\n        </div>\n\n    </el-tooltip>\n</template>\n\n<script>\n    export default {\n        data(){\n            return {\n                counter: 0,\n            }\n        },\n        props: {\n            extra: {\n                type: Object,\n                required: true,\n            },\n            isActive: {\n                type: Boolean,\n            },\n            currency: {\n                type: String,\n            },\n        },\n        methods: {\n            toggle(event) {\n                if(this.extra.quantity_based)\n                    this.$emit(\"click\", this.counter);\n                else{\n                    this.$emit(\"click\", this.isActive ? 0 : 1);\n                }\n            },\n\n            increase(){\n                this.counter++;\n            },\n\n            decrease(){\n                if(this.counter>=1)\n                    this.counter--;\n\n            }\n        },\n    }\n</script>\n\n<style>\n    .tooltip-text {\n        font-family: 'Inter', sans-serif;\n        max-width: 300px;\n        border-radius: 6px;\n    }\n\n    .tooltip-text::first-letter {\n        text-transform: uppercase;\n    }\n</style>\n\n<style lang=\"scss\" scoped>\n\n    .extra {\n        border: 1.5px solid #E5E9EF;\n        border-radius: 16px;\n        padding: 16px;\n        padding-top: 0;\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n\n        &:hover {\n            .el-input-number__decrease, .el-input-number__increase {\n                display: flex;\n            }\n        }\n    }\n\n    .active {\n        border: 1.5px solid var(--color-primary);\n    }\n\n    .extra-icon {\n        width: 72px;\n        height: 72px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: 0 auto;\n    }\n\n    .extra-name {\n        font-size: 12px;\n        text-align: center;\n        color: #8492A6;\n        margin-bottom: 3px;\n    }\n\n    .extra-price {\n        font-size: 13px;\n        text-align: center;\n        font-weight: 600;\n        color: var(--color-primary);\n    }\n\n    .extra-input-number {\n        position: absolute;\n        display: flex;\n        justify-content: space-between;\n        background: transparent;\n        min-width: calc(100% + 22px);\n        top: 50%;\n        transform: translateY(-50%);\n        padding: 0 4px;\n\n        .el-input-number__container {\n            background-color: white;\n        }\n    }\n\n    .extra-quantity-number::v-deep {\n        position: absolute;\n        bottom: -9px;\n        background: white;\n        padding: 0 4px;\n\n        .el-input-number--mini {\n            width: unset;\n            min-width: 80px;\n        }\n\n        .el-input--mini {\n            .el-input__inner {\n                height: 22px;\n            }\n        }\n    }\n\n    .extra-counter {\n        color: white;\n        background-color: var(--color-primary);\n        border: 1.5px solid var(--color-primary);\n        border-radius: 5px;\n        padding: 0 10px;\n        text-align: center;\n        font-size: 12px;\n        font-weight: 500;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        bottom: -8px;\n    }\n\n    .el-input-number__decrease, .el-input-number__increase {\n        display: none;\n        border-radius: 50px;\n        width: 20px;\n        height: 20px;\n        background: var(--color-primary);\n        border: none;\n        position: unset;\n        justify-content: center;\n        align-items: center;\n\n        i {\n            color: white;\n            font-weight: 600;\n            font-size: 10px;\n        }\n    }\n\n    .el-input-number::v-deep {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n\n        .el-input-number__decrease, .el-input-number__increase {\n            border-radius: 50px;\n            width: 20px;\n            height: 20px;\n            background: var(--color-primary);\n            border: none;\n            position: unset;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n\n            i {\n                color: white;\n                font-weight: 600;\n                font-size: 10px;\n            }\n        }\n        .el-input__inner {\n            padding: 0;\n            font-family: 'Inter', sans-serif;\n            width: 100%;\n            border: none;\n            border-radius: 0;\n            color: #8492A6;\n            text-align: center;\n            font-size: 12px;\n            font-weight: 500;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        .el-input-number__decrease {\n            order: 1;\n        }\n        .el-input {\n            order: 2;\n            max-width: 30px;\n        }\n        .el-input-number__increase {\n            order: 3;\n        }\n        &.input-disabled {\n            .el-input-number__decrease {\n                opacity: 0.3;\n            }\n        }\n    }\n\n    .disabled {\n        opacity: 0.3;\n        cursor: default;\n    }\n\n</style>\n","<template>\n    <div @click=\"chooseFrequency\" :class=\"{ 'active': isActive }\" class=\"frequency\">\n        <div class=\"frequency-label\">\n            <div class=\"radio-button\">\n                <div class=\"radio-button-active\"></div>\n            </div>\n            <div class=\"frequency-name\">{{ frequency.name }}</div>\n        </div>\n        <span class=\"frequency-discount\" v-if=\"hasDiscount\">\n            <span class=\"discount-content\" v-if=\"frequency.amount > 0\">Save ${{frequency.amount}}</span>\n            <span class=\"discount-content\" v-else>Save {{frequency.percent}}%</span>\n        </span>\n    </div>\n</template>\n\n<script>\n    export default {\n        props: {\n            frequency: {\n                type: Object,\n                required: true\n            },\n            isActive: {\n                type: Boolean\n            }\n        },\n        methods: {\n            chooseFrequency(event) {\n                this.$emit('click', event)\n            }\n        },\n        computed: {\n            hasDiscount() {\n                if (this.frequency.amount > 0 ||\n                this.frequency.percent > 0) {\n                    return true\n                }\n                return false;\n            }\n        }\n    }\n</script>\n\n<style lang=\"scss\" scoped>\n    .frequency {\n        border-radius: var(--input-border-radius);\n        border: 1px solid #E5E9EF;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        white-space: nowrap;\n        height: 44px;\n        padding: 0 10px 0 14px;\n        box-sizing: border-box;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n\n        &:not(.active) {\n            cursor: pointer;\n        }\n\n        &.active {\n            border: 1px solid var(--color-primary);\n\n            .radio-button {\n                border: 1px solid var(--color-primary) !important;\n\n                .radio-button-active {\n                    background-color: var(--color-primary);\n                    width: 10px;\n                    height: 10px;\n                    border-radius: 100px;\n                }\n            }\n\n            .frequency-name {\n                color: var(--color-primary);\n            }\n        }\n\n        .frequency-label {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n\n            .frequency-name {\n                color: #8492A6;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                white-space: nowrap;\n            }\n\n            .radio-button {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                min-width: 16px;\n                width: 16px;\n                height: 16px;\n                border-radius: 100px;\n                border: 1px solid #E5E9EF;\n            }\n        }\n\n        .frequency-discount {\n            padding: 0 8px;\n            border-radius: calc(var(--input-border-radius) - 4px);\n            background-color: #f2f2f2;\n            height: 24px;\n            display: flex;\n            align-items: center;\n\n            .discount-content {\n                color: var(--color-primary);\n                font-weight: 500;\n                font-size: 11px;\n                line-height: 1;\n            }\n        }\n    }\n</style>\n"],"names":["_sfc_main","event"],"mappings":"gXA4DA,MAAAA,EAAA,CACA,MAAA,CACA,MAAA,CACA,QAAA,CACA,CACA,EACA,MAAA,CACA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EACA,SAAA,CACA,KAAA,OACA,EACA,SAAA,CACA,KAAA,MACA,CACA,EACA,QAAA,CACA,OAAAC,EAAA,CACA,KAAA,MAAA,eACA,KAAA,MAAA,QAAA,KAAA,OAAA,EAEA,KAAA,MAAA,QAAA,KAAA,SAAA,EAAA,CAAA,CAEA,EAEA,UAAA,CACA,KAAA,SACA,EAEA,UAAA,CACA,KAAA,SAAA,GACA,KAAA,SAEA,CACA,CACA,w3DCjFA,MAAAD,EAAA,CACA,MAAA,CACA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EACA,SAAA,CACA,KAAA,OACA,CACA,EACA,QAAA,CACA,gBAAAC,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,EACA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,UAAA,OAAA,GACA,KAAA,UAAA,QAAA,CAIA,CACA,CACA"}