feat: extended pricing breakdown on confirmation page
This commit is contained in:
Björn Fromme
@@ -25,18 +25,74 @@
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{# Rooms Summary #}
|
||||
<div class="mb-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<h3 class="text-xl font-semibold mb-4">Zimmer / Unterkünfte</h3>
|
||||
{# Detailed Pricing Breakdown #}
|
||||
<div class="mb-8 p-6 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<h3 class="text-xl font-semibold mb-6 text-blue-900">Preisübersicht</h3>
|
||||
|
||||
{# Rooms Section #}
|
||||
{% if pricingData.rooms is not empty %}
|
||||
<ul class="space-y-2">
|
||||
{% for roomPricing in pricingData.rooms %}
|
||||
<li class="flex justify-between">
|
||||
<span>{{ roomPricing.quantity }}x {{ roomPricing.label }}</span>
|
||||
<span class="font-semibold">{{ roomPricing.totalPrice|number_format(2, ',', '.') }} €</span>
|
||||
</li>
|
||||
<div class="mb-6 pb-6 border-b border-blue-200">
|
||||
<h4 class="font-semibold text-lg mb-3 text-blue-800">Unterkunft</h4>
|
||||
<div class="space-y-2">
|
||||
{% for roomPricing in pricingData.rooms %}
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="text-sm text-gray-700">
|
||||
<span class="font-medium">{{ roomPricing.quantity }}x {{ roomPricing.label }}</span>
|
||||
{% if assignmentCounts is defined and assignmentCounts[roomPricing.roomId] is defined %}
|
||||
<span class="block text-xs text-gray-600">{{ assignmentCounts[roomPricing.roomId] }} Person(en) belegt</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-gray-900 font-semibold">
|
||||
€{{ roomPricing.totalPrice|number_format(2, ',', '.') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
€{{ roomPricing.unitPrice|number_format(2, ',', '.') }} pro Person
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Services Section #}
|
||||
{% if pricingData.services is not empty %}
|
||||
<div class="mb-6 pb-6 border-b border-blue-200">
|
||||
<h4 class="font-semibold text-lg mb-3 text-blue-800">Leistungen</h4>
|
||||
{% for serviceGroup in pricingData.services %}
|
||||
<div class="mb-4 last:mb-0">
|
||||
<h5 class="font-medium text-sm text-gray-700 mb-2 uppercase tracking-wide">{{ serviceGroup.groupName }}</h5>
|
||||
<div class="space-y-1.5 ml-4">
|
||||
{% for servicePricing in serviceGroup.services %}
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-gray-700">
|
||||
{{ servicePricing.participantCount }}x {{ servicePricing.label }}
|
||||
{% if servicePricing.unitPrice is not null %}
|
||||
<span class="text-xs text-gray-500">(€{{ servicePricing.unitPrice|number_format(2, ',', '.') }} pro Person)</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="font-medium text-gray-900">
|
||||
€{{ servicePricing.totalPrice|number_format(2, ',', '.') }}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Grand Total #}
|
||||
{% if pricingData.grandTotal is defined and pricingData.grandTotal > 0 %}
|
||||
<div class="pt-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-bold text-xl text-blue-900">Gesamtpreis:</span>
|
||||
<span class="font-bold text-2xl text-blue-900">
|
||||
€{{ pricingData.grandTotal|number_format(2, ',', '.') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -45,10 +101,18 @@
|
||||
<h3 class="text-xl font-semibold mb-4">Teilnehmer ({{ participantsCount }})</h3>
|
||||
{% for participant in bookingCreateDto.participants %}
|
||||
<div class="mb-6 pb-6 {% if not loop.last %}border-b border-gray-300{% endif %}">
|
||||
<h4 class="font-semibold text-lg mb-3">
|
||||
{{ participant.firstName }} {{ participant.lastName }}
|
||||
{% if loop.first %}<span class="text-sm text-gray-600">(Anmelder)</span>{% endif %}
|
||||
</h4>
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<h4 class="font-semibold text-lg">
|
||||
{{ participant.firstName }} {{ participant.lastName }}
|
||||
{% if loop.first %}<span class="text-sm text-gray-600">(Anmelder)</span>{% endif %}
|
||||
</h4>
|
||||
{% if participantPrices is defined and participantPrices[loop.index0] is defined %}
|
||||
<div class="text-right">
|
||||
<div class="text-xs text-gray-600 uppercase tracking-wide">Preis</div>
|
||||
<div class="font-bold text-lg text-blue-700">€{{ participantPrices[loop.index0]|number_format(2, ',', '.') }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<dl class="grid grid-cols-2 gap-4 text-sm">
|
||||
{# Personal Data #}
|
||||
@@ -102,7 +166,12 @@
|
||||
{% if assignedRoom %}
|
||||
<div>
|
||||
<dt class="text-gray-600 font-semibold">Zimmer</dt>
|
||||
<dd>{{ assignedRoom.label }}</dd>
|
||||
<dd>
|
||||
{{ assignedRoom.label }}
|
||||
{% if assignedRoom.price is not null and assignedRoom.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ assignedRoom.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -118,13 +187,23 @@
|
||||
{% if participant.transportationOutbound %}
|
||||
<div>
|
||||
<dt class="text-gray-600 font-semibold">Anreise</dt>
|
||||
<dd>{{ participant.transportationOutbound.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.transportationOutbound.label }}
|
||||
{% if participant.transportationOutbound.price is not null and participant.transportationOutbound.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.transportationOutbound.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if participant.transportationInbound %}
|
||||
<div>
|
||||
<dt class="text-gray-600 font-semibold">Abreise</dt>
|
||||
<dd>{{ participant.transportationInbound.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.transportationInbound.label }}
|
||||
{% if participant.transportationInbound.price is not null and participant.transportationInbound.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.transportationInbound.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -132,7 +211,12 @@
|
||||
{% if participant.pickup %}
|
||||
<div>
|
||||
<dt class="text-gray-600 font-semibold">Zu- und Ausstieg</dt>
|
||||
<dd>{{ participant.pickup.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.pickup.label }}
|
||||
{% if participant.pickup.price is not null and participant.pickup.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.pickup.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -140,7 +224,12 @@
|
||||
{% if participant.parking %}
|
||||
<div>
|
||||
<dt class="text-gray-600 font-semibold">Parkplatz</dt>
|
||||
<dd>Ja</dd>
|
||||
<dd>
|
||||
Ja
|
||||
{% if participant.parkingService is not null and participant.parkingService.price is not null and participant.parkingService.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.parkingService.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if participant.licensePlate %}
|
||||
@@ -157,7 +246,12 @@
|
||||
<dd>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for boardItem in participant.board %}
|
||||
<li>{{ boardItem.label }}</li>
|
||||
<li>
|
||||
{{ boardItem.label }}
|
||||
{% if boardItem.price is not null and boardItem.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ boardItem.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -168,7 +262,12 @@
|
||||
{% if participant.skiPass %}
|
||||
<div class="col-span-2">
|
||||
<dt class="text-gray-600 font-semibold">Skipass</dt>
|
||||
<dd>{{ participant.skiPass.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.skiPass.label }}
|
||||
{% if participant.skiPass.price is not null and participant.skiPass.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.skiPass.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -179,7 +278,12 @@
|
||||
<dd>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for rental in participant.rentals %}
|
||||
<li>{{ rental.label }}</li>
|
||||
<li>
|
||||
{{ rental.label }}
|
||||
{% if rental.price is not null and rental.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ rental.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -190,7 +294,12 @@
|
||||
{% if participant.rentalInsuranceSelected and participant.rentalInsurance %}
|
||||
<div class="col-span-2">
|
||||
<dt class="text-gray-600 font-semibold">Leihmaterial-Versicherung</dt>
|
||||
<dd>{{ participant.rentalInsurance.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.rentalInsurance.label }}
|
||||
{% if participant.rentalInsurance.price is not null and participant.rentalInsurance.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.rentalInsurance.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -215,7 +324,12 @@
|
||||
<dd>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for course in participant.courses %}
|
||||
<li>{{ course.label }}</li>
|
||||
<li>
|
||||
{{ course.label }}
|
||||
{% if course.price is not null and course.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ course.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -229,7 +343,12 @@
|
||||
<dd>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for service in participant.additionalServices %}
|
||||
<li>{{ service.label }}</li>
|
||||
<li>
|
||||
{{ service.label }}
|
||||
{% if service.price is not null and service.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ service.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -240,7 +359,12 @@
|
||||
{% if participant.insurance %}
|
||||
<div class="col-span-2">
|
||||
<dt class="text-gray-600 font-semibold">Reiseversicherung</dt>
|
||||
<dd>{{ participant.insurance.label }}</dd>
|
||||
<dd>
|
||||
{{ participant.insurance.label }}
|
||||
{% if participant.insurance.price is not null and participant.insurance.price != 0 %}
|
||||
<span class="text-blue-700 font-semibold ml-1">(€{{ participant.insurance.price|number_format(2, ',', '.') }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
</dl>
|
||||
|
||||
Reference in New Issue
Block a user