81 lines
2.5 KiB
Svelte
81 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { passengerInfoVM } from "$lib/domains/passengerinfo/view/passenger.info.vm.svelte";
|
|
import Icon from "$lib/components/atoms/icon.svelte";
|
|
import { capitalize } from "$lib/core/string.utils";
|
|
import BackpackIcon from "~icons/solar/backpack-linear";
|
|
import BagIcon from "~icons/lucide/briefcase";
|
|
import SuitcaseIcon from "~icons/bi/suitcase2";
|
|
import SeatIcon from "~icons/solar/armchair-2-linear";
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-6">
|
|
{#each passengerInfoVM.passengerInfos as passenger, index}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-semibold">
|
|
Passenger {index + 1} ({capitalize(passenger.passengerType)})
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Personal Info -->
|
|
<div class="rounded-lg border bg-gray-50 p-4">
|
|
<div class="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
|
|
<div>
|
|
<span class="text-gray-500">Name</span>
|
|
<p class="font-medium">
|
|
{passenger.passengerPii.firstName}
|
|
{passenger.passengerPii.lastName}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-500">Nationality</span>
|
|
<p class="font-medium">
|
|
{passenger.passengerPii.nationality}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-500">Date of Birth</span>
|
|
<p class="font-medium">{passenger.passengerPii.dob}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baggage Selection -->
|
|
<div class="flex flex-wrap gap-4 text-sm">
|
|
{#if passenger.bagSelection.personalBags > 0}
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon={BackpackIcon} cls="h-5 w-5 text-gray-600" />
|
|
<span>Personal Item</span>
|
|
</div>
|
|
{/if}
|
|
{#if passenger.bagSelection.handBags > 0}
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon={SuitcaseIcon} cls="h-5 w-5 text-gray-600" />
|
|
<span>{passenger.bagSelection.handBags} x Cabin Bag</span>
|
|
</div>
|
|
{/if}
|
|
{#if passenger.bagSelection.checkedBags > 0}
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon={BagIcon} cls="h-5 w-5 text-gray-600" />
|
|
<span>
|
|
{passenger.bagSelection.checkedBags} x Checked Bag
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Seat Selection -->
|
|
{#if passenger.seatSelection.number}
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<Icon icon={SeatIcon} cls="h-5 w-5 text-gray-600" />
|
|
<span>Seat {passenger.seatSelection.number}</span>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if index < passengerInfoVM.passengerInfos.length - 1}
|
|
<div class="border-b border-dashed"></div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|