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

4
components/HotelReservation/ReadMore/Contact/contact.module.css → components/HotelReservation/Contact/contact.module.css
View File

@@ -32,8 +32,8 @@
}
.ecoLabel {
display: grid;
grid-template-columns: auto 1fr;
display: flex;
align-items: center;
column-gap: var(--Spacing-x-one-and-half);
grid-column: 2 / 3;
grid-row: 3 / 4;

19
components/HotelReservation/ReadMore/Contact/index.tsx → components/HotelReservation/Contact/index.tsx
View File

@@ -24,20 +24,26 @@ export default function Contact({ hotel }: ContactProps) {
<span className={styles.heading}>
{intl.formatMessage({ id: "Address" })}
</span>
<span>{hotel.address.streetAddress}</span>
<span>{hotel.address.city}</span>
<span>
{`${hotel.address.streetAddress}, ${hotel.address.city}`}
</span>
</li>
<li>
<span className={styles.heading}>
{intl.formatMessage({ id: "Driving directions" })}
</span>
<Link href="#">{intl.formatMessage({ id: "Google Maps" })}</Link>
<Link href="#" color="peach80">
{intl.formatMessage({ id: "Google Maps" })}
</Link>
</li>
<li>
<span className={styles.heading}>
{intl.formatMessage({ id: "Email" })}
</span>
<Link href={`mailto:${hotel.contactInformation.email}`}>
<Link
href={`mailto:${hotel.contactInformation.email}`}
color="peach80"
>
{hotel.contactInformation.email}
</Link>
</li>
@@ -45,7 +51,10 @@ export default function Contact({ hotel }: ContactProps) {
<span className={styles.heading}>
{intl.formatMessage({ id: "Contact us" })}
</span>
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
<Link
href={`tel:${hotel.contactInformation.phoneNumber}`}
color="peach80"
>
{hotel.contactInformation.phoneNumber}
</Link>
</li>

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}>

4
components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/hotelDetailSidePeek.module.css
View File

@@ -1,4 +0,0 @@
.buttons {
display: flex;
gap: var(--Spacing-x3);
}

58
components/HotelReservation/HotelSelectionHeader/HotelDetailSidePeek/index.tsx
View File

@@ -1,58 +0,0 @@
"use client"
import { useState } from "react"
import { useIntl } from "react-intl"
import ChevronRightSmallIcon from "@/components/Icons/ChevronRightSmall"
import Button from "@/components/TempDesignSystem/Button"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import styles from "./hotelDetailSidePeek.module.css"
export default function HotelDetailSidePeek() {
const intl = useIntl()
const [isOpen, setIsOpen] = useState(false)
function toggleSidePeek() {
setIsOpen(!isOpen)
}
return (
<>
<div className={styles.buttons}>
<Button
variant="icon"
theme="base"
intent="text"
wrapping
onClick={toggleSidePeek}
>
{intl.formatMessage({
id: "See hotel details",
})}
<ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
</Button>
<Button
variant="icon"
theme="base"
intent="text"
wrapping
onClick={toggleSidePeek}
>
{intl.formatMessage({
id: "Show all amenities",
})}
<ChevronRightSmallIcon aria-hidden="true" color="burgundy" />
</Button>
</div>
<SidePeek
contentKey="hotel-detail-side-peek"
title="Hotel Details"
isOpen={isOpen}
handleClose={() => setIsOpen(false)}
>
<div>TBD</div>
</SidePeek>
</>
)
}

3
components/HotelReservation/HotelSelectionHeader/index.tsx
View File

@@ -6,8 +6,6 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import HotelDetailSidePeek from "./HotelDetailSidePeek"
import styles from "./hotelSelectionHeader.module.css"
import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
@@ -46,7 +44,6 @@ export default function HotelSelectionHeader({
<Body color="textHighContrast">
{hotel.hotelContent.texts.descriptions.short}
</Body>
<HotelDetailSidePeek />
</div>
</div>
</header>

2
components/HotelReservation/ReadMore/index.tsx
View File

@@ -11,7 +11,7 @@ import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Contact from "./Contact"
import Contact from "../Contact"
import styles from "./readMore.module.css"