fix: persist selection of bed and breakfast if same room

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -22,10 +22,7 @@ export default function BedType({ bedTypes }: BedTypeProps) {
   const initialBedType = useEnterDetailsStore(
     (state) => state.formValues?.bedType?.roomTypeCode
   )
-  const bedType = useEnterDetailsStore((state) => state.bedType?.roomTypeCode)
-  const completeStep = useEnterDetailsStore(
-    (state) => state.actions.completeStep
-  )
+
   const updateBedType = useEnterDetailsStore(
     (state) => state.actions.updateBedType
   )
@@ -81,9 +78,6 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               subtitle={width}
               title={roomType.description}
               value={roomType.value}
-              handleSelectedOnClick={
-                bedType === roomType.value ? completeStep : undefined
-              }
             />
           )
         })}

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -31,16 +31,7 @@ export default function Breakfast({ packages }: BreakfastProps) {
         ? "false"
         : undefined
   )
-  const breakfast = useEnterDetailsStore((state) =>
-    state.breakfast
-      ? state.breakfast.code
-      : state.breakfast === false
-        ? "false"
-        : undefined
-  )
-  const completeStep = useEnterDetailsStore(
-    (state) => state.actions.completeStep
-  )
+
   const updateBreakfast = useEnterDetailsStore(
     (state) => state.actions.updateBreakfast
   )
@@ -119,9 +110,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
               })}
               title={intl.formatMessage({ id: "Breakfast buffet" })}
               value={pkg.code}
-              handleSelectedOnClick={
-                breakfast === pkg.code ? completeStep : undefined
-              }
             />
           ))}
           <RadioCard
@@ -138,9 +126,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
             })}
             title={intl.formatMessage({ id: "No breakfast" })}
             value="false"
-            handleSelectedOnClick={
-              breakfast === "false" ? completeStep : undefined
-            }
           />
         </form>
       </div>

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -26,8 +26,7 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
-  const initialData = useEnterDetailsStore((state) => state.formValues.guest)
-  const join = useEnterDetailsStore((state) => state.guest.join)
+  const initialData = useEnterDetailsStore((state) => state.guest)
   const updateDetails = useEnterDetailsStore(
     (state) => state.actions.updateDetails
   )
@@ -42,7 +41,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
       dateOfBirth: initialData.dateOfBirth,
       email: user?.email ?? initialData.email,
       firstName: user?.firstName ?? initialData.firstName,
-      join,
+      join: initialData.join,
       lastName: user?.lastName ?? initialData.lastName,
       membershipNo: initialData.membershipNo,
       phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,

components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx

@@ -8,7 +8,7 @@ import { detailsStorageName } from "@/stores/enter-details"
 import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import type { DetailsState } from "@/types/stores/enter-details"
+import type { PersistedState } from "@/types/stores/enter-details"
 
 export default function PaymentCallback({
   returnUrl,
@@ -23,12 +23,9 @@ export default function PaymentCallback({
     const bookingData = window.sessionStorage.getItem(detailsStorageName)
 
     if (bookingData) {
-      const detailsStorage: Record<
-        "state",
-        Pick<DetailsState, "booking">
-      > = JSON.parse(bookingData)
+      const detailsStorage: PersistedState = JSON.parse(bookingData)
       const searchParams = createQueryParamsForEnterDetails(
-        detailsStorage.state.booking,
+        detailsStorage.booking,
         searchObject
       )
 

components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts

@@ -12,7 +12,6 @@ interface BaseCardProps
   title: React.ReactNode
   type: "checkbox" | "radio"
   value?: string
-  handleSelectedOnClick?: () => void
 }
 
 interface ListCardProps extends BaseCardProps {

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -24,21 +24,20 @@ export default function Card({
   title,
   type,
   value,
-  handleSelectedOnClick,
 }: CardProps) {
-  const { register } = useFormContext()
+  const { register, setValue } = useFormContext()
 
   function onLabelClick(event: React.MouseEvent) {
     // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
     event.preventDefault()
-    handleSelectedOnClick?.()
+    setValue(name, value)
   }
   return (
     <label
       className={styles.label}
       data-declined={declined}
+      onClick={onLabelClick}
       tabIndex={0}
-      onClick={handleSelectedOnClick ? onLabelClick : undefined}
     >
       <Caption className={styles.title} color="burgundy" type="label" uppercase>
         {title}