Finalize implementation, wording and styles

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

@@ -31,16 +31,42 @@
         <div class="panel panel-default">
             <div class="panel-heading">Preise</div>
             <div class="panel-body">
-                <div v-show="nightsCount > 0">
+                <table class="table table-striped" v-show="nightsCount > 0">
-                    Zeitraum: {{ rangeFormatted }}, {{ nightsCount }} Nächte<br>
+                    <tbody>
-                    Basispreis: {{ pricePax.base | money }} €<br>
+                        <tr>
-                    <span v-if="pricePax.additional > 0">Aufpreis Personenzahl: {{ pricePax.additional | money }} €<br></span>
+                            <th>Zeitraum</th>
-                    <span v-if="priceShortTerm > 0">Aufpreis Kurzzeit: {{ priceShortTerm | money }} €<br></span>
+                            <td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
-                    <span v-if="selectedOptions.length > 0">Zusatzleistungen: {{ priceOptions | money }} €<br></span>
+                        </tr>
-                    <span v-if="priceBoard > 0">Verpflegung: {{ priceBoard | money }} €<br></span>
+                        <tr>
-                    <span v-if="priceRunningCosts > 0">Strom- und Abfallgebühren: {{ priceRunningCosts | money }} €<br></span>
+                            <th>Basispreis</th>
-                    <span><strong>Gesamtpreis: {{ totalPrice | money }} €</strong></span>
+                            <td>{{ formatCurrency(pricePax.base) }}</td>
-                </div>
+                        </tr>
+                        <tr v-if="pricePax.additional > 0">
+                            <th>Aufpreis Personenzahl</th>
+                            <td>{{ formatCurrency(pricePax.additional) }}</td>
+                        </tr>
+                        <tr v-if="priceShortTerm > 0">
+                            <th>Aufpreis Kurzzeit</th>
+                            <td>{{ formatCurrency(priceShortTerm) }}</td>
+                        </tr>
+                        <tr v-if="selectedOptions.length > 0">
+                            <th>Zusatzleistungen</th>
+                            <td>{{ formatCurrency(priceOptions) }}</td>
+                        </tr>
+                        <tr v-if="priceBoard > 0">
+                            <th>Verpflegung</th>
+                            <td>{{ formatCurrency(priceBoard) }}</td>
+                        </tr>
+                        <tr v-if="priceRunningCosts > 0">
+                            <th>Strom- und Abfallgebühren</th>
+                            <td>{{ formatCurrency(priceRunningCosts) }}</td>
+                        </tr>
+                        <tr>
+                            <th>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>
@@ -61,6 +87,16 @@
                     <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()">Abschicken</button>
                 </div>
@@ -68,7 +104,7 @@
         </div>
         <div class="panel panel-default" v-show="submitted">
             <div class="panel-body">
-                Vielen Dank für Ihre Anfrage. Wir werden Sie schnellstmöglich bearbeiten.
+                <strong>Vielen Dank für Ihre Anfrage. Wir werden Sie schnellstmöglich bearbeiten.</strong>
             </div>
         </div>
         <div class="form-overlay" v-show="processing">
@@ -124,18 +160,18 @@
                 selectedOptions: [],
                 selectedBoard: null,
                 name: null,
