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

feat(SW-472): Add EnterDetails SidePeek

Browse Source
This commit is contained in:
Arvid Norlin
2024-10-14 15:36:42 +02:00
parent 3a3491c534
commit 103dcc7f1e
20 changed files with 194 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css Normal file
View File

@@ -0,0 +1,11 @@
.article {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
}

42
components/HotelReservation/EnterDetails/SidePeek/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
"use client"
import { useIntl } from "react-intl"
import { useEnterDetailsStore } from "@/stores/enter-details"
import Contact from "@/components/HotelReservation/Contact"
import Divider from "@/components/TempDesignSystem/Divider"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./enterDetailsSidePeek.module.css"
import {
SidePeekEnum,
SidePeekProps,
} from "@/types/components/enterDetails/sidePeek"
export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
const activeSidePeek = useEnterDetailsStore((state) => state.activeSidePeek)
const close = useEnterDetailsStore((state) => state.closeSidePeek)
const intl = useIntl()
return (
<SidePeek
contentKey={SidePeekEnum.hotelDetails}
title={intl.formatMessage({ id: "About the hotel" })}
isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
handleClose={close}
>
<article className={styles.article}>
<Contact hotel={hotel} />
<Divider />
<section className={styles.section}>
<Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
<Body>{hotel.hotelContent.texts.facilityInformation}</Body>
</section>
</article>
</SidePeek>
)
}

35
components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx Normal file
View File

@@ -0,0 +1,35 @@
"use client"
import { useIntl } from "react-intl"
import { useEnterDetailsStore } from "@/stores/enter-details"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { SidePeekEnum } from "@/types/components/enterDetails/sidePeek"
export default function ToggleSidePeek() {
const intl = useIntl()
const openSidePeek = useEnterDetailsStore((state) => state.openSidePeek)
return (
<Button
onClick={() => {
openSidePeek(SidePeekEnum.hotelDetails)
}}
theme="base"
size="small"
variant="icon"
intent="text"
wrapping
>
{intl.formatMessage({ id: "See room details" })}{" "}
<ChevronRightSmallIcon
color="baseButtonTextOnFillNormal"
height={20}
width={20}
/>
</Button>
)
}

21
components/HotelReservation/EnterDetails/Summary/index.tsx
View File

@@ -1,13 +1,14 @@
import { dt } from "@/lib/dt"
import { ArrowRightIcon, ChevronRightSmallIcon } from "@/components/Icons"
import { ArrowRightIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import ToggleSidePeek from "./ToggleSidePeek"
import styles from "./summary.module.css"
// TEMP
@@ -21,7 +22,6 @@ const rooms = [
export default async function Summary() {
const intl = await getIntl()
const lang = getLang()
const fromDate = dt().locale(lang).format("ddd, D MMM")
const toDate = dt().add(1, "day").locale(lang).format("ddd, D MMM")
const diff = dt(toDate).diff(fromDate, "days")
@@ -75,19 +75,8 @@ export default async function Summary() {
<ArrowRightIcon color="uiTextMediumContrast" height={15} width={15} />
{toDate}
</Body>
<Link
className={styles.link}
color="baseButtonTextOnFillNormal"
href="#"
variant="icon"
>
{intl.formatMessage({ id: "See room details" })}
<ChevronRightSmallIcon
color="baseButtonTextOnFillNormal"
height={20}
width={20}
/>
</Link>
<ToggleSidePeek />
</header>
<Divider color="primaryLightSubtle" />
<div className={styles.addOns}>