scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-589): break out RateSummary

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-15 09:52:50 +02:00
parent 72eca90d1b
commit 0f27d3b2b5
6 changed files with 80 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx Normal file
View File

@@ -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 (
<div className={styles.summary}>
<div className={styles.summaryText}>
<Subtitle>{rateSummary.roomType}</Subtitle>
<Body>{rateSummary.priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceText}>
{user ? (
<>
<Subtitle color="red">
{rateSummary.member?.localPrice.pricePerStay}{" "}
{rateSummary.member?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.member?.requestedPrice?.pricePerStay}{" "}
{rateSummary.member?.requestedPrice?.currency}
</Body>
</>
) : (
<>
<Subtitle>
{rateSummary.public?.localPrice.pricePerStay}{" "}
{rateSummary.public?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.public?.requestedPrice?.pricePerStay}{" "}
{rateSummary.public?.requestedPrice?.currency}
</Body>
</>
)}
</div>
<Button type="submit" theme="base">
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
)
}

17
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css Normal file
View File

@@ -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);
}

48
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -1,12 +1,8 @@
"use client" "use client"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useState } from "react" 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 RoomCard from "./RoomCard"
import styles from "./roomSelection.module.css" import styles from "./roomSelection.module.css"
@@ -23,7 +19,6 @@ export default function RoomSelection({
const router = useRouter() const router = useRouter()
const searchParams = useSearchParams() const searchParams = useSearchParams()
const intl = useIntl()
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault() e.preventDefault()
@@ -52,46 +47,7 @@ export default function RoomSelection({
</li> </li>
))} ))}
</ul> </ul>
{rateSummary && ( {rateSummary && <RateSummary rateSummary={rateSummary} user={user} />}
<div className={styles.summary}>
<div className={styles.summaryText}>
<Subtitle>{rateSummary.roomType}</Subtitle>
<Body>{rateSummary.priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceText}>
{user ? (
<>
<Subtitle color="red">
{rateSummary.member?.localPrice.pricePerStay}{" "}
{rateSummary.member?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.member?.requestedPrice?.pricePerStay}{" "}
{rateSummary.member?.requestedPrice?.currency}
</Body>
</>
) : (
<>
<Subtitle>
{rateSummary.public?.localPrice.pricePerStay}{" "}
{rateSummary.public?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.public?.requestedPrice?.pricePerStay}{" "}
{rateSummary.public?.requestedPrice?.currency}
</Body>
</>
)}
</div>
<Button type="submit" theme="base">
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
)}
</form> </form>
</div> </div>
) )

18
components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
View File

@@ -20,24 +20,6 @@
width: 0; 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) { @media (min-width: 767px) {
.roomList { .roomList {
grid-template-columns: repeat(3, minmax(240px, 1fr)); grid-template-columns: repeat(3, minmax(240px, 1fr));

8
types/components/hotelReservation/selectRate/rateSummary.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Rate } from "./selectRate"
import { User } from "@/types/user"
export interface RateSummaryProps {
rateSummary: Rate
user: User | null
}

9
types/components/hotelReservation/selectRate/selectRate.ts
View File

@@ -12,12 +12,3 @@ export interface Rate {
public: Product["productType"]["public"] public: Product["productType"]["public"]
member: Product["productType"]["member"] member: Product["productType"]["member"]
} }
export interface State {
selectedRate: Rate | null
}
export type SetSelectedRateAction = {
type: "SET_SELECTED_RATE"
payload: Rate
}