feat(SW-718): Created store for selectRate

components/HotelReservation/SelectRate/SelectedRoomPanel/index.tsx

@@ -1,7 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { EditIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -16,11 +18,13 @@ export default function SelectedRoomPanel({
   room,
   selectedRate,
   roomCategories,
+  handleModify,
 }: {
   roomIndex: number
   room: RoomParam
   selectedRate: Rate | null
   roomCategories: RoomData[]
+  handleModify: () => void
 }) {
   const intl = useIntl()
   const images = roomCategories.find((roomCategory) =>
@@ -67,12 +71,25 @@ export default function SelectedRoomPanel({
           })}
         </Caption>
       </div>
-      <Image
-        src={images?.[0]?.imageSizes?.tiny ?? ""}
-        alt={selectedRate?.roomType ?? images?.[0]?.metaData?.altText ?? ""}
-        width={240}
-        height={160}
-      />
+      <div className={styles.imageAndModifyButtonContainer}>
+        {images && (
+          <div className={styles.imageContainer}>
+            <Image
+              src={images[0].imageSizes?.tiny ?? ""}
+              alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
+              fill
+            />
+          </div>
+        )}
+        <div className={styles.modifyButtonContainer}>
+          <Button variant="icon" size="small" onClick={handleModify}>
+            <EditIcon />
+            {intl.formatMessage({
+              id: "Modify",
+            })}
+          </Button>
+        </div>
+      </div>
     </div>
   )
 }