From 16eb99744dfed50e571f09fe9d6090cf6e404ff5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 22 Dec 2021 15:19:30 +0100
Subject: [PATCH] Migrate groups price calculator

---
 .../TypoScript/Page/Main.typoscript           |   8 +-
 .../js/components/GroupsPriceCalculator.vue   | 270 +++++++++++-------
 .../js/controllers/lightbox_controller.js     |   5 +-
 .../Private/Templates/GroupsPrice/Index.html  |  16 +-
 .../Private/Templates/Product/Detail.html     |   1 +
 5 files changed, 188 insertions(+), 112 deletions(-)
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
index 7c7a5f1a..6d4e657a 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript
@@ -9,7 +9,7 @@ page {
     bodyTagCObject = COA
     bodyTagCObject {
         10 = TEXT
-        10.value = <body class="antialiased text-gray-800 font-sans pt-14 lg:pt-8
+        10.value = <body class="antialiased text-gray-800 font-sans pt-14 lg:pt-8 bg-white
         20 = TEXT
         20 {
             field = tx_eptheme_bodyclass
@@ -162,3 +162,9 @@ page {
         if.isTrue = {$plugin.tx_eptheme.settings.cookieFirstKey}
     }
 }
+
+[page["backend_layout"] == 'pagets__popup']
+    page.bodyTagCObject >
+    page.bodyTagCObject = TEXT
+    page.bodyTagCObject.value = <body class="antialiased text-gray-800 font-sans bg-white p-4">
+[end]
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
index 8b555c5b..257a8b16 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue
@@ -1,143 +1,209 @@
 <template>
-    <div class="container relative">
-        <div class="mb-4"
+    <div class="relative">
+        <div class="mb-8"
              v-show="!submitted">
             <label class="mb-2 font-bold">
                 Zeitraum
             </label>
             <input type="text"
-                   class="border-gray-400 focus:border-gray-800 mt-1 w-full"
+                   class="form-field"
                    placeholder="von... bis" ref="picker"/>
         </div>
-        <div class="form-group" v-show="!submitted">
-            <label>Personenzahl</label>
-            <input type="number" class="form-control" v-model.number="selectedPax" @change="onPaxUpdated()"
+        <div class="mb-8"
+             v-show="!submitted">
+            <label class="mb-2 font-bold">
+                Personenzahl
+            </label>
+            <input type="number"
+                   class="form-field"
+                   v-model.number="selectedPax"
+                   @change="onPaxUpdated()"
                    v-show="nightsCount > 0 && !includesBonusCard"/>
             <div class="flex space-x-4" v-show="nightsCount > 0 && includesBonusCard">
                 <div class="w-1/3 flex flex-col space-y-1">
                     <span>ab 15 Jahre</span>
-                    <input type="number" class="form-control" v-model.number="selectedPaxGroup3" @change="onPaxUpdated()"/>
+                    <input type="number"
+                           class="form-control"
+                           v-model.number="selectedPaxGroup3"
+                           @change="onPaxUpdated()"/>
                 </div>
                 <div class="w-1/3 flex flex-col space-y-1">
                     <span>7-14 Jahre</span>
-                    <input type="number" class="form-control" v-model.number="selectedPaxGroup2" @change="onPaxUpdated()"/>
+                    <input type="number"
+                           class="form-control"
+                           v-model.number="selectedPaxGroup2"
+                           @change="onPaxUpdated()"/>
                 </div>
                 <div class="w-1/3 flex flex-col space-y-1">
                     <span>4-6 Jahre</span>
-                    <input type="number" class="form-control" v-model.number="selectedPaxGroup1" @change="onPaxUpdated()"/>
+                    <input type="number"
+                           class="form-control"
+                           v-model.number="selectedPaxGroup1"
+                           @change="onPaxUpdated()"/>
                 </div>
             </div>
-            <p class="text-sm italic" v-show="nightsCount === 0">Bitte wählen Sie einen Zeitraum</p>
+            <p class="text-sm italic"
+               v-show="nightsCount === 0">
+                Bitte zuerst einen Zeitraum wählen
+            </p>
         </div>
-        <div class="form-group" v-show="options.length > 0 && !submitted">
-            <label>Optionale Zusatzleistungen</label>
-            <div class="checkbox" v-for="option of options" :key="option.uid">
-                <label>
-                    <input type="checkbox" v-model="selectedOptions" :value="option">
-                    <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
-                    {{ option.title }}{{ formatOptionPriceType(option) }}
-                </label>
+        <div class="mb-8"
+             v-show="options.length > 0 && !submitted">
+            <div class="mb-2 font-bold">
+                Optionale Zusatzleistungen
             </div>
+            <ul class="mb-0 p-0 space-y-2">
+                <li v-for="option of options" :key="option.uid">
+                    <label class="flex items-start">
+                        <input type="checkbox"
+                               class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
+                               v-model="selectedOptions"
+                               :value="option">
+                        <span class="pl-2 leading-none">{{ option.title }}{{ formatOptionPriceType(option) }}</span>
+                    </label>
+                </li>
+            </ul>
         </div>
-        <div class="form-group" v-show="boards.length > 0 && !submitted">
-            <label>Optionale Verpflegungsleistungen</label>
-            <select class="form-control" v-model="selectedBoard" v-if="totalPax >= 30">
+        <div class="mb-8"
+             v-show="boards.length > 0 && !submitted">
+            <label class="mb-2 font-bold">
+                Optionale Verpflegungsleistungen
+            </label>
+            <select class="form-field"
+                    v-model="selectedBoard"
+                    v-if="totalPax >= 30">
                 <option :value="null">Keine Auswahl</option>
-                <option v-for="board of boards" :value="board" :key="board.uid">{{ board.title }}
-                    ({{ formatCurrency(board.price) }} pro Person und Nacht)
+                <option v-for="board of boards"
+                        :value="board"
+                        :key="board.uid">
+                    {{ board.title }} ({{ formatCurrency(board.price) }} pro Person und Nacht)
                 </option>
             </select>
             <div v-show="totalPax < 30">
-                <span class="label label-warning">Erst ab 30 Personen buchbar.</span>
+                <span class="text-red-600">Erst ab 30 Personen buchbar.</span>
             </div>
         </div>
-        <div class="panel panel-default">
-            <div class="panel-heading">Preise</div>
-            <div class="panel-body">
-                <table class="table table-striped" v-show="nightsCount > 0">
+        <div class="mb-8">
+            <div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
+                Preise
+            </div>
+            <div class="bg-gray-100 p-2">
+                <table class="w-full" v-show="nightsCount > 0">
                     <tbody>
-                    <tr>
-                        <th>Zeitraum</th>
+                    <tr class="odd:bg-gray-100">
+                        <th class="text-left py-2">Zeitraum</th>
                         <td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
                     </tr>
-                    <tr>
-                        <th>Basispreis</th>
+                    <tr class="odd:bg-gray-100">
+                        <th class="text-left py-2">Basispreis</th>
                         <td>{{ formatCurrency(pricePax.base) }}</td>
                     </tr>
-                    <tr v-if="pricePax.additional > 0">
-                        <th>Aufpreis Personenzahl</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="pricePax.additional > 0">
+                        <th class="text-left py-2">Aufpreis Personenzahl</th>
                         <td>{{ formatCurrency(pricePax.additional) }}</td>
                     </tr>
-                    <tr v-if="priceShortTerm > 0">
-                        <th>Aufpreis Kurzzeit</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="priceShortTerm > 0">
+                        <th class="text-left py-2">Aufpreis Kurzzeit</th>
                         <td>{{ formatCurrency(priceShortTerm) }}</td>
                     </tr>
-                    <tr v-if="includesBonusCard">
-                        <th>Inklusivleistungen</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="includesBonusCard">
+                        <th class="text-left py-2">Inklusivleistungen</th>
                         <td>
                             <a href="https://www.saalbach.com/de/sommer/joker-card" target="_blank" class="uppercase">
                                 Joker Card
                             </a>
                         </td>
                     </tr>
-                    <tr v-if="selectedOptions.length > 0">
-                        <th>Zusatzleistungen</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="selectedOptions.length > 0">
+                        <th class="text-left py-2">Zusatzleistungen</th>
                         <td>{{ formatCurrency(priceOptions) }}</td>
                     </tr>
-                    <tr v-if="priceBoard > 0">
-                        <th>Verpflegung</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="priceBoard > 0">
+                        <th class="text-left  py-2">Verpflegung</th>
                         <td>{{ formatCurrency(priceBoard) }}</td>
                     </tr>
-                    <tr v-if="priceRunningCosts > 0">
-                        <th>Strom- und Abfallgebühren</th>
+                    <tr class="odd:bg-gray-100"
+                        v-if="priceRunningCosts > 0">
+                        <th class="text-left py-2">Strom- und Abfallgebühren</th>
                         <td>{{ formatCurrency(priceRunningCosts) }}</td>
                     </tr>
-                    <tr>
-                        <th>Gesamtpreis</th>
+                    <tr class="odd:bg-gray-100">
+                        <th class="text-left py-2">Gesamtpreis</th>
                         <td><strong>{{ formatCurrency(priceTotal) }}</strong><br><small>zzgl. vor Ort zu entrichtender
                             Ortstaxe</small></td>
                     </tr>
                     </tbody>
                 </table>
-                <div v-show="nightsCount === 0">
-                    <span class="label label-warning">Bitte wählen Sie einen Zeitraum</span>
-                </div>
+                <p class="text-sm italic"
+                   v-show="nightsCount === 0">
+                    Bitte zuerst einen Zeitraum wählen
+                </p>
             </div>
         </div>
-        <div class="panel panel-default" v-show="nightsCount > 0 && !submitted">
-            <div class="panel-heading">Angebot anfordern</div>
-            <div class="panel-body">
-                <div class="form-group" :class="{ 'has-error': formErrors.name }">
-                    <label>Name*</label>
-                    <input type="text" class="form-control" v-model="name">
-                    <div class="help-block"
-                         v-show="formErrors.name" v-html="formErrors.name"></div>
-                </div>
-                <div class="form-group" :class="{ 'has-error': formErrors.email }">
-                    <label>E-Mail*</label>
-                    <input type="text" class="form-control" v-model="email">
-                    <div class="help-block"
-                         v-show="formErrors.email" v-html="formErrors.email"></div>
-                </div>
-                <div class="form-group" :class="{ 'has-error': formErrors.phone }">
-                    <label>Telefon*</label>
-                    <input type="text" class="form-control" v-model="phone">
-                    <div class="help-block"
-                         v-show="formErrors.phone" v-html="formErrors.phone"></div>
-                </div>
-                <div class="form-group">
-                    <label>Bemerkungen/Wünsche</label>
-                    <textarea class="form-control" cols="30" rows="3" v-model="remarks"/>
-                </div>
-                <div class="form-group">
-                    <button class="button" type="submit" @click.prevent="submitForm()">SENDEN</button>
+        <div class="mb-8"
+             v-show="nightsCount > 0 && !submitted">
+            <div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
+                Angebot anfordern
+            </div>
+            <div class="bg-gray-100 p-2">
+                <div class="grid md:grid-cols-2 gap-4 mb-4">
+                    <div :class="{ 'has-error': formErrors.name }">
+                        <label class="font-bold mb-2">
+                            Name*
+                        </label>
+                        <input type="text"
+                               class="form-field"
+                               v-model="name">
+                        <div class="text-sm text-red-600 mt-1"
+                             v-show="formErrors.name"
+                             v-html="formErrors.name"></div>
+                    </div>
+                    <div :class="{ 'has-error': formErrors.email }">
+                        <label class="font-bold mb-2">
+                            E-Mail*
+                        </label>
+                        <input type="text"
+                               class="form-field"
+                               v-model="email">
+                        <div class="text-sm text-red-600 mt-1"
+                             v-show="formErrors.email"
+                             v-html="formErrors.email"></div>
+                    </div>
+                    <div :class="{ 'has-error': formErrors.phone }">
+                        <label class="font-bold mb-2">
+                            Telefon*
+                        </label>
+                        <input type="text"
+                               class="form-field"
+                               v-model="phone">
+                        <div class="text-sm text-red-600 mt-1"
+                             v-show="formErrors.phone"
+                             v-html="formErrors.phone"></div>
+                    </div>
+                    <div>
+                        <label class="font-bold mb-2">
+                            Bemerkungen/Wünsche
+                        </label>
+                        <textarea class="form-field"
+                                  cols="30"
+                                  rows="3"
+                                  v-model="remarks"/>
+                    </div>
                 </div>
+                <button class="button"
+                        type="submit"
+                        @click.prevent="submitForm()">
+                    Senden
+                </button>
             </div>
         </div>
-        <div class="panel panel-default form-success" v-show="submitted">
-            <div class="panel-body">
-                <strong>Vielen Dank für Ihre Anfrage. Wir werden diese schnellstmöglich bearbeiten.</strong>
-            </div>
+        <div class="py-8 text-xl text-center font-bold" v-show="submitted">
+            Vielen Dank für Ihre Anfrage. Wir werden diese schnellstmöglich bearbeiten.
         </div>
         <div class="fixed top-0 left-0 inset-0 bg-overlay-white flex items-center justify-center" v-show="processing">
             <img :src="loaderUri" alt="Loading...">
@@ -265,30 +331,37 @@ export default {
             }
         },
         submitForm() {
-            let options = [];
-            for (let option of this.selectedOptions) {
-                options.push(option.uid);
+            let formData = new URLSearchParams({
+                'tx_epproducts_ajax[groupsPriceInquiry][name]': this.name ? this.name : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][email]': this.email? this.email : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][phone]': this.phone ? this.phone : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][remarks]': this.remarks,
+                'tx_epproducts_ajax[groupsPriceInquiry][dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
+                'tx_epproducts_ajax[groupsPriceInquiry][dateTo]': this.selectedTo.format('DD.MM.YYYY'),
+                'tx_epproducts_ajax[groupsPriceInquiry][pax]': this.includesBonusCard ? '' : this.selectedPax,
+                'tx_epproducts_ajax[groupsPriceInquiry][paxGroup1]': this.includesBonusCard ? this.selectedPaxGroup1 : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][paxGroup2]': this.includesBonusCard ? this.selectedPaxGroup2 : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][paxGroup3]': this.includesBonusCard ? this.selectedPaxGroup3 : '',
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][paxBase]': this.formatCurrency(this.pricePax.base),
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][paxAdditional]': this.formatCurrency(this.pricePax.additional),
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][shortTerm]': this.formatCurrency(this.priceShortTerm),
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][options]': this.priceOptions,
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][board]': this.formatCurrency(this.priceBoard),
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][priceRunningCosts]': this.formatCurrency(this.priceRunningCosts),
+                'tx_epproducts_ajax[groupsPriceInquiry][summary][total]': this.formatCurrency(this.priceTotal),
+            })
+            if (this.selectedBoard) {
+                formData.append('tx_epproducts_ajax[groupsPriceInquiry][board]', this.selectedBoard.uid)
             }
