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

feat(SW-415): Update Room card UI

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-09 11:03:02 +02:00
parent 67df5f0771
commit 79442d80b8
19 changed files with 378 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -2,6 +2,7 @@
import { useIntl } from "react-intl"
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -32,22 +33,22 @@ export default function RoomCard({
const saveProduct = saveRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === saveRate.rateCode ||
product.productType.member.rateCode === saveRate.rateCode
product.productType.public?.rateCode === saveRate.rateCode ||
product.productType.member?.rateCode === saveRate.rateCode
)
: undefined
const changeProduct = changeRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === changeRate.rateCode ||
product.productType.member.rateCode === changeRate.rateCode
product.productType.public?.rateCode === changeRate.rateCode ||
product.productType.member?.rateCode === changeRate.rateCode
)
: undefined
const flexProduct = flexRate
? roomConfiguration.products.find(
(product) =>
product.productType.public.rateCode === flexRate.rateCode ||
product.productType.member.rateCode === flexRate.rateCode
product.productType.public?.rateCode === flexRate.rateCode ||
product.productType.member?.rateCode === flexRate.rateCode
)
: undefined
@@ -55,14 +56,7 @@ export default function RoomCard({
<div className={styles.card}>
<div className={styles.cardBody}>
<div className={styles.specification}>
<Subtitle className={styles.name} type="two">
{roomConfiguration.roomType}
</Subtitle>
<Caption>Room size TBI</Caption>
<Button intent="text" type="button" size="small" theme="base">
{intl.formatMessage({ id: "See room details" })}
</Button>
<Caption>
<Caption color="uiTextMediumContrast" className={styles.guests}>
{/*TODO: Handle pluralisation*/}
{intl.formatMessage(
{
@@ -72,39 +66,53 @@ export default function RoomCard({
// TODO: Correct number
{ nrOfGuests: 2 }
)}
</Caption>
{
// Room size TBI
}
<Caption color="uiTextMediumContrast">11-13 m²</Caption>
<Button
intent="text"
type="button"
size="small"
theme="base"
className={styles.button}
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
</Button>
</div>
<div className={styles.container}>
<Subtitle className={styles.name} type="two">
{roomConfiguration.roomType}
</Subtitle>
<Caption>Room INFORMATION </Caption>
<Caption color="uiTextPlaceholder">
{intl.formatMessage({
id: "Breakfast included",
})}
</Caption>
<FlexibilityOption
name={intl.formatMessage({ id: "Non-refundable" })}
value="non-refundable"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={saveProduct}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })}
value="free-rebooking"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={changeProduct}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })}
value="free-cancellation"
paymentTerm={intl.formatMessage({ id: "Pay later" })}
product={flexProduct}
/>
</div>
<FlexibilityOption
name={intl.formatMessage({ id: "Non-refundable" })}
value="non-refundable"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={saveProduct}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })}
value="free-rebooking"
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={changeProduct}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })}
value="free-cancellation"
paymentTerm={intl.formatMessage({ id: "Pay later" })}
product={flexProduct}
/>
<Button
type="submit"
size="small"
theme="primaryDark"
className={styles.button}
>
{intl.formatMessage({ id: "Choose room" })}
</Button>
</div>
{/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
{/* eslint-disable-next-line @next/next/no-img-element */}

27
components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
View File

@@ -8,14 +8,33 @@
}
.cardBody {
padding: var(--Spacing-x1);
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.specification {
padding: var(--Spacing-x1);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--Spacing-x1);
padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
height: 40px;
}
.specification .guests {
border-right: 1px solid var(--Base-Border-Subtle);
padding-right: var(--Spacing-x1);
}
.specification .button {
margin-left: auto;
padding: 0 0 0 var(--Spacing-x-half);
text-decoration: none;
}
.container {
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
@@ -25,10 +44,6 @@
display: inline-block;
}
.card .button {
display: inline;
}
.card img {
max-width: 100%;
aspect-ratio: 16/9;