From f64da4a8f52e4d28eb9e800bcb7ed147fa4e8ef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 2 Sep 2021 17:54:09 +0200
Subject: [PATCH] WIP Adapt new teaser layout

---
 .../ViewHelpers/Uri/ProductViewHelper.php     | 11 +--
 .../Private/Assets/scss/components/_misc.scss |  2 +-
 .../Partials/Product/HeaderDetail.html        | 10 +--
 .../Private/Partials/Product/Teaser.html      | 36 ++++-----
 .../Private/Templates/Product/HotelList.html  | 77 +++++++++++++------
 .../Templates/Product/Teasergroup.html        | 17 +++-
 6 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Uri/ProductViewHelper.php b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Uri/ProductViewHelper.php
index c37cb234..b5a0d5bb 100644
--- a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Uri/ProductViewHelper.php
+++ b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Uri/ProductViewHelper.php
@@ -43,7 +43,7 @@ class ProductViewHelper extends AbstractViewHelper
     {
         parent::initializeArguments();
 
-        $this->registerArgument('product', 'array', 'The product');
+        $this->registerArgument('product', 'mixed', 'The product');
         $this->registerArgument('hotel', 'array', 'The hotel');
         $this->registerArgument('dateFrom', 'string', 'Date to limit table on detail page by (Y-m-d)');
         $this->registerArgument('dateTo', 'string', 'Date to limit table on detail page by (Y-m-d)');
@@ -70,8 +70,8 @@ class ProductViewHelper extends AbstractViewHelper
 
         if ($arguments['forceHotelUid']) {
             $linkArguments = [
-                'product' => $product['uid'],
-                'hotel' => $hotel['uid'],
+                'product' => is_array($product) ? $product['uid'] : $product,
+                'hotel' => is_array($hotel) ? $hotel['uid'] : $hotel,
             ];
         } elseif ($arguments['dateFrom'] || $arguments['dateTo']) {
             $linkArguments = [
@@ -81,11 +81,12 @@ class ProductViewHelper extends AbstractViewHelper
         }
 
         if (null !== $linkArguments) {
+            $targetPageUid = is_array($product) ? $product['detailPage'] : $product->getDetailPage();
             $uri = $renderingContext
                 ->getControllerContext()
                 ->getUriBuilder()
                 ->reset()
-                ->setTargetPageUid($product['detailPage'])
+                ->setTargetPageUid($targetPageUid)
                 ->uriFor('detail', $linkArguments, 'Product', 'epproducts', 'product_detail')
             ;
         } else {
@@ -93,7 +94,7 @@ class ProductViewHelper extends AbstractViewHelper
             $contentObject = GeneralUtility::makeInstance(ContentObjectRenderer::class);
             $uri = $contentObject->typoLink_URL(
                 [
-                    'parameter' => $product['detailPage'],
+                    'parameter' => is_array($product) ? $product['detailPage'] : $product->getUid(),
                 ]
             );
         }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_misc.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_misc.scss
index b408f97f..93a49b96 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_misc.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_misc.scss
@@ -1,3 +1,3 @@
 .headerbar {
-    @apply bg-ep-primary-light sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4;
+    @apply bg-ep-primary-dark sbw:bg-sbw-primary text-white uppercase font-semibold py-2 px-4 mb-4;
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
index 81705c13..cf6e193a 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
@@ -24,14 +24,14 @@
                             </f:for>
                         </ul>
                     </div>
-                    <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
+                    <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between">
                         <button class="splide__arrow splide__arrow--prev">
-                            <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
+                            <svg class="w-10 h-10 text-white pointer-events-none">
                                 <use href="#icon-chevron-left"></use>
                             </svg>
                         </button>
                         <button class="splide__arrow splide__arrow--next">
-                            <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
+                            <svg class="w-10 h-10 text-white pointer-events-none">
                                 <use href="#icon-chevron-right"></use>
                             </svg>
                         </button>
@@ -81,8 +81,8 @@
                                         </a>
                                     </f:then>
                                     <f:else>
-                                        <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
-                                            <svg class="w-6 h-6">
+                                        <a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
+                                            <svg class="w-4 h-4 md:w-6 md:h-6 text-white">
                                                 <use href="#icon-location-marker"></use>
                                             </svg>
                                         </a>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
index 0c9323a7..a0ccbf91 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
@@ -9,18 +9,18 @@
                     <div class="bg-ep-primary p-2 mr-4 text-white">
                         <f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
                             <svg class="product-teaser__icon text-white">
-                                <use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
+                                <use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use>
                             </svg>
                         </f:alias>
                     </div>
                     <span class="text-sm md:text-base text-white uppercase font-semibold">
-                        {teaser.concept.name}
+                        {concept.name}
                     </span>
                 </div>
                 <button type="button"
                         class="px-2"
                         data-controller="watchlist-toggle"
-                        data-watchlist-toggle-key-value="{teaser.hotel.uid}:{teaser.product.uid}"
+                        data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
                         data-watchlist-toggle-target="ariaLabel"
                         data-action="watchlist-toggle#toggle"
                         data-cooltipz-dir="top-right"
@@ -29,8 +29,8 @@
                     <svg class="w-6 h-6 text-white" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                 </button>
             </div>
-            <a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
-               title="{teaser.region.name} {teaser.product.name} Details und Buchen"
+            <a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}"
+               title="{region.name} {product.name} Details und Buchen"
                class="flex flex-col h-full bg-white">
                 <f:render section="TeaserImage" arguments="{_all}"/>
                 <f:render section="TeaserContent" arguments="{_all}"/>
@@ -41,24 +41,24 @@
     <f:section name="TeaserImage">
         <img class="block w-full h-auto lazyload"
              src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/lazy.png')}"
-             data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
-             alt="{teaser.product.name}"
+             data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
+             alt="{product.name}"
              width="640" height="480" />
     </f:section>
 
     <f:section name="TeaserContent">
         <div class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
             <div class="text-gray-800 leading-none pl-8 md:pl-10">
-                {teaser.product.name}
+                {product.name}
             </div>
             <div class="relative h-16 md:h-24 text-gray-800 text-lg md:text-3xl leading-none font-bold pl-8 md:pl-10">
-                {teaser.region.name}
+                {region.name}
                 <svg class="w-6 h-4 md:w-8 md:h-6 absolute top-0 left-0 md:mt-1">
-                    <use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
+                    <use href="#icon-flag-{country.code -> f:format.case(mode: 'lower')}"/>
                 </svg>
             </div>
             <div class="pb-2 text-gray-800 text-lg md:text-xl font-bold leading-none pl-8 md:pl-10">
-                {ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)} inkl.
+                {ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
             </div>
             <ul class="flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400 pl-8 md:pl-10">
                 <li class="flex items-center space-x-1 py-1">
@@ -66,26 +66,26 @@
                         <use href="#icon-check"></use>
                     </svg>
                     <span class="block flex-1 leading-none">
-                        {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
+                        {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
                     </span>
                 </li>
-                <f:if condition="{teaser.product.feature}">
+                <f:if condition="{product.feature}">
                     <li class="flex items-center space-x-1 py-1">
                         <svg class="w-6 h-6 text-ep-primary">
                             <use href="#icon-check"></use>
                         </svg>
                         <span class="block flex-1 leading-none">
-                            {teaser.product.feature}
+                            {product.feature}
                         </span>
                     </li>
                 </f:if>
-                <f:if condition="{teaser.board}">
+                <f:if condition="{board}">
                     <li class="flex items-center space-x-1 py-1">
                         <svg class="w-6 h-6 text-ep-primary">
                             <use href="#icon-check"></use>
                         </svg>
                         <span class="block flex-1 leading-none">
-                            {teaser.board}
+                            {board}
                         </span>
                     </li>
                 </f:if>
@@ -93,10 +93,10 @@
             <div class="pt-8 pl-8 md:pl-10">
                 <div class="bg-ep-primary text-white font-bold px-4 py-1">
                     <div class="lg:inline-block">
-                        ab <span class="text-xl md:text-3xl mx-1">{teaser.minPrice} €</span>
+                        ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span>
                     </div>
                     <div class="text-sm md:text-base lg:inline-block">
-                        p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
+                        p. P. / inkl. {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
                     </div>
                 </div>
             </div>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
index a67bb29d..caddd383 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
@@ -5,31 +5,60 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <div class="container">
-            <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
-            <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
-            {product.teaserLong -> f:format.html()}
-            <div class="headerbar">
-                Wähle deine Unterkunft
+        <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
+        <div class="container grid grid-cols-3 gap-8">
+            <div class="col-span-3 lg:col-span-2">
+                <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
+                <div data-rte-content>
+                    {product.teaserLong -> f:format.html()}
+                </div>
+                <div class="headerbar">
+                    Wähle deine Unterkunft
+                </div>
+                <f:if condition="{hotels}">
+                    <f:then>
+                        <div class="grid grid-cols-2 gap-4 md:gap-8">
+                            <f:for each="{hotels}" as="item">
+                                <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    concept: product.concept,
+                                    hotel: item.hotel,
+                                    product: product,
+                                    country: product.country,
+                                    region: product.region,
+                                    productImage: item.hotel.images.original.0,
+                                    nights: item.nights,
+                                    board: item.board,
+                                    minPrice: item.minPrice,
+                                    daytrip: product.daytrip,
+                                    season: product.season,
+                                    dateFrom: item.minDateStart,
+                                    dateTo: item.maxDateEnd,
+                                    forceHotelUid: 1
+                                }"/>
+                            </f:for>
+                        </div>
+                    </f:then>
+                    <f:else>
+                        <div class="alert alert-info">
+                            Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
+                            eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
+                            oder schreibe an <f:link.email email="info@ep-reisen.de"/>.
+                        </div>
+                    </f:else>
+                </f:if>
+            </div>
+            <div class="col-span-3 lg:col-span-1">
+                <f:alias map="{region: product.region}">
+                    <f:if condition="{region.winter}">
+                        <f:render partial="Facts" arguments="{facts: region.facts, title: region.name}"/>
+                        <f:render partial="Snowreport" arguments="{snowreport: region.snowreport}"/>
+                        <f:render partial="Regioninfo" arguments="{region: region}"/>
+                        <f:render partial="Region/Webcam" arguments="{region: region}"/>
+                        <f:render partial="RegionMaps" arguments="{region: region}"/>
+                        <f:render partial="RegionAward" arguments="{region: region}"/>
+                    </f:if>
+                </f:alias>
             </div>
-            <f:if condition="{hotels}">
-                <f:then>
-                    <f:for each="{hotels}" as="item">
-                        <f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
-                        item: item,
-                        product: product,
-                        referringPageUrl: referringPageUrl
-                    }"/>
-                    </f:for>
-                </f:then>
-                <f:else>
-                    <div class="alert alert-info">
-                        Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
-                        eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
-                        oder schreibe an <f:link.email email="info@ep-reisen.de"/>.
-                    </div>
-                </f:else>
-            </f:if>
         </div>
     </f:section>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
index a0e25686..866f1499 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
@@ -34,7 +34,22 @@
                     <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
                          data-teasergrid-target="container">
                         <f:for each="{teasers}" as="teaser">
-                            <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
+                            <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                concept: teaser.concept,
+                                hotel: teaser.hotel,
+                                product: teaser.product,
+                                country: teaser.country,
+                                region: teaser.region,
+                                productImage: teaser.product.images.original.0,
+                                nights: teaser.nights,
+                                board: teaser.board,
+                                minPrice: teaser.minPrice,
+                                daytrip: teaser.daytrip,
+                                season: teaser.season,
+                                forceHotelUid: teaser.forceHotelUid,
+                                dateFrom: dateFrom,
+                                dateTo: dateTo
+                            }"/>
                         </f:for>
                     </div>
                     <f:if condition="{settings.showMoreLink}">