128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { notFound } from "@/server/errors/next"
|
|
|
|
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
|
|
import Summary from "@/components/HotelReservation/SelectRate/Summary"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
|
|
import styles from "./page.module.css"
|
|
|
|
import { LangParams, PageArgs } from "@/types/params"
|
|
|
|
enum StepEnum {
|
|
"select-bed" = "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)
|
|
}
|
|
|
|
export default function StepPage({
|
|
params,
|
|
}: PageArgs<LangParams & { step: Step }>) {
|
|
const [activeStep, setActiveStep] = useState<Step>(params.step)
|
|
const intl = useIntl()
|
|
|
|
if (!isValidStep(activeStep)) {
|
|
return notFound()
|
|
}
|
|
|
|
switch (activeStep) {
|
|
case StepEnum.breakfast:
|
|
//return <div>Select BREAKFAST</div>
|
|
case StepEnum.details:
|
|
//return <div>Select DETAILS</div>
|
|
case StepEnum.payment:
|
|
//return <div>Select PAYMENT</div>
|
|
case StepEnum["select-bed"]:
|
|
// return <div>Select BED</div>
|
|
}
|
|
|
|
function onNav(step: Step) {
|
|
setActiveStep(step)
|
|
if (typeof window !== "undefined") {
|
|
window.history.pushState({}, "", step)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className={styles.page}>
|
|
<div className={styles.content}>
|
|
<section className={styles.section}>
|
|
<SectionAccordion
|
|
header="Select bed"
|
|
isCompleted={true}
|
|
isOpen={activeStep === StepEnum["select-bed"]}
|
|
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>
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Food options"
|
|
isCompleted={true}
|
|
isOpen={activeStep === StepEnum.breakfast}
|
|
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>
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Details"
|
|
isCompleted={false}
|
|
isOpen={activeStep === StepEnum.details}
|
|
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>
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Payment"
|
|
isCompleted={false}
|
|
isOpen={activeStep === StepEnum.payment}
|
|
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>
|
|
</SectionAccordion>
|
|
</section>
|
|
<aside className={styles.summary}>
|
|
<Summary />
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|