114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { notFound } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
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 Payment from "@/components/HotelReservation/SelectRate/Payment"
|
|
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
|
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
|
|
|
import type { LangParams, PageArgs } from "@/types/params"
|
|
|
|
enum StepEnum {
|
|
selectBed = "select-bed",
|
|
breakfast = "breakfast",
|
|
details = "details",
|
|
payment = "payment",
|
|
}
|
|
|
|
function isValidStep(step: string): step is StepEnum {
|
|
return Object.values(StepEnum).includes(step as StepEnum)
|
|
}
|
|
|
|
export default function StepPage({
|
|
params,
|
|
}: 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>
|
|
case StepEnum.details:
|
|
//return <div>Select DETAILS</div>
|
|
case StepEnum.payment:
|
|
//return <div>Select PAYMENT</div>
|
|
case StepEnum.selectBed:
|
|
// return <div>Select BED</div>
|
|
}
|
|
|
|
function onNav(step: StepEnum) {
|
|
setActiveStep(step)
|
|
if (typeof window !== "undefined") {
|
|
window.history.pushState({}, "", step)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<SectionAccordion
|
|
header="Select bed"
|
|
isCompleted={true}
|
|
isOpen={activeStep === StepEnum.selectBed}
|
|
label={intl.formatMessage({ id: "Request bedtype" })}
|
|
path="/select-bed"
|
|
>
|
|
<BedType />
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Food options"
|
|
isCompleted={true}
|
|
isOpen={activeStep === StepEnum.breakfast}
|
|
label={intl.formatMessage({ id: "Select breakfast options" })}
|
|
path="/breakfast"
|
|
>
|
|
<Breakfast />
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Details"
|
|
isCompleted={false}
|
|
isOpen={activeStep === StepEnum.details}
|
|
label={intl.formatMessage({ id: "Enter your details" })}
|
|
path="/details"
|
|
>
|
|
<Details user={null} />
|
|
</SectionAccordion>
|
|
<SectionAccordion
|
|
header="Payment"
|
|
isCompleted={false}
|
|
isOpen={activeStep === StepEnum.payment}
|
|
label={intl.formatMessage({ id: "Select payment method" })}
|
|
path="/hotelreservation/select-bed"
|
|
>
|
|
<Payment hotel={hotel.data.attributes} />
|
|
</SectionAccordion>
|
|
</section>
|
|
)
|
|
}
|