Fix and style daytrip select widget

public/typo3conf/ext/ep_products/Classes/Controller/AjaxTableController.php

@@ -36,6 +36,7 @@ use EP\EpProducts\Service\DateService;
 use EP\EpProducts\Service\FilterService;
 use EP\EpProducts\Service\ResellerDataService;
 use EP\EpProducts\Traits\RequestArgumentTypeConversionTrait;
+use League\Period\Period;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
 use TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer;
@@ -313,11 +314,19 @@ class AjaxTableController extends ActionController
      */
     public function daytripRoomsAction(Hotel $hotel, Product $product, $dateFrom, $dateTo)
     {
-        $template = $this->settings['bpnBookingUrlTemplateCode'];
+        $period = new Period($dateFrom, $dateTo);
-        $rooms = $this
+        $nights = $period->getDateInterval()->format('%a');
-            ->contingentDataService
-            ->getAvailableRooms($dateFrom, $dateTo, $hotel, $product, $template);
 
+        if (2 > $nights) {
+            $rooms = [];
+        } else {
+            $template = $this->settings['bpnBookingUrlTemplateCode'];
+            $rooms = $this
+                ->contingentDataService
+                ->getAvailableRooms($dateFrom, $dateTo, $hotel, $product, $template);
+        }
+
+        $this->view->assign('nights', $nights);
         $this->view->assign('rooms', $rooms);
     }
 

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/daytrip_controller.js

@@ -5,7 +5,6 @@ import { useFetch } from '../mixins/use_fetch'
 export default class extends Controller {
 
     static targets = [
-        'headerLabel',
         'container',
         'loadingIndicator',
         'message',
@@ -35,6 +34,7 @@ export default class extends Controller {
         this.loadingValue = true
         this.dateFromValue = e.detail.from
         this.dateToValue = e.detail.to
+        this.containerTarget.innerHTML = ''
         let data = new FormData()
         data.set('tx_epproducts_ajax[hotel]', this.hotelUidValue)
         data.set('tx_epproducts_ajax[product]', this.productUidValue)

public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/DaytripRooms.html

@@ -5,46 +5,67 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <table class="table table-striped pricetable">
+        <f:if condition="{nights} < 3">
+            <f:then>
+                <p class="font-bold">
+                    Bitte mindestens 2 Nächte auswählen.
+                </p>
+            </f:then>
+            <f:else>
+                <f:render section="Table" arguments="{_all}"/>
+            </f:else>
+        </f:if>
+    </f:section>>
+
+    <f:section name="Table">
+        <table class="w-full mb-4 bg-gray-200 text-sm xl:text-base">
             <thead>
             <tr>
-                <th>Zimmerart</th>
+                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
-                <th>Preis</th>
+                    Zimmerart
-                <th>inkl.</th>
+                </th>
-                <th></th>
+                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                    Preis
+                </th>
+                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                    inkl.
+                </th>
+                <th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                </th>
             </tr>
             </thead>
             <tbody>
             <f:for each="{rooms}" as="row" iteration="iteration">
-                <tr>
+                <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
-                    <td>
+                    <td class="border-r border-gray-200 px-2 py-1 md:p-2">
                         {row.label}
                     </td>
-                    <td class="whitespace-nowrap">
+                    <td class="border-r border-gray-200 px-2 py-1 md:p-2 whitespace-nowrap">
                         ab {row.priceForSelection} €
                     </td>
-                    <td>
+                    <td class="border-r border-gray-200 px-2 py-1 md:p-2">
                         <f:if condition="{row.skipassIncluded}">
                             <span data-cooltipz-dir="top"
                                   aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
                                   role="tooltip">
                                 <svg class="w-4 h-4">
-                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
+                                    <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
                                 </svg>
                             </span>
                         </f:if>
                         <button type="button"
-                                class="button button--light button--small hidden md:block"
                                 data-action="daytrip#openModal"
                                 data-type="services"
                                 data-uid="{iteration.cycle}"
                                 data-cooltipz-dir="top"
                                 aria-label="Alle Inklusivleistungen anzeigen"
                                 role="tooltip">
-                            Leistungen
+                            <svg class="w-4 h-4">
+                                <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-info-circle"></use>
+                            </svg>
                         </button>
                     </td>
-                    <td>
+                    <td class="border-r border-gray-200 px-2 py-1 md:p-2">
                         <a class="button button--small bg-green-500 border-green-500"
                            href="{row.bookingUrl}" target="_blank">
                             Buchen

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

@@ -10,12 +10,17 @@
             <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
             <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
             <div class="container"
+                <f:if condition="{product.daytrip}">
+                    <f:else>
                  data-controller="product-details"
                  data-action="tabs:selected->product-details#switchView"
                  data-product-details-datestable-uri-value="{ep:uri.ajax(action: 'datestable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
                  data-product-details-pricetable-uri-value="{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}"
                  data-product-details-travel-alert-uri-value="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
-                 data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}">
+                 data-product-details-disable-tables-value="{f:if(condition: hotel.groupsPriceConfigs, then: 'true', else: 'false')}"
+                    </f:else>
+                </f:if>
+            >
                 <f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
                 <div class="flex flex-col lg:flex-row-reverse lg:items-start"
                      data-controller="tabs"
@@ -256,23 +261,23 @@
              data-daytrip-product-uid-value="{product.uid}"
              data-daytrip-rooms-uri-value="{ep:uri.ajax(action: 'daytripRooms', controller: 'AjaxTable', format: 'html', pageUid: settings.defaultAjaxUid)}"
              data-action="datepicker:range-select->daytrip#load">
-            <div class="headerbar"
+            <div class="headerbar">
-                 data-daytrip-target="headerLabel"></div>
+                Buchungsoptionen {product.name}
-            <div class="grid grid-cols-2 gap-8">
+            </div>
-                <div class="col-span-2 md:col-span-1">
+            <div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:items-start">
-                    <div class="date-select">
+                <div class="date-select">
-                        <div class="date-select__picker">
+                    <div class="date-select__picker">
-                            <div class="daterange__panel"
+                        <div class="daterange__panel"
-                                 data-controller="datepicker"
+                             data-controller="datepicker"
-                                 data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
+                             data-datepicker-inline-value="true"
-                                 data-datepicker-enabled-dates-value='{enabledDates -> f:format.json()}'>
+                             data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
-                                <input type="hidden"
+                             data-datepicker-enabled-dates-value='{enabledDates -> f:format.json()}'>
-                                       data-datepicker-target="field">
+                            <input type="hidden"
-                            </div>
+                                   data-datepicker-target="field">
                         </div>
                     </div>
                 </div>
-                <div class="col-span-2 md:col-span-1">
+                <div class="flex-1 md:pl-4">
                     <div data-daytrip-target="container"></div>
                     <div class="hidden flex items-center space-x-2"
                          data-daytrip-target="loadingIndicator">