Initial commit

src/pages/checkout/components/RoomDetails.tsx

@@ -0,0 +1,116 @@
+import { Button, Card } from "antd";
+import { RoomBottomSheet } from "components/CustomBottomSheet/RoomBottomSheet";
+import BuildsIcon from "components/Icons/address/BuildsIcon";
+import GoldenHouseIcon from "components/Icons/address/GoldenHouseIcon";
+import RoomServiceIcon from "components/Icons/address/RoomServiceIcon";
+import ProText from "components/ProText";
+import {
+  RoomDetailsType,
+  selectCart,
+  updateRoomDetails,
+} from "features/order/orderSlice";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import styles from "../../address/address.module.css";
+
+export const RoomDetails = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { roomDetails } = useAppSelector(selectCart);
+  const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);
+
+  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
+
+  const handleRoomDetailsSave = useCallback(
+    (roomDetailsData: RoomDetailsType) => {
+      try {
+        dispatch(updateRoomDetails(roomDetailsData));
+        console.log("Room details saved to Redux store:", roomDetailsData);
+      } catch (error) {
+        console.error("Failed to parse location data:", error);
+      }
+    },
+    [dispatch]
+  );
+
+  const handleRoomBottomSheetOpen = useCallback(() => {
+    setIsRoomBottomSheetOpen(true);
+  }, []);
+
+  const handleRoomBottomSheetClose = useCallback(() => {
+    setIsRoomBottomSheetOpen(false);
+  }, []);
+
+  const buttonText = useMemo(
+    () => (roomDetails ? t("address.changeRoom") : t("address.selectRoom")),
+    [roomDetails, t]
+  );
+
+  return (
+    orderType === "room" && (
+      <>
+        <Card
+          title={t("address.roomDetails")}
+          extra={
+            <Button
+              type="primary"
+              size="small"
+              onClick={handleRoomBottomSheetOpen}
+            >
+              {buttonText}
+            </Button>
+          }
+        >
+          <br />
+          <div className={styles.iconCenterContainer}>
+            <RoomServiceIcon />
+          </div>
+          <br />
+          <div className={styles.detailsRowContainer}>
+            <div className={styles.detailItemContainer}>
+              <Button
+                type="text"
+                shape="circle"
+                className={styles.iconButtonStyle}
+              >
+                <GoldenHouseIcon />
+              </Button>
+              <div>
+                <ProText className={styles.detailLabelStyle}>
+                  {t("address.floorNo")}
+                </ProText>
+                <br />
+                <ProText type="secondary">{roomDetails?.floorNo}</ProText>
+              </div>
+            </div>
+
+            <div className={styles.detailItemContainer}>
+              <Button
+                type="text"
+                shape="circle"
+                className={styles.iconButtonStyle}
+              >
+                <BuildsIcon />
+              </Button>
+              <div>
+                <ProText className={styles.detailLabelStyle}>
+                  {t("address.roomNo")}
+                </ProText>
+                <br />
+                <ProText type="secondary">{roomDetails?.roomNo}</ProText>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        <RoomBottomSheet
+          isOpen={isRoomBottomSheetOpen}
+          onClose={handleRoomBottomSheetClose}
+          initialValue={roomDetails}
+          onSave={handleRoomDetailsSave}
+        />
+      </>
+    )
+  );
+};