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

fix: add forms in accordions

Browse Source
This commit is contained in:
Christel Westerberg
2024-10-08 11:39:33 +02:00
parent 668eedd837
commit f72f3a40ee
11 changed files with 71 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
View File

@@ -1,41 +1,61 @@
"use client"
import { notFound } from "next/navigation"
import { useState } from "react"
import { useIntl } from "react-intl"
import { notFound } from "@/server/errors/next"
import { trpc } from "@/lib/trpc/client"
import BedType from "@/components/HotelReservation/EnterDetails/BedType"
import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
import Details from "@/components/HotelReservation/EnterDetails/Details"
import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import Payment from "@/components/HotelReservation/SelectRate/Payment"
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
import Summary from "@/components/HotelReservation/SelectRate/Summary"
import Button from "@/components/TempDesignSystem/Button"
import LoadingSpinner from "@/components/LoadingSpinner"
import styles from "./page.module.css"
import { LangParams, PageArgs } from "@/types/params"
enum StepEnum {
"select-bed" = "select-bed",
selectBed = "select-bed",
breakfast = "breakfast",
details = "details",
payment = "payment",
}
type Step = keyof typeof StepEnum
function isValidStep(step: string): step is Step {
return Object.keys(StepEnum).includes(step)
function isValidStep(step: string): step is StepEnum {
return Object.values(StepEnum).includes(step as StepEnum)
}
export default function StepPage({
params,
}: PageArgs<LangParams & { step: Step }>) {
const [activeStep, setActiveStep] = useState<Step>(params.step)
}: PageArgs<LangParams & { step: StepEnum }>) {
const { step } = params
const [activeStep, setActiveStep] = useState<StepEnum>(step)
const intl = useIntl()
if (!isValidStep(activeStep)) {
return notFound()
}
const { data: hotel, isLoading: loadingHotel } =
trpc.hotel.hotelData.get.useQuery({
hotelId: "811",
language: params.lang,
})
if (loadingHotel) {
return <LoadingSpinner />
}
if (!hotel) {
// TODO: handle case with hotel missing
return notFound()
}
switch (activeStep) {
case StepEnum.breakfast:
//return <div>Select BREAKFAST</div>
@@ -43,11 +63,11 @@ export default function StepPage({
//return <div>Select DETAILS</div>
case StepEnum.payment:
//return <div>Select PAYMENT</div>
case StepEnum["select-bed"]:
case StepEnum.selectBed:
// return <div>Select BED</div>
}
function onNav(step: Step) {
function onNav(step: StepEnum) {
setActiveStep(step)
if (typeof window !== "undefined") {
window.history.pushState({}, "", step)
@@ -56,22 +76,17 @@ export default function StepPage({
return (
<main className={styles.page}>
<HotelSelectionHeader hotel={hotel.data.attributes} />
<div className={styles.content}>
<section className={styles.section}>
<SectionAccordion
header="Select bed"
isCompleted={true}
isOpen={activeStep === StepEnum["select-bed"]}
isOpen={activeStep === StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
path="/select-bed"
>
<div className={styles.form}>
Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
cskdfaen
<Button onClick={() => onNav("breakfast")}>
Go to breakfast!
</Button>
</div>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
@@ -80,11 +95,7 @@ export default function StepPage({
label={intl.formatMessage({ id: "Select breakfast options" })}
path="/breakfast"
>
<div className={styles.form}>
Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
cskdfaen
<Button onClick={() => onNav("details")}>Go to details!</Button>
</div>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
@@ -93,11 +104,7 @@ export default function StepPage({
label={intl.formatMessage({ id: "Enter your details" })}
path="/details"
>
<div className={styles.form}>
Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
cskdfaen
<Button onClick={() => onNav("payment")}>Go to payment!</Button>
</div>
<Details user={null} />
</SectionAccordion>
<SectionAccordion
header="Payment"
@@ -106,16 +113,7 @@ export default function StepPage({
label={intl.formatMessage({ id: "Select payment method" })}
path="/hotelreservation/select-bed"
>
<div className={styles.form}>
Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw
aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi
cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok
veoi cdfionaw aoiwube cskdfaen v Hejhej lorem ipsim heheheheh andi
fpok veoi cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh
andi fpok veoi cdfionaw aoiwube cskdfaen
<Button onClick={() => onNav("select-bed")}>Go to beds!</Button>
</div>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
<aside className={styles.summary}>

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

@@ -1,8 +1,10 @@
"use client"
import { useIntl } from "react-intl"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import HotelDetailSidePeek from "./HotelDetailSidePeek"
@@ -10,10 +12,10 @@ import styles from "./hotelSelectionHeader.module.css"
import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
export default async function HotelSelectionHeader({
export default function HotelSelectionHeader({
hotel,
}: HotelSelectionHeaderProps) {
const intl = await getIntl()
const intl = useIntl()
return (
<header className={styles.hotelSelectionHeader}>

6
components/HotelReservation/SelectRate/SectionAccordion/index.tsx
View File

@@ -57,7 +57,7 @@ export default function SectionAccordion({
) : null}
</div>
</div>
<main className={styles.main}>
<div className={styles.main}>
<header className={styles.headerContainer}>
<div>
<Footnote
@@ -70,7 +70,7 @@ export default function SectionAccordion({
<Subtitle
type="two"
className={styles.selection}
color="highContrast"
color="uiTextHighContrast"
>
{label}
</Subtitle>
@@ -85,7 +85,7 @@ export default function SectionAccordion({
<div className={styles.content} ref={contentRef}>
{children}
</div>
</main>
</div>
</section>
)
}

2
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -59,6 +59,6 @@
color: var(--Scandic-Brand-Pale-Peach);
}
.highContrast {
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}

2
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -8,7 +8,7 @@ const config = {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
highContrast: styles.highContrast,
uiTextHighContrast: styles.uiTextHighContrast,
},
textAlign: {
center: styles.center,

4
i18n/dictionaries/da.json
View File

@@ -84,6 +84,7 @@
"Email": "E-mail",
"Email address": "E-mailadresse",
"Enter destination or hotel": "Indtast destination eller hotel",
"Enter your details": "Indtast dine oplysninger",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Udforsk alle niveauer og fordele",
@@ -212,6 +213,7 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Gentag den nye adgangskode",
"Request bedtype": "Anmod om sengetype",
"Room & Terms": "Værelse & Vilkår",
"Room facilities": "Værelsesfaciliteter",
"Rooms": "Værelser",
@@ -226,10 +228,12 @@
"See room details": "Se værelsesdetaljer",
"See rooms": "Se værelser",
"Select a country": "Vælg et land",
"Select breakfast options": "Vælg morgenmadsmuligheder",
"Select country of residence": "Vælg bopælsland",
"Select date of birth": "Vælg fødselsdato",
"Select dates": "Vælg datoer",
"Select language": "Vælg sprog",
"Select payment method": "Vælg betalingsmetode",
"Select your language": "Vælg dit sprog",
"Shopping": "Shopping",
"Shopping & Dining": "Shopping & Spisning",

4
i18n/dictionaries/de.json
View File

@@ -84,6 +84,7 @@
"Email address": "E-Mail-Adresse",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Enter destination or hotel": "Reiseziel oder Hotel eingeben",
"Enter your details": "Geben Sie Ihre Daten ein",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile",
"Explore nearby": "Erkunden Sie die Umgebung",
@@ -210,6 +211,7 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Neues Passwort erneut eingeben",
"Request bedtype": "Bettentyp anfragen",
"Room & Terms": "Zimmer & Bedingungen",
"Room facilities": "Zimmerausstattung",
"Rooms": "Räume",
@@ -224,10 +226,12 @@
"See room details": "Zimmerdetails ansehen",
"See rooms": "Zimmer ansehen",
"Select a country": "Wähle ein Land",
"Select breakfast options": "Wählen Sie Frühstücksoptionen",
"Select country of residence": "Wählen Sie das Land Ihres Wohnsitzes aus",
"Select date of birth": "Geburtsdatum auswählen",
"Select dates": "Datum auswählen",
"Select language": "Sprache auswählen",
"Select payment method": "Zahlungsart auswählen",
"Select your language": "Wählen Sie Ihre Sprache",
"Shopping": "Einkaufen",
"Shopping & Dining": "Einkaufen & Essen",

4
i18n/dictionaries/en.json
View File

@@ -84,6 +84,7 @@
"Email address": "Email address",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Enter destination or hotel": "Enter destination or hotel",
"Enter your details": "Enter your details",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Explore all levels and benefits",
"Explore nearby": "Explore nearby",
@@ -314,6 +315,9 @@
"number": "number",
"or": "or",
"points": "Points",
"Request bedtype": "Request bedtype",
"Select breakfast options": "Select breakfast options",
"Select payment method": "Select payment method",
"special character": "special character",
"spendable points expiring by": "{points} spendable points expiring by {date}",
"to": "to",

4
i18n/dictionaries/fi.json
View File

@@ -83,6 +83,7 @@
"Email": "Sähköposti",
"Email address": "Sähköpostiosoite",
"Enter destination or hotel": "Anna kohde tai hotelli",
"Enter your details": "Anna tietosi",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin",
@@ -216,6 +217,7 @@
"Rooms": "Huoneet",
"Rooms & Guests": "Huoneet & Vieraat",
"Rooms & Guestss": "Huoneet & Vieraat",
"Request bedtype": "Pyydä sänkytyyppiä",
"Sauna and gym": "Sauna and gym",
"Save": "Tallenna",
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
@@ -226,10 +228,12 @@
"See room details": "Katso huoneen tiedot",
"See rooms": "Katso huoneet",
"Select a country": "Valitse maa",
"Select breakfast options": "Valitse aamiaisvaihtoehdot",
"Select country of residence": "Valitse asuinmaa",
"Select date of birth": "Valitse syntymäaika",
"Select dates": "Valitse päivämäärät",
"Select language": "Valitse kieli",
"Select payment method": "Valitse maksutapa",
"Select your language": "Valitse kieli",
"Shopping": "Ostokset",
"Shopping & Dining": "Ostokset & Ravintolat",

4
i18n/dictionaries/no.json
View File

@@ -83,6 +83,7 @@
"Email": "E-post",
"Email address": "E-postadresse",
"Enter destination or hotel": "Skriv inn destinasjon eller hotell",
"Enter your details": "Skriv inn detaljene dine",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
@@ -211,6 +212,7 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Skriv inn nytt passord på nytt",
"Request bedtype": "Be om sengetype",
"Room & Terms": "Rom & Vilkår",
"Room facilities": "Romfasiliteter",
"Rooms": "Rom",
@@ -225,10 +227,12 @@
"See room details": "Se detaljer om rommet",
"See rooms": "Se rom",
"Select a country": "Velg et land",
"Select breakfast options": "Velg frokostalternativer",
"Select country of residence": "Velg bostedsland",
"Select date of birth": "Velg fødselsdato",
"Select dates": "Velg datoer",
"Select language": "Velg språk",
"Select payment method": "Velg betalingsmetode",
"Select your language": "Velg språk",
"Shopping": "Shopping",
"Shopping & Dining": "Shopping & Spisesteder",

4
i18n/dictionaries/sv.json
View File

@@ -84,6 +84,7 @@
"Email": "E-post",
"Email address": "E-postadress",
"Enter destination or hotel": "Ange destination eller hotell",
"Enter your details": "Ange dina uppgifter",
"Enjoy relaxed restaurant experiences": "Enjoy relaxed restaurant experiences",
"Events that make an impression": "Events that make an impression",
"Explore all levels and benefits": "Utforska alla nivåer och fördelar",
@@ -213,6 +214,7 @@
"Restaurant & Bar": "Restaurang & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Upprepa nytt lösenord",
"Request bedtype": "Request bedtype",
"Room & Terms": "Rum & Villkor",
"Room facilities": "Rumfaciliteter",
"Rooms": "Rum",
@@ -227,10 +229,12 @@
"See room details": "Se rumsdetaljer",
"See rooms": "Se rum",
"Select a country": "Välj ett land",
"Select breakfast options": "Välj frukostalternativ",
"Select country of residence": "Välj bosättningsland",
"Select date of birth": "Välj födelsedatum",
"Select dates": "Välj datum",
"Select language": "Välj språk",
"Select payment method": "Välj betalningsmetod",
"Select your language": "Välj ditt språk",
"Shopping": "Shopping",
"Shopping & Dining": "Shopping & Mat",