feat: add validation to enter details flow

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -16,8 +19,14 @@ import { bedTypeEnum } from "@/types/enums/bedType"
 
 export default function BedType() {
   const intl = useIntl()
+  const bedType = useEnterDetailsStore((state) => state.data.bedType)
 
   const methods = useForm<BedTypeSchema>({
+    defaultValues: bedType
+      ? {
+          bedType,
+        }
+      : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(bedTypeSchema),
@@ -28,15 +37,32 @@ export default function BedType() {
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BedTypeSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
 
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.KING}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {
@@ -52,7 +78,7 @@ export default function BedType() {
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.QUEEN}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {

components/HotelReservation/EnterDetails/BedType/schema.ts

@@ -3,5 +3,5 @@ import { z } from "zod"
 import { bedTypeEnum } from "@/types/enums/bedType"
 
 export const bedTypeSchema = z.object({
-  bed: z.nativeEnum(bedTypeEnum),
+  bedType: z.nativeEnum(bedTypeEnum),
 })

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -17,16 +20,36 @@ import { breakfastEnum } from "@/types/enums/breakfast"
 export default function Breakfast() {
   const intl = useIntl()
 
+  const breakfast = useEnterDetailsStore((state) => state.data.breakfast)
+
   const methods = useForm<BreakfastSchema>({
+    defaultValues: breakfast ? { breakfast } : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(breakfastSchema),
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BreakfastSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
+
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -1,8 +1,11 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import Button from "@/components/TempDesignSystem/Button"
 import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -19,6 +22,7 @@ import type {
   DetailsSchema,
 } from "@/types/components/enterDetails/details"
 
+const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
 
@@ -28,13 +32,21 @@ export default function Details({ user }: DetailsProps) {
     { title: intl.formatMessage({ id: "Join at no cost" }) },
   ]
 
+  const initialData = useEnterDetailsStore((state) => ({
+    countryCode: state.data.countryCode,
+    email: state.data.email,
+    firstname: state.data.firstname,
+    lastname: state.data.lastname,
+    phoneNumber: state.data.phoneNumber,
+  }))
+
   const methods = useForm<DetailsSchema>({
     defaultValues: {
-      countryCode: user?.address?.countryCode ?? "",
-      email: user?.email ?? "",
-      firstname: user?.firstName ?? "",
-      lastname: user?.lastName ?? "",
-      phoneNumber: user?.phoneNumber ?? "",
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+      email: user?.email ?? initialData.email,
+      firstname: user?.firstName ?? initialData.firstname,
+      lastname: user?.lastName ?? initialData.lastname,
+      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
     },
     criteriaMode: "all",
     mode: "all",
@@ -42,6 +54,15 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: DetailsSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
   return (
     <FormProvider {...methods}>
       <section className={styles.container}>
@@ -50,7 +71,11 @@ export default function Details({ user }: DetailsProps) {
             {intl.formatMessage({ id: "Guest information" })}
           </Body>
         </header>
-        <form className={styles.form}>
+        <form
+          className={styles.form}
+          id={formID}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
           <Input
             label={intl.formatMessage({ id: "Firstname" })}
             name="firstname"
@@ -106,9 +131,11 @@ export default function Details({ user }: DetailsProps) {
           )}
           <Button
             disabled={!methods.formState.isValid}
+            form={formID}
             intent="secondary"
             size="small"
             theme="base"
+            type="submit"
           >
             {intl.formatMessage({ id: "Proceed to payment method" })}
           </Button>

components/HotelReservation/EnterDetails/Provider/index.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { PropsWithChildren, useRef } from "react"
+
+import {
+  EnterDetailsContext,
+  type EnterDetailsStore,
+  initEditDetailsState,
+} from "@/stores/enter-details"
+
+import { StepEnum } from "@/types/components/enterDetails/step"
+
+export default function EnterDetailsProvider({
+  step,
+  children,
+}: PropsWithChildren<{ step: StepEnum }>) {
+  const initialStore = useRef<EnterDetailsStore>()
+  if (!initialStore.current) {
+    initialStore.current = initEditDetailsState(step)
+  }
+
+  return (
+    <EnterDetailsContext.Provider value={initialStore.current}>
+      {children}
+    </EnterDetailsContext.Provider>
+  )
+}

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -0,0 +1,114 @@
+"use client"
+import { useEffect, useRef, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./sectionAccordion.module.css"
+
+import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
+
+export default function SectionAccordion({
+  header,
+  label,
+  step,
+  children,
+}: React.PropsWithChildren<SectionAccordionProps>) {
+  const intl = useIntl()
+  const [isComplete, setIsComplete] = useState(false)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const isValid = useEnterDetailsStore((state) => state.isValid[step])
+
+  const navigate = useEnterDetailsStore((state) => state.navigate)
+
+  const contentRef = useRef<HTMLDivElement>(null)
+  const circleRef = useRef<HTMLDivElement>(null)
+
+  const isOpen = currentStep === step
+
+  useEffect(() => {
+    const content = contentRef.current
+    const circle = circleRef.current
+    if (content) {
+      if (isOpen) {
+        content.style.maxHeight = `${content.scrollHeight}px`
+      } else {
+        content.style.maxHeight = "0"
+      }
+    }
+
+    if (circle) {
+      if (isOpen) {
+        circle.style.backgroundColor = `var(--UI-Text-Placeholder);`
+      } else {
+        circle.style.backgroundColor = `var(--Base-Surface-Subtle-Hover);`
+      }
+    }
+  }, [isOpen])
+
+  useEffect(() => {
+    // We need to set the state on mount because of hydration errors
+    setIsComplete(isValid)
+  }, [isValid])
+
+  function onModify() {
+    navigate(step)
+  }
+
+  return (
+    <section className={styles.wrapper} data-open={isOpen}>
+      <div className={styles.iconWrapper}>
+        <div
+          className={styles.circle}
+          data-checked={isComplete}
+          ref={circleRef}
+        >
+          {isComplete ? (
+            <CheckIcon color="white" height="16" width="16" />
+          ) : null}
+        </div>
+      </div>
+      <div className={styles.main}>
+        <header className={styles.headerContainer}>
+          <div>
+            <Footnote
+              asChild
+              textTransform="uppercase"
+              color="uiTextPlaceholder"
+            >
+              <h2>{header}</h2>
+            </Footnote>
+            <Subtitle
+              type="two"
+              className={styles.selection}
+              color="uiTextHighContrast"
+            >
+              {label}
+            </Subtitle>
+          </div>
+          {isComplete && !isOpen && (
+            <Button
+              onClick={onModify}
+              theme="base"
+              size="small"
+              variant="icon"
+              intent="text"
+              wrapping
+            >
+              {intl.formatMessage({ id: "Modify" })}{" "}
+              <ChevronDownIcon color="burgundy" />
+            </Button>
+          )}
+        </header>
+        <div className={styles.content} ref={contentRef}>
+          {children}
+        </div>
+      </div>
+    </section>
+  )
+}

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -0,0 +1,81 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x3);
+
+  padding-top: var(--Spacing-x3);
+}
+
+.wrapper:not(:last-child)::after {
+  position: absolute;
+  left: 12px;
+  bottom: 0;
+  top: var(--Spacing-x5);
+  height: 100%;
+  content: "";
+  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.wrapper:last-child .main {
+  border-bottom: none;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  width: 100%;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  padding-bottom: var(--Spacing-x3);
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.selection {
+  font-weight: 450;
+  font-size: var(--typography-Title-4-fontSize);
+}
+
+.iconWrapper {
+  position: relative;
+  top: var(--Spacing-x1);
+  z-index: 2;
+}
+
+.circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 100px;
+  transition: background-color 0.4s;
+  border: 2px solid var(--Base-Border-Inverted);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.circle[data-checked="true"] {
+  background-color: var(--UI-Input-Controls-Fill-Selected);
+}
+
+.wrapper[data-open="true"] .circle[data-checked="false"] {
+  background-color: var(--UI-Text-Placeholder);
+}
+
+.wrapper[data-open="false"] .circle[data-checked="false"] {
+  background-color: var(--Base-Surface-Subtle-Hover);
+}
+
+.content {
+  overflow: hidden;
+  transition: max-height 0.4s ease-out;
+  max-height: 0;
+}
+
+.wrapper[data-open="true"] .content {
+  max-height: 1000px;
+}