feat: special treatment for single nights in price calculator

closes #8697b8j21

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue

@@ -8,6 +8,10 @@
             <input type="text"
                    class="form-field"
                    placeholder="von... bis" ref="picker"/>
+            <p class="text-sm italic"
+               v-show="nightsCount === 1">
+                Einzelne Nächte sind nur auf Anfrage buchbar
+            </p>
         </div>
         <div class="mb-8"
              v-show="!submitted">
@@ -153,7 +157,7 @@
         <div class="mb-8"
              v-show="nightsCount > 0 && !submitted">
             <div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
-                Jetzt buchen
+                Jetzt <span v-if="!forceInquiry">buchen</span><span v-if="forceInquiry">anfragen</span>
             </div>
             <div class="bg-zinc-100 p-2">
                 <div class="grid md:grid-cols-2 gap-4 mb-4">
@@ -230,13 +234,15 @@
                 <div class="flex items-center space-x-2">
                     <button class="button bg-button"
                             type="submit"
+                            v-if="!forceInquiry"
                             @click.prevent="submitForm('booking')">
                         Buchung abschicken
                     </button>
-                    <button class="button bg-button button--small bg-ep-secondary"
+                    <button class="button bg-button"
+                            :class="{ 'button--small bg-ep-secondary': !forceInquiry }"
                             type="submit"
                             @click.prevent="submitForm('inquiry')">
-                        nur als Anfrage senden
+                        als Anfrage senden
                     </button>
                 </div>
             </div>
@@ -256,7 +262,6 @@ import 'dayjs/locale/de'
 import 'flatpickr';
 import {German} from 'flatpickr/dist/l10n/de';
 import Vue from 'vue';
-import axios from 'axios';
 
 export default {
     name: 'GroupsPriceCalculator',
@@ -404,30 +409,31 @@ export default {
             ))
             this.processing = true;
             this.submitted = false;
-            axios({
-                url: this.endpoint,
-                method: 'POST',
-                data: formData,
-            }).then(response => {
-                if ('validation' === response.data.status) {
-                    this.formErrors = response.data.errors;
-                } else {
-                    this.submitted = true;
-                    window.dataLayer = window.dataLayer || [];
-                    dataLayer.push({
-                        'event': 'Preisberechnung'
-                    })
-                }
-            }).catch(error => {
-            }).finally(() => {
-                this.processing = false;
-            });
+            fetch(this.endpoint, { method: 'POST', body: formData })
+                .then(response => response.json())
+                .then((json) => {
+                    if ('validation' === json.status) {
+                        this.formErrors = json.errors
+                    } else {
+                        this.submitted = true;
+                        window.dataLayer = window.dataLayer || [];
+                        dataLayer.push({
+                            'event': 'Preisberechnung'
+                        })
+                    }
+                })
+                .finally(() => {
+                    this.processing = false
+                })
         }
     },
     computed: {
         nightsCount() {
             return this.selectedRange.length;
         },
+        forceInquiry() {
+            return 1 === this.selectedRange.length
+        },
         rangeFormatted() {
             if (null === this.selectedFrom || null === this.selectedTo) {
                 return '-';