{"version":3,"file":"NeedHelp-iCd_cbbO.js","sources":["../../../resources/js/motonet/modules/eshop/frontend/ContactFormModal.vue","../../../resources/js/motonet/modules/eshop/frontend/NeedHelp.vue"],"sourcesContent":["<template>\n    <v-dialog v-model=\"active\" width=\"850\">\n        <v-sheet class=\"overflow-hidden\">\n            <v-row class=\"bg-grey-lighten-5 c-search-form\">\n                <v-col cols=\"auto\" md=\"4\" xl=\"4\" lg=\"4\" :class=\"{\n                    'pa-11 pb-0 pr-0': $vuetify.display.mdAndUp,\n                    'pa-8 pb-0': $vuetify.display.smAndDown\n                }\">\n                    <div class=\"has-guy\">\n                        <p class=\"text-h5 font-weight-bold\">{{$t('contact-form.write_us')}}</p>\n                    </div>\n                </v-col>\n                <v-col :class=\"{\n                    'pa-11': $vuetify.display.mdAndUp,\n                    'pa-8': $vuetify.display.smAndDown\n                }\">\n                    <p class=\"text-body-3 font-weight-medium text-black mb-2\">{{$t('contact-form.email')}}: <span class=\"text-red\">*</span></p>\n                    <v-text-field\n                        variant=\"outlined\"\n                        :rules=\"[rules.required, rules.email]\"\n                        density=\"compact\"\n                        validate-on=\"blur\"\n                        autocomplete=\"email\"\n                        type=\"email\"\n                        v-model=\"email\"\n                        bg-color=\"white\"\n                    ></v-text-field>\n                    <p class=\"text-body-3 font-weight-medium text-black mb-2\">{{$t('contact-form.query')}}: <span class=\"text-red\">*</span></p>\n                    <v-textarea\n                        variant=\"outlined\"\n                        rows=\"4\"\n                        :rules=\"[rules.required]\"\n                        v-model=\"question\"\n                        bg-color=\"white\"\n                        :placeholder=\"$t('contact-form.placeholder')\"\n                    >\n                    </v-textarea>\n                    <v-row align=\"center\">\n                        <v-col>\n                            <div @click=\"go(route('gdpr'))\" class=\"text-tiny-link text-grey c-em\">{{$t('contact-form.personal_1')}} <span class=\"text-decoration-underline c-link \">{{$t('contact-form.personal_2')}}</span></div>\n                        </v-col>\n                        <v-col cols=\"auto\">\n                            <v-btn\n                                color=\"orange\"\n                                variant=\"flat\"\n                                class=\"px-8\"\n                                :height=\"48\"\n                                :loading=\"loading\"\n                                @click=\"sendQuestion\"\n                            >\n                                <p class=\"text-subtitle-1 font-weight-bold text-white\">{{$t('contact-form.send_action')}}</p>\n                            </v-btn>\n                        </v-col>\n                        <v-col cols=\"auto\">\n                            <v-btn\n                                color=\"grey\"\n                                variant=\"flat\"\n                                class=\"px-6\"\n                                :height=\"48\"\n                                @click=\"active = false\"\n                            >\n                                <p class=\"text-subtitle-1 font-weight-bold text-white\">{{$t('contact-form.storno_action')}}</p>\n                            </v-btn>\n                        </v-col>\n                    </v-row>\n                </v-col>\n            </v-row>\n        </v-sheet>\n    </v-dialog>\n</template>\n<script setup>\nimport {computed, inject, ref, watch} from \"vue\";\nimport {trans} from \"laravel-vue-i18n\";\nimport { router } from '@inertiajs/vue3';\nconst emit = defineEmits(['update:modelValue']);\nconst props = defineProps({\n   modelValue:Boolean,\n   email: String\n})\n\nconst active = computed({\n    get() {\n        return props.modelValue\n    },\n    set(val) {\n        emit('update:modelValue', val)\n    }\n})\nconst go = (where) => {\n    active.value = false;\n    router.visit(where);\n}\nconst loading = ref(false);\nconst sendQuestion = () => {\n    loading.value = true;\n    if(email.value != '' && question.value != '') {\n        router.post(route('contact.query'), {\n            email: email.value,\n            question: question.value\n        }, {\n            onSuccess: () => {\n                email.value = '';\n                question.value = '';\n                active.value = false;\n                loading.value = false;\n            }\n        });\n    }\n}\nconst email = ref('');\nconst question = ref('');\n\nwatch(() => props.email, (now) => {\n    email.value = now;\n}, { immediate: true })\n\n\nconst rules = {\n    required: value => !!value || trans('contact-form.required'),\n    counter: value => value.length <= 20 || trans('contact-form.max_20'),\n    email: value => {\n        const pattern = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/\n        return pattern.test(value) || trans('contact-form.not_valid_email')\n    }\n}\nconst route = inject('route');\n</script>\n<style scoped lang=\"scss\">\n@use '../../../../plugins/vuetify-settings' as *;\n@use 'vuetify/lib/styles/settings/variables' as *;\n@use 'sass:map';\n.has-guy {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    background-image: url('../../../../assets/images/search/look.png');\n    background-position: center bottom;\n    background-size: contain;\n    background-repeat: no-repeat;\n    @media #{map.get($display-breakpoints, 'xs')} {\n        background: none;\n    }\n}\n.c-link {\n    cursor:pointer;\n    &:hover {\n        text-decoration: none!important;\n        background-color: map.get($orange, 'lighten-4');\n        padding: 2px 5px;\n        border-radius: 5px;\n        margin: -2px -5px;\n        color: map.get($orange, 'base')\n    }\n}\n</style>\n","<template>\n    <div>\n        <motonet-header :class=\"{\n                    'ml-n3': $vuetify.display.mdAndUp\n                }\">\n            <h3 class=\"text-h5 font-weight-bold\">{{$t('eshop::register.need_help')}}</h3>\n        </motonet-header>\n        <div class=\"pl-7 pt-10 mb-2\">\n            <div class=\"d-flex ga-5\">\n                <div>\n                    <v-avatar size=\"64\">\n                        <v-img :src=\"needHelpImage[0]\" position=\"0 8px\" class=\"bg-grey-lighten-3\"></v-img>\n                    </v-avatar>\n                    <v-avatar size=\"64\" class=\"ml-n4 c-border\">\n                        <v-img :src=\"needHelpImage[1]\" position=\"0 8px\" class=\"bg-grey-lighten-3\"></v-img>\n                    </v-avatar>\n                </div>\n                <div>\n                    <div class=\"d-flex align-center ga-3\">\n                        <v-icon color=\"orange\" :size=\"24\" :icon=\"mdiPhoneOutline\"></v-icon>\n                        <div>\n                            <p class=\"text-body-1 font-weight-bold\">{{ $t('app-bar.customer_service_phone') }}</p>\n                            <p class=\"text-tiny-link text-grey-lighten-1\">{{ $t('app-footer.contact_hours') }}</p>\n                        </div>\n                    </div>\n                    <v-btn\n                        block\n                        :height=\"40\"\n                        color=\"orange\"\n                        variant=\"flat\"\n                        @click=\"contactModalActive = true\"\n                        class=\"mt-4\"\n                    >\n                        <p class=\"text-white text-tiny-link font-weight-bold\">{{$t('eshop::register.ask')}}</p>\n                    </v-btn>\n                </div>\n            </div>\n        </div>\n        <contact-form-modal v-model=\"contactModalActive\" :email=\"email\"></contact-form-modal>\n    </div>\n</template>\n\n<script setup>\nimport {mdiPhoneOutline} from \"@mdi/js\";\nimport MotonetHeader from \"./MotonetHeader.vue\";\nimport ContactFormModal from \"./ContactFormModal.vue\";\nimport { computed, ref, watch } from 'vue';\nimport { usePage } from '@inertiajs/vue3';\nconst props = defineProps({\n    email: String\n})\n\nconst needHelpImage = computed(\n    () => {\n        const needHelp = usePage().props.needHelp;\n        return needHelp.map((item) => {\n            return item.person?.main_image?.url;\n        });\n    }\n);\n\nconst contactModalActive = ref(false);\n</script>\n\n<style scoped lang=\"scss\">\n.v-avatar{\n    outline: 4px solid white;\n}\n</style>\n"],"names":["emit","__emit","props","__props","active","computed","val","go","where","router","loading","ref","sendQuestion","email","question","route","watch","now","rules","value","trans","inject","needHelpImage","usePage","item","_b","_a","contactModalActive"],"mappings":"quBA0EA,MAAMA,EAAOC,EACPC,EAAQC,EAKRC,EAASC,EAAS,CACpB,KAAM,CACF,OAAOH,EAAM,UAChB,EACD,IAAII,EAAK,CACLN,EAAK,oBAAqBM,CAAG,CACrC,CACA,CAAC,EACKC,EAAMC,GAAU,CAClBJ,EAAO,MAAQ,GACfK,EAAO,MAAMD,CAAK,CACtB,EACME,EAAUC,EAAI,EAAK,EACnBC,EAAe,IAAM,CACvBF,EAAQ,MAAQ,GACbG,EAAM,OAAS,IAAMC,EAAS,OAAS,IACtCL,EAAO,KAAKM,EAAM,eAAe,EAAG,CAChC,MAAOF,EAAM,MACb,SAAUC,EAAS,KAC/B,EAAW,CACC,UAAW,IAAM,CACbD,EAAM,MAAQ,GACdC,EAAS,MAAQ,GACjBV,EAAO,MAAQ,GACfM,EAAQ,MAAQ,EAChC,CACA,CAAS,CAET,EACMG,EAAQF,EAAI,EAAE,EACdG,EAAWH,EAAI,EAAE,EAEvBK,EAAM,IAAMd,EAAM,MAAQe,GAAQ,CAC9BJ,EAAM,MAAQI,CAClB,EAAG,CAAE,UAAW,EAAM,CAAA,EAGtB,MAAMC,EAAQ,CACV,SAAUC,GAAS,CAAC,CAACA,GAASC,EAAM,uBAAuB,EAC3D,QAASD,GAASA,EAAM,QAAU,IAAMC,EAAM,qBAAqB,EACnE,MAAOD,GACa,uJACD,KAAKA,CAAK,GAAKC,EAAM,8BAA8B,CAE1E,EACML,EAAQM,EAAO,OAAO,2yECzE5B,MAAMC,EAAgBjB,EAClB,IACqBkB,IAAU,MAAM,SACjB,IAAKC,GAAS,SAC1B,OAAOC,GAAAC,EAAAF,EAAK,SAAL,YAAAE,EAAa,aAAb,YAAAD,EAAyB,GAC5C,CAAS,CAET,EAEME,EAAqBhB,EAAI,EAAK"}