fix: make sure session storage is cleaner whenever user is no longer in the booking flow

app/[lang]/(live)/layout.tsx

@@ -9,6 +9,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import TokenRefresher from "@/components/Auth/TokenRefresher"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
 import VwoScript from "@/components/Current/VwoScript"
+import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -64,6 +65,7 @@ export default async function RootLayout({
             {footer}
             <ToastHandler />
             <TokenRefresher />
+            <StorageCleaner />
           </TrpcProvider>
         </ServerIntlProvider>
       </body>

components/HotelReservation/EnterDetails/StorageCleaner.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import { hotelreservation } from "@/constants/routes/hotelReservation"
+import { detailsStorageName } from "@/stores/details"
+
+import useLang from "@/hooks/useLang"
+
+/**
+ * Cleanup component to make sure no stale data is left
+ * from previous booking when user is not in the booking
+ * flow anymore
+ */
+export default function StorageCleaner() {
+  const lang = useLang()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!pathname.startsWith(hotelreservation(lang))) {
+      sessionStorage.removeItem(detailsStorageName)
+    }
+  }, [lang, pathname])
+
+  return null
+}

constants/routes/hotelReservation.js

@@ -5,7 +5,7 @@
 /**
  * @param {Lang} lang
  */
-function base(lang) {
+export function hotelreservation(lang) {
   return `/${lang}/hotelreservation`
 }
 
@@ -13,47 +13,47 @@ function base(lang) {
  * @param {Lang} lang
  */
 export function bookingConfirmation(lang) {
-  return `${base(lang)}/booking-confirmation`
+  return `${hotelreservation(lang)}/booking-confirmation`
 }
 
 /**
  * @param {Lang} lang
  */
 export function details(lang) {
-  return `${base(lang)}/details`
+  return `${hotelreservation(lang)}/details`
 }
 
 /**
  * @param {Lang} lang
  */
 export function payment(lang) {
-  return `${base(lang)}/payment`
+  return `${hotelreservation(lang)}/payment`
 }
 
 /**
  * @param {Lang} lang
  */
 export function selectBed(lang) {
-  return `${base(lang)}/select-bed`
+  return `${hotelreservation(lang)}/select-bed`
 }
 
 /**
  * @param {Lang} lang
  */
 export function selectHotel(lang) {
-  return `${base(lang)}/select-hotel`
+  return `${hotelreservation(lang)}/select-hotel`
 }
 
 /**
  * @param {Lang} lang
  */
 export function selectHotelMap(lang) {
-  return `${base(lang)}/select-hotel/map`
+  return `${hotelreservation(lang)}/select-hotel/map`
 }
 
 /**
  * @param {Lang} lang
  */
 export function selectRate(lang) {
-  return `${base(lang)}/select-rate`
+  return `${hotelreservation(lang)}/select-rate`
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

stores/details.ts

@@ -101,13 +101,6 @@ export function createDetailsStore(
               })
             )
           },
-          updateValidity(property, isValid) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isValid[property] = isValid
-              })
-            )
-          },
         },
 
         data: merge(

types/stores/details.ts

@@ -12,7 +12,6 @@ export interface DetailsState {
     updateBedType: (data: BedTypeSchema) => void
     updateBreakfast: (data: BreakfastPackage | false) => void
     updateDetails: (data: DetailsSchema) => void
-    updateValidity: (property: StepEnum, isValid: boolean) => void
   }
   data: DetailsSchema & {
     bedType: BedTypeSchema | undefined