-            let formData = new FormData()
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][name]', this.name)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][email]', this.email)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][phone]', this.phone)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][remarks]', this.remarks)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][dateFrom]', this.selectedFrom.format('DD.MM.YYYY'))
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][dateTo]', this.selectedTo.format('DD.MM.YYYY'))
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][pax]', this.includesBonusCard ? '' : this.selectedPax)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][paxGroup1]', this.includesBonusCard ? this.selectedPaxGroup1 : '')
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][paxGroup2]', this.includesBonusCard ? this.selectedPaxGroup2 : '')
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][paxGroup3]', this.includesBonusCard ? this.selectedPaxGroup3 : '')
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][board]', this.selectedBoard ? this.selectedBoard.uid : null)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][options]', options)
-            formData.set('tx_epproducts_ajax[groupsPriceInquiry][summary]', this.priceSummary)
+            this.selectedOptions.map(option => (
+                formData.append('tx_epproducts_ajax[groupsPriceInquiry][options][]', option.uid)
+            ))
             this.processing = true;
             this.submitted = false;
             axios({
                 url: this.endpoint,
                 method: 'POST',
-                data: formData
+                data: formData,
             }).then(response => {
                 if ('validation' === response.data.status) {
                     this.formErrors = response.data.errors;
@@ -424,7 +497,6 @@ export default {
         Vue.nextTick(() => {
             this.picker = flatpickr(this.$refs.picker, {
                 mode: 'range',
-                inline: true,
                 dateFormat: 'd.m.Y',
                 locale: German,
                 onChange: selectedDates => {
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/lightbox_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/lightbox_controller.js
index 1601f634..538a3938 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/lightbox_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/lightbox_controller.js
@@ -5,12 +5,15 @@ export default class extends Controller {
 
     static targets = [ 'thumb' ]
 
-    static values = { url: String }
+    static values = { url: String, height: String }
 
     connect() {
         let elements = []
         if (this.hasUrlValue) {
             let element = { href: this.urlValue }
+            if (this.hasHeightValue) {
+                element.height = this.heightValue
+            }
             elements.push(element)
         } else if (this.element.hasAttribute('href')) {
             let element = { href: this.element.href }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/GroupsPrice/Index.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/GroupsPrice/Index.html
index 883a4894..ea31f078 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/GroupsPrice/Index.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/GroupsPrice/Index.html
@@ -3,17 +3,11 @@
       xmlns:encore="http://typo3.org/ns/Ssch/Typo3Encore/ViewHelpers"
       data-namespace-typo3-fluid="true">
 
-    <div class="container">
-        <div class="page-header">
-            <div class="media">
-                <div class="media-left media-middle">
-                    <f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/>
-                </div>
-                <div class="media-body">
-                    <h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
-                </div>
-            </div>
-        </div>
+    <div class="max-w-screen-lg mx-auto">
+        <h1 class="headline--underlined headline--has-subline">
+            <span class="subline">{hotel.name}</span>
+            Preisberechnung
+        </h1>
         <f:format.raw>
             <groups-price-calculator
                 configs-json='{configs}'
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index b5133088..c04eb3a6 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -281,6 +281,7 @@
                         class="button w-full"
                         data-controller="lightbox"
                         data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}"
+                        data-lightbox-height-value="85vh"
                         data-action="lightbox#open">
                     Preisberechnung
                 </button>

Zeitraum
Zeitraum	{{ rangeFormatted }}, {{ nightsCount }} Nächte
Basispreis
Basispreis	{{ formatCurrency(pricePax.base) }}
Aufpreis Personenzahl
Aufpreis Personenzahl	{{ formatCurrency(pricePax.additional) }}
Aufpreis Kurzzeit
Aufpreis Kurzzeit	{{ formatCurrency(priceShortTerm) }}
Inklusivleistungen
Inklusivleistungen	Joker Card
Zusatzleistungen
Zusatzleistungen	{{ formatCurrency(priceOptions) }}
Verpflegung
Verpflegung	{{ formatCurrency(priceBoard) }}
Strom- und Abfallgebühren
Strom- und Abfallgebühren	{{ formatCurrency(priceRunningCosts) }}
Gesamtpreis
Gesamtpreis	{{ formatCurrency(priceTotal) }} zzgl. vor Ort zu entrichtender Ortstaxe