From 89d65cec38f3bdacbc3765bb314ade95432c69c9 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 11 Oct 2024 10:53:54 +0200
Subject: [PATCH 1/7] fix(sw-350): Search field label

---
 .../Forms/BookingWidget/FormContent/Search/index.tsx      | 4 +++-
 components/Forms/BookingWidget/FormContent/index.tsx      | 2 --
 components/Forms/BookingWidget/form.module.css            | 8 ++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index af5f7ce3d..6b8546e5b 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -138,7 +138,9 @@ export default function Search({ locations }: SearchProps) {
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
             <Caption color={isOpen ? "uiTextActive" : "red"}>
-              {intl.formatMessage({ id: "Where to" })}
+              {state.searchData?.type === "hotels"
+                ? state.searchData?.relationships?.city?.name
+                : intl.formatMessage({ id: "Where to" })}
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index c7f990c38..af9ba594d 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -20,7 +20,6 @@ import type { BookingWidgetFormContentProps } from "@/types/components/form/book
 export default function FormContent({
   locations,
   formId,
-  formState,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
@@ -60,7 +59,6 @@ export default function FormContent({
         <div className={styles.buttonContainer}>
           <Button
             className={styles.button}
-            disabled={!formState.isValid}
             form={formId}
             intent="primary"
             theme="base"
diff --git a/components/Forms/BookingWidget/form.module.css b/components/Forms/BookingWidget/form.module.css
index 22ef6be86..46c53e8b2 100644
--- a/components/Forms/BookingWidget/form.module.css
+++ b/components/Forms/BookingWidget/form.module.css
@@ -22,6 +22,7 @@
 @media screen and (min-width: 768px) {
   .section {
     display: flex;
+    width: 100%;
   }
 
   .default {
@@ -35,6 +36,13 @@
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
 
+  .section {
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
   .full {
     padding: var(--Spacing-x1) 0;
   }

From b3b26be83c6991e98f827d1e6ab2ab59324f339a Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Mon, 14 Oct 2024 12:04:05 +0200
Subject: [PATCH 2/7] fix(sw-350): fixed ui-comments for calendar, search and
 widget

---
 components/DatePicker/Screen/Desktop.tsx      |  5 +-
 components/DatePicker/Screen/Mobile.tsx       |  2 +-
 .../DatePicker/Screen/desktop.module.css      |  5 +-
 .../DatePicker/Screen/mobile.module.css       |  5 +-
 components/DatePicker/date-picker.module.css  |  5 ++
 components/DatePicker/index.tsx               | 47 +++++++++++++++----
 .../FormContent/Search/index.tsx              | 11 +----
 .../FormContent/Search/search.module.css      |  5 --
 .../FormContent/Voucher/index.tsx             |  8 ++--
 .../FormContent/Voucher/voucher.module.css    |  3 +-
 .../FormContent/formContent.module.css        |  9 +++-
 .../Forms/BookingWidget/FormContent/index.tsx |  6 ++-
 .../Form/Checkbox/checkbox.module.css         |  8 +++-
 .../TempDesignSystem/Form/Checkbox/index.tsx  |  5 +-
 .../components/checkbox/index.ts              |  0
 types/components/datepicker.ts                |  3 +-
 16 files changed, 80 insertions(+), 47 deletions(-)
 rename components/TempDesignSystem/Form/Checkbox/checkbox.ts => types/components/checkbox/index.ts (100%)

diff --git a/components/DatePicker/Screen/Desktop.tsx b/components/DatePicker/Screen/Desktop.tsx
index db290137e..e8eff756f 100644
--- a/components/DatePicker/Screen/Desktop.tsx
+++ b/components/DatePicker/Screen/Desktop.tsx
@@ -60,10 +60,9 @@ export default function DatePickerDesktop({
       lang={lang}
       locale={locale}
       mode="range"
-      numberOfMonths={2}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       pagedNavigation
-      required
+      required={false}
       selected={selectedDate}
       startMonth={currentDate}
       weekStartsOn={1}
diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx
index 3d367d995..a91176b93 100644
--- a/components/DatePicker/Screen/Mobile.tsx
+++ b/components/DatePicker/Screen/Mobile.tsx
@@ -78,7 +78,7 @@ export default function DatePickerMobile({
       mode="range"
       /** Showing full year or what's left of it */
       numberOfMonths={12}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       required
       selected={selectedDate}
       startMonth={startMonth}
diff --git a/components/DatePicker/Screen/desktop.module.css b/components/DatePicker/Screen/desktop.module.css
index afbb286a7..aa02537a5 100644
--- a/components/DatePicker/Screen/desktop.module.css
+++ b/components/DatePicker/Screen/desktop.module.css
@@ -47,8 +47,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -75,6 +75,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],
diff --git a/components/DatePicker/Screen/mobile.module.css b/components/DatePicker/Screen/mobile.module.css
index 4f820fd5f..ef3f97ca0 100644
--- a/components/DatePicker/Screen/mobile.module.css
+++ b/components/DatePicker/Screen/mobile.module.css
@@ -113,8 +113,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -141,6 +141,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],
diff --git a/components/DatePicker/date-picker.module.css b/components/DatePicker/date-picker.module.css
index b11ab3b77..b2e23cd41 100644
--- a/components/DatePicker/date-picker.module.css
+++ b/components/DatePicker/date-picker.module.css
@@ -22,6 +22,11 @@
 
 .hideWrapper {
   background-color: var(--Main-Grey-White);
+  display: none;
+}
+
+.container[data-isopen="true"] .hideWrapper {
+  display: block;
 }
 
 @media screen and (max-width: 1366px) {
diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index 586da5208..803f01e1b 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -14,8 +14,6 @@ import DatePickerMobile from "./Screen/Mobile"
 
 import styles from "./date-picker.module.css"
 
-import type { DateRange } from "react-day-picker"
-
 import type { DatePickerFormProps } from "@/types/components/datepicker"
 
 const locales = {
@@ -26,26 +24,54 @@ const locales = {
   [Lang.sv]: sv,
 }
 
-export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
+export default function DatePickerForm({
+  name = "date",
+  onToggleOpen,
+}: DatePickerFormProps) {
   const lang = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
   const { register, setValue } = useFormContext()
   const ref = useRef<HTMLDivElement | null>(null)
 
+  const [isSelectingFrom, setIsSelectingFrom] = useState(true)
+
   function close() {
     setIsOpen(false)
+    onToggleOpen && onToggleOpen(false)
   }
 
   function handleOnClick() {
-    setIsOpen((prevIsOpen) => !prevIsOpen)
+    setIsOpen((prevIsOpen) => {
+      const newState = !prevIsOpen
+      onToggleOpen && onToggleOpen(newState)
+      return newState
+    })
   }
 
-  function handleSelectDate(selected: DateRange) {
-    setValue(name, {
-      from: dt(selected.from).format("YYYY-MM-DD"),
-      to: dt(selected.to).format("YYYY-MM-DD"),
-    })
+  function handleSelectDate(selected: Date) {
+    if (isSelectingFrom) {
+      setValue(name, {
+        from: dt(selected).format("YYYY-MM-DD"),
+        to: undefined,
+      })
+      setIsSelectingFrom(false)
+    } else {
+      const fromDate = dt(selectedDate.from)
+      const toDate = dt(selected)
+      if (toDate.isAfter(fromDate)) {
+        setValue(name, {
+          from: selectedDate.from,
+          to: toDate.format("YYYY-MM-DD"),
+        })
+        setIsSelectingFrom(true)
+      } else {
+        setValue(name, {
+          from: selectedDate.from,
+          to: undefined,
+        })
+      }
+    }
   }
 
   useEffect(() => {
@@ -53,13 +79,14 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
         setIsOpen(false)
+        onToggleOpen && onToggleOpen(false)
       }
     }
     document.body.addEventListener("click", handleClickOutside)
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen])
+  }, [setIsOpen, onToggleOpen])
 
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 6b8546e5b..f7cdae62a 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -48,15 +48,6 @@ export default function Search({ locations }: SearchProps) {
     dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
   }
 
-  function handleOnBlur() {
-    if (!value && state.searchData?.name) {
-      setValue(name, state.searchData.name)
-      // Always need to manually trigger
-      // revalidation when setting value r-h-f
-      trigger()
-    }
-  }
-
   function handleOnChange(
     evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
   ) {
@@ -67,6 +58,7 @@ export default function Search({ locations }: SearchProps) {
         type: ActionType.SEARCH_LOCATIONS,
       })
     } else {
+      console.log("clear")
       dispatch({ type: ActionType.CLEAR_SEARCH_LOCATIONS })
     }
   }
@@ -156,7 +148,6 @@ export default function Search({ locations }: SearchProps) {
                 }),
                 ...register(name, {
                   onBlur: function () {
-                    handleOnBlur()
                     closeMenu()
                   },
                   onChange: handleOnChange,
diff --git a/components/Forms/BookingWidget/FormContent/Search/search.module.css b/components/Forms/BookingWidget/FormContent/Search/search.module.css
index d1acb79be..0b9ecfa8c 100644
--- a/components/Forms/BookingWidget/FormContent/Search/search.module.css
+++ b/components/Forms/BookingWidget/FormContent/Search/search.module.css
@@ -24,8 +24,3 @@
   p {
   color: var(--UI-Text-Active);
 }
-
-.container:hover:has(input:not(:active, :focus, :focus-within))
-  input::-webkit-search-cancel-button {
-  display: none;
-}
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index 0a9841a43..30eef6e21 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
@@ -50,17 +50,17 @@ export default function Voucher() {
       >
         <div className={styles.options}>
           <label className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{useVouchers}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{bonus}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
           <label className={styles.option}>
-            <input type="checkbox" disabled className={styles.checkbox} />
+            <Checkbox name="useReward" registerOptions={{ disabled: true }} />
             <Caption color="disabled">{reward}</Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
index 0deccbb43..694134cd8 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
+++ b/components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css
@@ -68,7 +68,7 @@
   .options {
     flex-direction: column;
     max-width: 190px;
-    gap: 0;
+    gap: var(--Spacing-x-half);
   }
   .vouchers:hover,
   .option:hover {
@@ -76,6 +76,7 @@
   }
   .optionsContainer {
     flex-direction: row;
+    align-items: center;
   }
   .checkboxVoucher {
     display: none;
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index a58bb1062..fde3b65c8 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -27,6 +27,7 @@
   .rooms,
   .vouchers,
   .when,
+  .whenOpen,
   .where {
     background-color: var(--Base-Background-Primary-Normal);
     border-radius: var(--Corner-radius-Medium);
@@ -34,7 +35,8 @@
 
   .rooms,
   .vouchers,
-  .when {
+  .when,
+  .whenOpen {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
@@ -61,6 +63,7 @@
 
   .rooms,
   .when,
+  .whenOpen,
   .where {
     width: 100%;
   }
@@ -71,12 +74,14 @@
   }
 
   .rooms,
-  .when {
+  .when,
+  .whenOpen {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
   .when:hover,
   .rooms:hover,
+  .whenOpen,
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index af9ba594d..c8173624d 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -22,6 +23,7 @@ export default function FormContent({
   formId,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const selectedDate = useWatch({ name: "date" })
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
@@ -35,14 +37,14 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={styles.when}>
+          <div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
                 { totalNights: nights }
               )}
             </Caption>
-            <DatePicker />
+            <DatePicker onToggleOpen={setIsDatePickerOpen} />
           </div>
           <div className={styles.rooms}>
             <label>
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
index 7f7c8f04f..0afc51797 100644
--- a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -9,6 +9,11 @@
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container[data-disabled] .checkbox {
+  border: 1px solid var(--UI-Input-Controls-Border-Disabled);
+  background: var(--UI-Input-Controls-Surface-Disabled);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: flex-start;
@@ -20,13 +25,12 @@
   width: 24px;
   height: 24px;
   min-width: 24px;
-  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
   border-radius: 4px;
   transition: all 200ms;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 200ms;
   forced-color-adjust: none;
 }
 
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
index cb4a68cde..ee3967d8d 100644
--- a/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -7,10 +7,10 @@ import { InfoCircleIcon } from "@/components/Icons"
 import CheckIcon from "@/components/Icons/Check"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { CheckboxProps } from "./checkbox"
-
 import styles from "./checkbox.module.css"
 
+import { CheckboxProps } from "@/types/components/checkbox"
+
 export default function Checkbox({
   name,
   children,
@@ -29,6 +29,7 @@ export default function Checkbox({
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
+      isDisabled={registerOptions?.disabled}
     >
       {({ isSelected }) => (
         <>
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.ts b/types/components/checkbox/index.ts
similarity index 100%
rename from components/TempDesignSystem/Form/Checkbox/checkbox.ts
rename to types/components/checkbox/index.ts
diff --git a/types/components/datepicker.ts b/types/components/datepicker.ts
index 1d30aa3ae..8310e1d3a 100644
--- a/types/components/datepicker.ts
+++ b/types/components/datepicker.ts
@@ -5,13 +5,14 @@ import type { DateRange } from "react-day-picker"
 
 export interface DatePickerFormProps {
   name?: string
+  onToggleOpen?: (isDatePickerOpen: boolean) => void
 }
 
 type LangWithoutEn = Lang.da | Lang.de | Lang.fi | Lang.no | Lang.sv
 
 export interface DatePickerProps {
   close: () => void
-  handleOnSelect: (selected: DateRange) => void
+  handleOnSelect: (selected: Date) => void
   locales: Record<LangWithoutEn, Locale>
   selectedDate: DateRange
 }

From 27058dedba377e5022972c9bbec7cca87c1fa499 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Mon, 14 Oct 2024 12:06:44 +0200
Subject: [PATCH 3/7] fix(sw-350): removed console log

---
 components/Forms/BookingWidget/FormContent/Search/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index f7cdae62a..12d5e740c 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -58,7 +58,6 @@ export default function Search({ locations }: SearchProps) {
         type: ActionType.SEARCH_LOCATIONS,
       })
     } else {
-      console.log("clear")
       dispatch({ type: ActionType.CLEAR_SEARCH_LOCATIONS })
     }
   }

From 3d637e8c3fcbff8716cdc9af3c59676ef60b0558 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 09:17:16 +0200
Subject: [PATCH 4/7] fix(sw-350): select dates backwards

---
 components/DatePicker/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index 803f01e1b..bd19f684f 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -67,8 +67,8 @@ export default function DatePickerForm({
         setIsSelectingFrom(true)
       } else {
         setValue(name, {
-          from: selectedDate.from,
-          to: undefined,
+          from: toDate.format("YYYY-MM-DD"),
+          to: selectedDate.from,
         })
       }
     }

From fcd226973cf733cde355dcb6403dc504bdcb34aa Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 09:19:16 +0200
Subject: [PATCH 5/7] fix(sw-350): changed to data-open

---
 .../BookingWidget/FormContent/formContent.module.css  | 11 ++++-------
 components/Forms/BookingWidget/FormContent/index.tsx  |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index fde3b65c8..7b3ce3e2b 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -27,7 +27,6 @@
   .rooms,
   .vouchers,
   .when,
-  .whenOpen,
   .where {
     background-color: var(--Base-Background-Primary-Normal);
     border-radius: var(--Corner-radius-Medium);
@@ -35,8 +34,7 @@
 
   .rooms,
   .vouchers,
-  .when,
-  .whenOpen {
+  .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   }
 
@@ -63,7 +61,6 @@
 
   .rooms,
   .when,
-  .whenOpen,
   .where {
     width: 100%;
   }
@@ -74,14 +71,14 @@
   }
 
   .rooms,
-  .when,
-  .whenOpen {
+  .when {
     padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
     border-radius: var(--Corner-radius-Small);
   }
+
   .when:hover,
   .rooms:hover,
-  .whenOpen,
+  .when[data-open="true"],
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index c8173624d..187013c0d 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -37,7 +37,7 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={isDatePickerOpen ? styles.whenOpen : styles.when}>
+          <div className={styles.when} data-open={isDatePickerOpen}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },

From cae11a80a7c947ab3e9a9cc63ac20b0b248265cd Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 09:34:52 +0200
Subject: [PATCH 6/7] fix(sw-350): cleanups and PR comment fixes

---
 components/DatePicker/Screen/Desktop.tsx      |  3 ++-
 components/DatePicker/Screen/Mobile.tsx       |  2 +-
 components/DatePicker/index.tsx               | 23 +++++++++++--------
 .../Forms/BookingWidget/FormContent/index.tsx |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/DatePicker/Screen/Desktop.tsx b/components/DatePicker/Screen/Desktop.tsx
index e8eff756f..192f8a036 100644
--- a/components/DatePicker/Screen/Desktop.tsx
+++ b/components/DatePicker/Screen/Desktop.tsx
@@ -60,7 +60,8 @@ export default function DatePickerDesktop({
       lang={lang}
       locale={locale}
       mode="range"
-      onDayClick={(day) => handleOnSelect(day)}
+      numberOfMonths={2}
+      onDayClick={handleOnSelect}
       pagedNavigation
       required={false}
       selected={selectedDate}
diff --git a/components/DatePicker/Screen/Mobile.tsx b/components/DatePicker/Screen/Mobile.tsx
index a91176b93..0407f9b63 100644
--- a/components/DatePicker/Screen/Mobile.tsx
+++ b/components/DatePicker/Screen/Mobile.tsx
@@ -78,7 +78,7 @@ export default function DatePickerMobile({
       mode="range"
       /** Showing full year or what's left of it */
       numberOfMonths={12}
-      onDayClick={(day) => handleOnSelect(day)}
+      onDayClick={handleOnSelect}
       required
       selected={selectedDate}
       startMonth={startMonth}
diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index bd19f684f..818b7fb71 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -38,15 +38,16 @@ export default function DatePickerForm({
 
   function close() {
     setIsOpen(false)
-    onToggleOpen && onToggleOpen(false)
+    if (onToggleOpen) {
+      onToggleOpen(false)
+    }
   }
 
   function handleOnClick() {
-    setIsOpen((prevIsOpen) => {
-      const newState = !prevIsOpen
-      onToggleOpen && onToggleOpen(newState)
-      return newState
-    })
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+    if (onToggleOpen) {
+      onToggleOpen(!isOpen)
+    }
   }
 
   function handleSelectDate(selected: Date) {
@@ -64,13 +65,13 @@ export default function DatePickerForm({
           from: selectedDate.from,
           to: toDate.format("YYYY-MM-DD"),
         })
-        setIsSelectingFrom(true)
       } else {
         setValue(name, {
           from: toDate.format("YYYY-MM-DD"),
           to: selectedDate.from,
         })
       }
+      setIsSelectingFrom(true)
     }
   }
 
@@ -79,7 +80,9 @@ export default function DatePickerForm({
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
         setIsOpen(false)
-        onToggleOpen && onToggleOpen(false)
+        if (onToggleOpen) {
+          onToggleOpen(false)
+        }
       }
     }
     document.body.addEventListener("click", handleClickOutside)
@@ -91,7 +94,9 @@ export default function DatePickerForm({
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)
     .format("ddd D MMM")
-  const selectedToDate = dt(selectedDate.to).locale(lang).format("ddd D MMM")
+  const selectedToDate = !!selectedDate.to
+    ? dt(selectedDate.to).locale(lang).format("ddd D MMM")
+    : ""
 
   return (
     <div className={styles.container} data-isopen={isOpen} ref={ref}>
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 187013c0d..1175ae012 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -41,7 +41,7 @@ export default function FormContent({
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
-                { totalNights: nights }
+                { totalNights: nights > 0 ? nights : 0 }
               )}
             </Caption>
             <DatePicker onToggleOpen={setIsDatePickerOpen} />

From 4089d8d8d6ae753cb2df12ff4631be397c87bbb1 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 11:54:56 +0200
Subject: [PATCH 7/7] fix(sw-350): reverted unnecessary state

---
 components/DatePicker/index.tsx                  | 16 ++--------------
 .../FormContent/formContent.module.css           |  2 +-
 .../Forms/BookingWidget/FormContent/index.tsx    |  5 ++---
 types/components/datepicker.ts                   |  1 -
 4 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index 818b7fb71..503c0c6ac 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -24,10 +24,7 @@ const locales = {
   [Lang.sv]: sv,
 }
 
-export default function DatePickerForm({
-  name = "date",
-  onToggleOpen,
-}: DatePickerFormProps) {
+export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const lang = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const selectedDate = useWatch({ name })
@@ -38,16 +35,10 @@ export default function DatePickerForm({
 
   function close() {
     setIsOpen(false)
-    if (onToggleOpen) {
-      onToggleOpen(false)
-    }
   }
 
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)
-    if (onToggleOpen) {
-      onToggleOpen(!isOpen)
-    }
   }
 
   function handleSelectDate(selected: Date) {
@@ -80,16 +71,13 @@ export default function DatePickerForm({
       const target = evt.target as HTMLElement
       if (ref.current && target && !ref.current.contains(target)) {
         setIsOpen(false)
-        if (onToggleOpen) {
-          onToggleOpen(false)
-        }
       }
     }
     document.body.addEventListener("click", handleClickOutside)
     return () => {
       document.body.removeEventListener("click", handleClickOutside)
     }
-  }, [setIsOpen, onToggleOpen])
+  }, [setIsOpen])
 
   const selectedFromDate = dt(selectedDate.from)
     .locale(lang)
diff --git a/components/Forms/BookingWidget/FormContent/formContent.module.css b/components/Forms/BookingWidget/FormContent/formContent.module.css
index 7b3ce3e2b..2012bfa7a 100644
--- a/components/Forms/BookingWidget/FormContent/formContent.module.css
+++ b/components/Forms/BookingWidget/FormContent/formContent.module.css
@@ -78,7 +78,7 @@
 
   .when:hover,
   .rooms:hover,
-  .when[data-open="true"],
+  .when:has([data-isopen="true"]),
   .rooms:has(.input:active, .input:focus, .input:focus-within) {
     background-color: var(--Base-Surface-Primary-light-Hover-alt);
   }
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 1175ae012..75e7be187 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -23,7 +23,6 @@ export default function FormContent({
   formId,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
-  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const selectedDate = useWatch({ name: "date" })
 
   const rooms = intl.formatMessage({ id: "Guests & Rooms" })
@@ -37,14 +36,14 @@ export default function FormContent({
           <div className={styles.where}>
             <Search locations={locations} />
           </div>
-          <div className={styles.when} data-open={isDatePickerOpen}>
+          <div className={styles.when}>
             <Caption color="red" textTransform="bold">
               {intl.formatMessage(
                 { id: "booking.nights" },
                 { totalNights: nights > 0 ? nights : 0 }
               )}
             </Caption>
-            <DatePicker onToggleOpen={setIsDatePickerOpen} />
+            <DatePicker />
           </div>
           <div className={styles.rooms}>
             <label>
diff --git a/types/components/datepicker.ts b/types/components/datepicker.ts
index 8310e1d3a..999a8ef1d 100644
--- a/types/components/datepicker.ts
+++ b/types/components/datepicker.ts
@@ -5,7 +5,6 @@ import type { DateRange } from "react-day-picker"
 
 export interface DatePickerFormProps {
   name?: string
-  onToggleOpen?: (isDatePickerOpen: boolean) => void
 }
 
 type LangWithoutEn = Lang.da | Lang.de | Lang.fi | Lang.no | Lang.sv