fix: add forms in accordions

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

@@ -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 StepEnum {
-
+  return Object.values(StepEnum).includes(step as StepEnum)
-function isValidStep(step: string): step is Step {
-  return Object.keys(StepEnum).includes(step)
 }
 
 export default function StepPage({
   params,
-}: PageArgs<LangParams & { step: Step }>) {
+}: PageArgs<LangParams & { step: StepEnum }>) {
-  const [activeStep, setActiveStep] = useState<Step>(params.step)
+  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}>
+            <BedType />
-              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
-              cskdfaen
-              <Button onClick={() => onNav("breakfast")}>
-                Go to breakfast!
-              </Button>
-            </div>
           </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}>
+            <Breakfast />
-              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
-              cskdfaen
-              <Button onClick={() => onNav("details")}>Go to details!</Button>
-            </div>
           </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}>
+            <Details user={null} />
-              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
-              cskdfaen
-              <Button onClick={() => onNav("payment")}>Go to payment!</Button>
-            </div>
           </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}>
+            <Payment hotel={hotel.data.attributes} />
-              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}>

components/HotelReservation/HotelSelectionHeader/index.tsx

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

components/HotelReservation/SelectRate/SectionAccordion/index.tsx

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

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

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

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -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,

i18n/dictionaries/da.json

@@ -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",

i18n/dictionaries/de.json

@@ -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",

i18n/dictionaries/en.json

@@ -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",

i18n/dictionaries/fi.json

@@ -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",

i18n/dictionaries/no.json

@@ -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",

i18n/dictionaries/sv.json

@@ -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",