feat: Convert Selected-Room to Steplike design and fix select-rate link

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -2,10 +2,9 @@
 
 import { useIntl } from "react-intl"
 
-import { RoomConfiguration } from "@/server/routers/hotels/output"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { EditIcon, ImageIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
+import { CheckIcon, EditIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -14,82 +13,64 @@ import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./selectedRoom.module.css"
 
+import { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"
+
 export default function SelectedRoom({
   hotelId,
   room,
-}: {
-  hotelId: string
-  room: RoomConfiguration
-}) {
+  rateDescription,
+}: SelectedRoomProps) {
   const intl = useIntl()
+
+  const selectRateUrl = useEnterDetailsStore((state) => state.selectRateUrl)
+
   return (
-    <article className={styles.container}>
-      <div className={styles.tempImage}>
-        <ImageIcon
-          color="baseButtonTertiaryOnFillNormal"
-          height={60}
-          width={60}
-        />
+    <div className={styles.wrapper}>
+      <div className={styles.iconWrapper}>
+        <div className={styles.circle}>
+          <CheckIcon color="white" height="16" width="16" />
+        </div>
       </div>
-      <div className={styles.content}>
-        <div>
-          <div className={styles.textContainer}>
+      <div className={styles.main}>
+        <div className={styles.headerContainer}>
+          <div>
             <Footnote
-              className={styles.label}
-              color="uiTextPlaceholder"
+              asChild
               textTransform="uppercase"
+              type="label"
+              color="uiTextHighContrast"
             >
-              {intl.formatMessage({ id: "Your room" })}
+              <h2>{intl.formatMessage({ id: "Your room" })}</h2>
             </Footnote>
-            <div className={styles.text}>
-              {/**
-               * [TEMP]
-               * No translation on Subtitles as they will be derived
-               * from Room selection.
-               */}
-              <Subtitle
-                className={styles.room}
-                color="uiTextHighContrast"
-                type="two"
-              >
-                {room.roomType}
-              </Subtitle>
-              <Subtitle
-                className={styles.invertFontWeight}
-                color="uiTextMediumContrast"
-                type="two"
-              >
-                Free rebooking
-              </Subtitle>
-              <Subtitle
-                className={styles.invertFontWeight}
-                color="uiTextMediumContrast"
-                type="two"
-              >
-                Pay now
-              </Subtitle>
-            </div>
+            <Subtitle
+              type="two"
+              className={styles.selection}
+              color="uiTextHighContrast"
+            >
+              {room.roomType}{" "}
+              <span className={styles.rate}>{`(${rateDescription})`}</span>
+            </Subtitle>
           </div>
-          {room?.roomTypeCode && (
+
+          <Link
+            color="burgundy"
+            href={selectRateUrl}
+            size="small"
+            variant="icon"
+          >
+            <EditIcon color="burgundy" />
+            {intl.formatMessage({ id: "Change room" })}{" "}
+          </Link>
+        </div>
+        {room?.roomTypeCode && (
+          <div className={styles.details}>
             <ToggleSidePeek
               hotelId={hotelId}
               roomTypeCode={room.roomTypeCode}
             />
-          )}
-        </div>
-        <Button
-          asChild
-          intent="tertiary"
-          size="small"
-          theme="base"
-          variant="icon"
-        >
-          <Link href="#">
-            <EditIcon color="baseButtonTertiaryOnFillNormal" />
-            {intl.formatMessage({ id: "Modify" })}
-          </Link>
-        </Button>
+          </div>
+        )}
       </div>
-    </article>
+    </div>
   )
 }