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

fix/SW-2247 enter details fixes

Browse Source 
* fix(SW-2247): Removed accordion like special requests block and changed button variant

* fix(SW-2247): Added additional info for bedtype selection

Approved-by: Tobias Johansson
Approved-by: Niclas Edenvin
This commit is contained in:
Erik Tiekstra
2025-04-16 09:49:53 +00:00
parent 700141f45e
commit 7108537cb8
19 changed files with 154 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx
View File

@@ -3,10 +3,11 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import Button from "@/components/TempDesignSystem/Button"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -133,15 +134,15 @@ export default function Details() {
</div>
<footer className={styles.footer}>
<Button
disabled={
isDisabled={
!(
methods.formState.isValid ||
(isPaymentNext && canProceedToPayment)
)
}
intent="secondary"
size="small"
theme="base"
variant="Tertiary"
typography="Body/Paragraph/mdBold"
size="Medium"
type="submit"
>
{isPaymentNext

11
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -4,10 +4,11 @@ import { useCallback, useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import Button from "@/components/TempDesignSystem/Button"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -151,15 +152,15 @@ export default function Details({ user }: DetailsProps) {
</div>
<footer className={styles.footer}>
<Button
disabled={
isDisabled={
!(
methods.formState.isValid ||
(isPaymentNext && canProceedToPayment)
)
}
intent="secondary"
size="small"
theme="base"
variant="Tertiary"
typography="Body/Paragraph/mdBold"
size="Medium"
type="submit"
>
{isPaymentNext

48
apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx
View File

@@ -1,42 +1,25 @@
import { useState } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import styles from "./specialRequests.module.css"
export default function SpecialRequests() {
const [isOpen, setIsOpen] = useState(false)
const intl = useIntl()
function toggleRequests() {
setIsOpen((prevVal) => !prevVal)
}
return (
<div className={styles.requests} data-requests-open={isOpen}>
<button className={styles.toggle} onClick={toggleRequests} type="button">
<Footnote
color="uiTextHighContrast"
textTransform="uppercase"
type="label"
className={styles.header}
textAlign="left"
>
<div className={styles.requests}>
<Typography variant="Title/Overline/sm">
<p className={styles.heading}>
{intl.formatMessage({
defaultMessage: "Special requests",
defaultMessage: "Special requests (optional)",
})}
</Footnote>
<MaterialIcon icon="keyboard_arrow_down" className={styles.chevron} />
<Divider className={styles.divider} color="subtle" />
</button>
</p>
</Typography>
<div className={styles.content}>
<div className={styles.contentWrapper}>
{/*
{/*
TODO: Hiding because API is not ready for this yet (https://scandichotels.atlassian.net/browse/SW-1497). Add back in when API is ready.
@@ -74,14 +57,13 @@ export default function SpecialRequests() {
},
]}
/> */}
<TextArea
label={intl.formatMessage({
defaultMessage:
"Is there anything else you would like us to know before your arrival?",
})}
name="specialRequest.comment"
/>
</div>
<TextArea
label={intl.formatMessage({
defaultMessage:
"Is there anything else you would like us to know before your arrival?",
})}
name="specialRequest.comment"
/>
</div>
</div>
)

49
apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/specialRequests.module.css
View File

@@ -1,55 +1,14 @@
.requests {
--header-height: 50px;
display: grid;
grid-template-rows: var(--header-height) 0fr;
transition: 0.3s ease-out;
grid-column: 1 / -1;
}
.toggle {
display: grid;
grid-template-areas:
"header chevron"
"divider divider";
grid-template-columns: 1fr auto;
background-color: transparent;
gap: var(--Spacing-x1);
border: none;
width: 100%;
cursor: pointer;
margin: var(--Spacing-x2) 0;
gap: var(--Space-x2);
}
.header {
grid-area: header;
align-self: flex-start;
}
.chevron {
grid-area: chevron;
}
.divider {
grid-area: divider;
border-top: 1px solid var(--Color-gray-300);
}
.requests[data-requests-open="true"] .chevron {
transform: rotate(180deg);
.heading {
color: var(--Text-Default);
}
.content {
overflow: hidden;
}
.contentWrapper {
padding-top: var(--Spacing-x3);
display: grid;
gap: var(--Spacing-x2);
width: 100%;
}
.requests[data-requests-open="true"] {
grid-template-rows: var(--header-height) 1fr;
gap: var(--Space-x2);
}