From 1aeed2e9ca4d2eade5acfec66251ccf79d804155 Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 19 Nov 2024 14:25:55 +0100
Subject: [PATCH] fix: make sure session storage is cleaner whenever user is no
 longer in the booking flow

---
 app/[lang]/(live)/layout.tsx                  |  2 ++
 .../EnterDetails/StorageCleaner.tsx           | 26 +++++++++++++++++++
 constants/routes/hotelReservation.js          | 16 ++++++------
 next-env.d.ts                                 |  2 +-
 stores/details.ts                             |  7 -----
 types/stores/details.ts                       |  1 -
 6 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 components/HotelReservation/EnterDetails/StorageCleaner.tsx

diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index e1c63bbbc..037f2d714 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/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>
diff --git a/components/HotelReservation/EnterDetails/StorageCleaner.tsx b/components/HotelReservation/EnterDetails/StorageCleaner.tsx
new file mode 100644
index 000000000..96fdf3105
--- /dev/null
+++ b/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
+}
diff --git a/constants/routes/hotelReservation.js b/constants/routes/hotelReservation.js
index ed7ae99c5..dffc0acb2 100644
--- a/constants/routes/hotelReservation.js
+++ b/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`
 }
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..40c3d6809 100644
--- a/next-env.d.ts
+++ b/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.
diff --git a/stores/details.ts b/stores/details.ts
index 30bf1ed81..250262ade 100644
--- a/stores/details.ts
+++ b/stores/details.ts
@@ -101,13 +101,6 @@ export function createDetailsStore(
               })
             )
           },
-          updateValidity(property, isValid) {
-            return set(
-              produce((state: DetailsState) => {
-                state.isValid[property] = isValid
-              })
-            )
-          },
         },
 
         data: merge(
diff --git a/types/stores/details.ts b/types/stores/details.ts
index d10bb0d61..72b7f490b 100644
--- a/types/stores/details.ts
+++ b/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