{"version":3,"file":"studio_space_cta-3XEErkFJ.js","sources":["../../../app/javascript/components/spaces/StudioSpaceCta.vue","../../../app/javascript/entrypoints/studio_space_cta.js"],"sourcesContent":["<template>\n    <div class=\"hire-banner flex-column flex-md-row flex-nowrap\">\n        <div class=\"hire-banner__right-child-teleported me-2\" style=\"\" :class=\"{'' : !isTeleported}\">\n            <div class=\"d-flex w-100\">\n                <span class=\"mb-md-3 m-1\" style=\"font-size: 16px;line-height: 15px; font-weight: 500;\"\n                      :class=\"{'my-2' : isTeleported}\">{{ this.spanCopy }}</span>\n                <div class=\"d-flex justify-content-between cta-cont-desk-mobile-2\"\n                     :class=\"{'mb-0 mb-md-3 cta-cont-desk-mobile' : !isTeleported, 'flex-row align-items-center justify-content-between' : isTeleported}\">\n                    <div class=\"d-flex align-items-end\">\n                        <span class=\"space-price text-nowrap d-flex flex-nowrap align-items-end  me-2\">\n                          $ {{ sku.price.toLocaleString(\"en\", {useGrouping: true}) }}\n                        </span>\n\n                        <span class=\"space-price text-nowrap d-flex flex-nowrap align-items-end\" style=\"line-height: 23px;\">\n                            <span class=\"mb-md-2 m-0\" style=\"color: var(--space-txt-color);font-weight: 800\">{{\n                                    sku.currency\n                                }}</span>\n                            <span class=\"mx-2 mb-md-2 m-0\"> / </span>\n                            <span class=\"mb-md-2 m-0\"\n                                  v-html=\"' '+productPeriodicity('long') + (variationDescription?.minimum_contract_timeframe? '*' : '') \"></span>\n                        </span>\n                    </div>\n                    <a :href=\"urlQueryString\" class=\"button-space big w-100 me-0 me-sm-5 p-2 px-lg-5\">\n                        {{ this.locale == 'en' ? 'Hire now' : 'Contrata ahora' }}\n                    </a>\n                </div>\n            </div>\n        </div>`\n    </div>\n</template>\n<script>\nimport spaceMixin from '../space-mixin'\n\nexport default {\n    inject: ['locale'],\n    mixins: [spaceMixin],\n    props: {\n        product: Object,\n        isTeleported: Boolean,\n    },\n    data() {\n        return {}\n    },\n    computed: {\n        productSlug() {\n            return this.product && this.product?.slug ? this.product.slug : '#';\n        },\n        spanCopy() {\n            return locale === 'es' ? 'Contrata por' : 'Hire for'\n        },\n        sku() {\n            if (this.product && this.product?.relationships?.product?.skus?.length > 0) {\n                return this.product.relationships.product.skus[0];\n            }\n            return null;\n        },\n        variationDescription() {\n            let variationDescription = null;\n            if (this.product?.space_details_for_variations) {\n                variationDescription = this.product.space_details_for_variations.length > 1 ? this.product.space_details_for_variations.find(x => x.identifier === this.sku) : this.product.space_details_for_variations[0]\n            }\n            return variationDescription;\n        },\n        urlQueryString() {\n            let url = null;\n            let sku = this.activeSku ? this.activeSku : this.productSlug;\n            let spots = this.spots ? this.spots : this.variationDescription?.min_people_spaces_restriction;\n            let hours = this.hours ? this.hours : this.variationDescription?.min_hours_restriction;\n            let foodOption = this.foodOption ? this.foodOption : 'none';\n            url = `/${this.locale}/checkout/${this.productSlug}?sku=${sku}&spaces=${spots}&hours=${hours}&foodOption=${foodOption}`\n            return url;\n        },\n        activeSku(){\n            return this.product?.relationships?.product?.skus[0]?.sku\n        },\n        spaceName() {\n            return this.product.slug\n        }\n    }\n}\n</script>\n<style lang=\"scss\" scoped>\n.hire-banner {\n    display: block;\n    padding: clamp(15px, 1vw, 30px);\n    @media screen and (max-width: 767px) {\n        background-color: white;\n        height: 0px;\n        padding-top: 0px;\n        margin-top: -15px;\n    }\n\n    .hire-banner__right-child-teleported {\n        width: auto;\n        flex-wrap: nowrap;\n        flex-direction: column;\n        align-items: center;\n        justify-content: space-between;\n        @media screen and (max-width: 800px) {\n            border-left: none;\n        }\n        border-left: none;\n        padding-inline-start: clamp(15px, 0vw, 60px) !important;\n        margin-inline-start: clamp(15px, 4vw, 60px);\n        @media screen and (max-width: 767px) {\n            position: fixed;\n            left: 0;\n            bottom: 0;\n            width: 100%;\n            height: auto;\n            align-items: center;\n            background-color: white;\n            z-index: 5;\n            flex-direction: row;\n            flex-wrap: nowrap;\n            padding-inline: clamp(15px, 4vw, 60px);\n            padding-block: 10px;\n            -webkit-box-shadow: 0px -6px 5px -1px rgba(0, 0, 0, 0.1);\n            box-shadow: 0px -6px 5px -1px rgba(0, 0, 0, 0.1);\n            margin-inline: 0;\n            margin-inline-start: 0px !important;\n            .space-price {\n                color: var(--space-txt-color);\n                font-size: 25px;\n                font-weight: 800;\n                line-height: 25px;\n            }\n            .space-price + .space-price {\n                color: var(--muted);\n                font-size: 12px;\n                font-weight: 500;\n            }\n        }\n\n        > div {\n            flex-direction: column;\n        }\n    }\n    .button-space{\n        max-width: 280px;\n    }\n}\n\n.hire-banner__right-child {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    width: 100%;\n    align-items: flex-end;\n    justify-content: flex-start;\n    border-left: none;\n    padding-inline: 0;\n    margin-inline: 0;\n    @media screen and (max-width: 767px) {\n        border-left: none;\n    }\n\n    > div {\n        flex-direction: column;\n    }\n}\n\n.cta-cont-desk-mobile {\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.cta-cont-desk-mobile-2 {\n    align-items: center;\n    gap: 5px 20px;\n    @media screen and (max-width: 991px) {\n        flex-wrap: wrap;\n    }\n    @media screen and (max-width: 768px) {\n        flex-wrap: nowrap;\n        width: 100%;\n        justify-content: space-between;\n    }\n}\n</style>","import App from '@components/spaces/StudioSpaceCta.vue'\nimport { generateApplication } from '@helpers/generate_component.js';\n\ngenerateApplication(App, \"#hire-banner__right\", {\n    injections: [{ name: 'locale', module: locale }],\n    props: {\n        product :  product\n    },\n})"],"names":["_sfc_main","spaceMixin","_a","_d","_c","_b","variationDescription","x","url","sku","spots","hours","foodOption","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_7","_withScopeId","_createElementVNode","_openBlock","_createElementBlock","_normalizeClass","$props","$options","_hoisted_5","_hoisted_6","_toDisplayString","_ctx","_hoisted_9","generateApplication","App"],"mappings":"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"}