Merged in feat/sw-1245-bw-button-update (pull request #2262)

Feat/sw 1245 - Booking widget - change button text when new values

* feat(sw-1245) - use isDirty to update button text

* Change text only in booking flow

* Revert test code


Approved-by: Michael Zetterberg

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,17 +1,20 @@
 "use client"
 
+import { usePathname } from "next/navigation"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
+import useLang from "@/hooks/useLang"
 
 import { RemoveExtraRooms } from "./BookingCode"
 import { Search, SearchSkeleton } from "./Search"
@@ -30,9 +33,13 @@ export default function FormContent({
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const {
-    formState: { errors },
+    formState: { errors, isDirty },
   } = useFormContext<BookingWidgetSchema>()
 
+  const lang = useLang()
+  const pathName = usePathname()
+  const isBookingFlow = pathName.includes(hotelreservation(lang))
+
   const selectedDate = useWatch<BookingWidgetSchema, "date">({ name: "date" })
 
   const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
@@ -121,9 +128,9 @@ export default function FormContent({
             className={styles.buttonText}
           >
             <span>
-              {intl.formatMessage({
-                defaultMessage: "Search",
-              })}
+              {isDirty && isBookingFlow
+                ? intl.formatMessage({ defaultMessage: "Update" })
+                : intl.formatMessage({ defaultMessage: "Search" })}
             </span>
           </Typography>
           <span className={styles.icon}>