diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx new file mode 100644 index 000000000..1680cb848 --- /dev/null +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx @@ -0,0 +1,53 @@ +import { useIntl } from "react-intl" + +import Button from "@/components/TempDesignSystem/Button" +import Body from "@/components/TempDesignSystem/Text/Body" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "./rateSummary.module.css" + +import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary" + +export default function RateSummary({ rateSummary, user }: RateSummaryProps) { + const intl = useIntl() + return ( +
+
+ {rateSummary.roomType} + {rateSummary.priceName} +
+
+
+ {user ? ( + <> + + {rateSummary.member?.localPrice.pricePerStay}{" "} + {rateSummary.member?.localPrice.currency} + + + {intl.formatMessage({ id: "Approx." })}{" "} + {rateSummary.member?.requestedPrice?.pricePerStay}{" "} + {rateSummary.member?.requestedPrice?.currency} + + + ) : ( + <> + + {rateSummary.public?.localPrice.pricePerStay}{" "} + {rateSummary.public?.localPrice.currency} + + + {intl.formatMessage({ id: "Approx." })}{" "} + {rateSummary.public?.requestedPrice?.pricePerStay}{" "} + {rateSummary.public?.requestedPrice?.currency} + + + )} +
+ +
+
+ ) +} diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css new file mode 100644 index 000000000..c8352efb1 --- /dev/null +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css @@ -0,0 +1,17 @@ +.summary { + position: fixed; + z-index: 10; + bottom: 0; + left: 0; + right: 0; + background-color: var(--Base-Surface-Primary-light-Normal); + padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5); + display: flex; + justify-content: space-between; + align-items: center; +} + +.summaryPrice { + display: flex; + gap: var(--Spacing-x4); +} diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx index d958d223d..e8c4edbc4 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx @@ -1,12 +1,8 @@ "use client" import { useRouter, useSearchParams } from "next/navigation" import { useState } from "react" -import { useIntl } from "react-intl" - -import Button from "@/components/TempDesignSystem/Button" -import Body from "@/components/TempDesignSystem/Text/Body" -import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import RateSummary from "./RateSummary" import RoomCard from "./RoomCard" import styles from "./roomSelection.module.css" @@ -23,7 +19,6 @@ export default function RoomSelection({ const router = useRouter() const searchParams = useSearchParams() - const intl = useIntl() function handleSubmit(e: React.FormEvent) { e.preventDefault() @@ -52,46 +47,7 @@ export default function RoomSelection({ ))} - {rateSummary && ( -
-
- {rateSummary.roomType} - {rateSummary.priceName} -
-
-
- {user ? ( - <> - - {rateSummary.member?.localPrice.pricePerStay}{" "} - {rateSummary.member?.localPrice.currency} - - - {intl.formatMessage({ id: "Approx." })}{" "} - {rateSummary.member?.requestedPrice?.pricePerStay}{" "} - {rateSummary.member?.requestedPrice?.currency} - - - ) : ( - <> - - {rateSummary.public?.localPrice.pricePerStay}{" "} - {rateSummary.public?.localPrice.currency} - - - {intl.formatMessage({ id: "Approx." })}{" "} - {rateSummary.public?.requestedPrice?.pricePerStay}{" "} - {rateSummary.public?.requestedPrice?.currency} - - - )} -
- -
-
- )} + {rateSummary && } ) diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css index a26767556..66a27302e 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css @@ -20,24 +20,6 @@ width: 0; } -.summary { - position: fixed; - z-index: 10; - bottom: 0; - left: 0; - right: 0; - background-color: var(--Base-Surface-Primary-light-Normal); - padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5); - display: flex; - justify-content: space-between; - align-items: center; -} - -.summaryPrice { - display: flex; - gap: var(--Spacing-x4); -} - @media (min-width: 767px) { .roomList { grid-template-columns: repeat(3, minmax(240px, 1fr)); diff --git a/types/components/hotelReservation/selectRate/rateSummary.ts b/types/components/hotelReservation/selectRate/rateSummary.ts new file mode 100644 index 000000000..888b86148 --- /dev/null +++ b/types/components/hotelReservation/selectRate/rateSummary.ts @@ -0,0 +1,8 @@ +import { Rate } from "./selectRate" + +import { User } from "@/types/user" + +export interface RateSummaryProps { + rateSummary: Rate + user: User | null +} diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts index e22a5d7f2..43152f11b 100644 --- a/types/components/hotelReservation/selectRate/selectRate.ts +++ b/types/components/hotelReservation/selectRate/selectRate.ts @@ -12,12 +12,3 @@ export interface Rate { public: Product["productType"]["public"] member: Product["productType"]["member"] } - -export interface State { - selectedRate: Rate | null -} - -export type SetSelectedRateAction = { - type: "SET_SELECTED_RATE" - payload: Rate -}