113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
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";
|
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
|
|
|
export const RoomDetails = () => {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { roomDetails } = useAppSelector(selectCart);
|
|
const [isRoomBottomSheetOpen, setIsRoomBottomSheetOpen] = useState(false);
|
|
|
|
const { orderType } = useAppSelector(selectCart);
|
|
|
|
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 === OrderType.ToRoom && (
|
|
<>
|
|
<Card
|
|
title={t("address.roomDetails")}
|
|
extra={
|
|
<Button
|
|
type="primary"
|
|
size="small"
|
|
onClick={handleRoomBottomSheetOpen}
|
|
style={{ boxShadow: "none" }}
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
}
|
|
>
|
|
<br />
|
|
<div className={styles.iconCenterContainer}>
|
|
<RoomServiceIcon />
|
|
</div>
|
|
<br />
|
|
<div className={styles.detailsRowContainer}>
|
|
<div className={styles.detailItemContainer}>
|
|
<Button
|
|
className={styles.iconButtonStyle}
|
|
icon={<GoldenHouseIcon />}
|
|
/>
|
|
<div>
|
|
<ProText className={styles.detailLabelStyle}>
|
|
{t("address.floorNo")}
|
|
</ProText>
|
|
<br />
|
|
<ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.floorNo}</ProText>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.detailItemContainer}>
|
|
<Button
|
|
className={styles.iconButtonStyle}
|
|
icon={<BuildsIcon />}
|
|
/>
|
|
<div>
|
|
<ProText className={styles.detailLabelStyle}>
|
|
{t("address.roomNo")}
|
|
</ProText>
|
|
<br />
|
|
<ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.roomNo}</ProText>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<RoomBottomSheet
|
|
isOpen={isRoomBottomSheetOpen}
|
|
onClose={handleRoomBottomSheetClose}
|
|
initialValue={roomDetails}
|
|
onSave={handleRoomDetailsSave}
|
|
/>
|
|
</>
|
|
)
|
|
);
|
|
};
|