feat(SW-70): create base for rate selection page

This is the foundation for the rate selection. Since we don't have UX and UI ready yet this is on a best effort basis. Things that will be changed later includes proper API fetching, correct design, internationalization of text and form handling.
2024-07-08 11:06:58 +02:00
parent bb422f804d
commit d6fe6a33b4
9 changed files with 264 additions and 11 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
@@ -0,0 +1,114 @@
+import RoomCard from "@/components/HotelReservation/SelectRate/RoomCard"
+import { Room } from "@/components/HotelReservation/SelectRate/RoomCard/roomCard"
+import Header from "@/components/Section/Header"
+
+import styles from "./page.module.css"
+
+const getRooms: () => Promise<Room[]> = () => {
+  return new Promise((resolve) =>
+    resolve([
+      {
+        id: 1,
+        name: "Cabin",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "17 - 24 m² (1 - 2 persons)",
+        pricePerNight: 1348,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 2,
+        name: "Standard",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "19 - 30 m² (1 - 2 persons)",
+        pricePerNight: 1548,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 3,
+        name: "Superior",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "22 - 40 m² (1 - 3 persons)",
+        pricePerNight: 1744,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 4,
+        name: "Superior Family",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "29 - 49 m² (3 - 4 persons)",
+        pricePerNight: 2032,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 5,
+        name: "Superior PLUS",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "21 - 28 m² (2 - 3 persons)",
+        pricePerNight: 2065,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+      {
+        id: 6,
+        name: "Junior Suite",
+        description:
+          "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
+        size: "35 - 43 m² (2 - 4 persons)",
+        pricePerNight: 3012,
+        currency: "SEK",
+        imageSrc:
+          "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
+      },
+    ])
+  )
+}
+
+export default async function SelectRate() {
+  const rooms = await getRooms()
+
+  return (
+    <div className={styles.page}>
+      <main className={styles.content}>
+        <div className={styles.hotelInfo}>Hotel info TBI</div>
+        <div className={styles.header}>
+          <Header
+            title="Choose room"
+            subtitle={"Which room class suits you the best?"}
+            link={{
+              href: "#",
+              text: "All rooms comes with standard amenities",
+            }}
+          />
+        </div>
+
+        <ul className={styles.roomList}>
+          {rooms.map((room) => (
+            <li key={room.id}>
+              <input
+                type="radio"
+                name="room"
+                value={room.id}
+                id={`room-${room.id}`}
+              />
+              <RoomCard room={room} />
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  )
+}