-                email: null
+                email: null,
-            }
+                phone: null,
-        },
+                remarks: null
-        filters: {
-            money (value) {
-                if (0 === value) {
-                    return '-';
-                }
-                return parseFloat(value).toFixed(2).replace(/\./, ',');
             }
         },
         methods: {
+            formatCurrency (value) {
+                if (0 === value) {
+                    return '-';
+                }
+                return parseFloat(value).toFixed(2).replace(/\./, ',') + '€';
+            },
             initSelectableRanges () {
                 let enabledDates = [];
                 for (let config of this.configs) {
@@ -174,11 +210,14 @@
                 let formData = {
                     'tx_epproducts_ajax[name]': this.name,
                     'tx_epproducts_ajax[email]': this.email,
+                    'tx_epproducts_ajax[phone]': this.phone,
+                    'tx_epproducts_ajax[remarks]': this.remarks,
                     'tx_epproducts_ajax[dateFrom]': this.selectedFrom.format('DD.MM.YYYY'),
                     'tx_epproducts_ajax[dateTo]': this.selectedTo.format('DD.MM.YYYY'),
                     'tx_epproducts_ajax[pax]': this.selectedPax,
                     'tx_epproducts_ajax[board]': this.selectedBoard ? this.selectedBoard.uid : null,
-                    'tx_epproducts_ajax[options]': options
+                    'tx_epproducts_ajax[options]': options,
+                    'tx_epproducts_ajax[summary]': this.priceSummary
                 };
                 this.processing = true;
                 this.submitted = false;
@@ -266,9 +305,20 @@
                 }
                 return this.nightsCount * this.selectedPax * 1.7;
             },
-            totalPrice () {
+            priceTotal () {
                 return this.pricePax.base + this.pricePax.additional + this.priceOptions
                     + this.priceBoard + this.priceShortTerm + this.priceRunningCosts;
+            },
+            priceSummary () {
+                return {
+                    paxBase: this.formatCurrency(this.pricePax.base),
+                    paxAdditional: this.formatCurrency(this.pricePax.additional),
+                    shortTerm: this.formatCurrency(this.priceShortTerm),
+                    options: this.formatCurrency(this.priceOptions),
+                    board: this.formatCurrency(this.priceBoard),
+                    runningCosts: this.formatCurrency(this.priceRunningCosts),
+                    total: this.formatCurrency(this.priceTotal)
+                }
             }
         },
         mounted () {

public/typo3conf/ext/ep_theme/Resources/Private/Language/locallang.xlf

@@ -78,6 +78,9 @@
             <trans-unit id="tx_eptheme.message.name.1221560718">
                 <source>Bitte angeben</source>
             </trans-unit>
+            <trans-unit id="tx_eptheme.message.phone.1221560718">
+                <source>Bitte angeben</source>
+            </trans-unit>
             <trans-unit id="tx_eptheme.message.contactForm.firstName.1221560718">
                 <source>Bitte angeben</source>
             </trans-unit>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Details.html

@@ -1,4 +1,9 @@
 <div class="ep-headbar">Konzept</div>
+<f:if condition="{product.calendarHotel}">
+    <a class="button button--full" data-fancybox data-type="iframe" href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
+        Preisberechnung
+    </a>
+</f:if>
 <div class="product-details product-details--concept">
     {product.conceptDescription -> f:format.html()}
 </div>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Email/GroupsPrice.html

@@ -1,4 +1,5 @@
 <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
+     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
 	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
 	<f:layout name="Email/Default"/>
@@ -18,6 +19,10 @@
                 <th>E-Mail</th>
                 <td>{email}</td>
             </tr>
+            <tr>
+                <th>Telefon</th>
+                <td>{phone -> v:or(alternative: '-')}</td>
+            </tr>
             <tr>
                 <th>Zeitraum</th>
                 <td>{dateFrom} - {dateTo}</td>
@@ -53,6 +58,20 @@
                     </f:if>
                 </td>
             </tr>
+            <tr>
+                <th>Kostenübersicht</th>
+                <td>
+                    Grundpreis: {summary.paxBase}<br>
+                    Aufpreis Personen: {summary.paxAdditional -> v:or(alternative: '-')}<br>
+                    Zusatzleistungen: {summary.options}<br>
+                    Strom- und Abfallgebühren: {summary.runningCosts -> v:or(alternative: '-')}<br>
+                    <strong>Gesamtpreis: {summary.total}</strong>
+                </td>
+            </tr>
+            <tr>
+                <th>Bemerkungen/Wünsche</th>
+                <td>{remarks -> f:format.nl2br()}</td>
+            </tr>
         </table>
 	</f:section>
 

public/typo3conf/ext/ep_theme/Resources/Private/Templates/GroupsPrice/Index.html

@@ -6,7 +6,20 @@
 <div class="container">
     <div class="row">
         <div class="col-xs-12">
-            <h1>Preiskalkulator {hotel.name}</h1>
+            <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>
+    </div>
+    <div class="row">
+        <div class="col-xs-12">
             <groups-price-calculator
                     :configs='{configs -> f:format.raw()}'
                     :boards='{boards -> f:format.raw()}'

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -249,7 +249,7 @@
     <f:section name="Calendar">
         <f:if condition="{product.calendarHotel}">
             <a class="button button--full" data-fancybox data-type="iframe" href="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}">
-                Preiskalkulator
+                Preisberechnung
             </a>
             <div class="ep-sidebar ep-facts">
                 <p><strong>Belegungskalender</strong></p>