feat(SW-718): Animation on selection of multiple room

components/HotelReservation/SelectRate/SelectedRoomPanel/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Image from "@/components/Image"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoomPanel.module.css"
+
+import type { RoomParam } from "@/types/components/hotelReservation/selectRate/section"
+import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { RoomData } from "@/types/hotel"
+
+export default function SelectedRoomPanel({
+  roomIndex,
+  room,
+  selectedRate,
+  roomCategories,
+}: {
+  roomIndex: number
+  room: RoomParam
+  selectedRate: Rate | null
+  roomCategories: RoomData[]
+}) {
+  const intl = useIntl()
+  const images = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.some(
+      (roomType) => roomType.code === selectedRate?.roomTypeCode
+    )
+  )?.images
+
+  return (
+    <div className={styles.selectedRoomPanel}>
+      <div>
+        <Caption type="bold">
+          {intl.formatMessage(
+            {
+              id: "Room {roomIndex}",
+            },
+            {
+              roomIndex: roomIndex + 1,
+            }
+          )}
+        </Caption>
+        <Subtitle>
+          {selectedRate?.roomType},{" "}
+          {intl.formatMessage(
+            {
+              id: room.children?.length
+                ? "{adults} adults, {children} children"
+                : "{adults} adults",
+            },
+            {
+              adults: room.adults,
+              children: room.children?.length,
+            }
+          )}
+        </Subtitle>
+        <Caption>
+          {selectedRate?.priceName}, {selectedRate?.priceTerm}
+        </Caption>
+        <Caption>
+          {selectedRate?.public.localPrice.pricePerNight}{" "}
+          {selectedRate?.public.localPrice.currency}/
+          {intl.formatMessage({
+            id: "night",
+          })}
+        </Caption>
+      </div>
+      <Image
+        src={images?.[0]?.imageSizes?.tiny ?? ""}
+        alt={selectedRate?.roomType ?? images?.[0]?.metaData?.altText ?? ""}
+        width={240}
+        height={160}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectRate/SelectedRoomPanel/selectedRoomPanel.module.css

@@ -0,0 +1,5 @@
+.selectedRoomPanel {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}