feat: add initial datepicker, no ui/ux

components/DatePicker/DatePicker.tsx

@@ -0,0 +1,62 @@
+"use client"
+import { da, de, fi, nb, sv } from "date-fns/locale"
+import { useState } from "react"
+import { type DateRange, DayPicker } from "react-day-picker"
+
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+
+import useLang from "@/hooks/useLang"
+
+import classNames from "react-day-picker/style.module.css"
+
+const locales = {
+  [Lang.da]: da,
+  [Lang.de]: de,
+  [Lang.fi]: fi,
+  [Lang.no]: nb,
+  [Lang.sv]: sv,
+}
+
+export interface DatePickerProps {
+  handleOnSelect: (selected: DateRange) => void
+  initialSelected?: DateRange
+}
+
+export default function DatePicker({
+  handleOnSelect,
+  initialSelected = {
+    from: undefined,
+    to: undefined,
+  },
+}: DatePickerProps) {
+  const lang = useLang()
+  const [selectedDate, setSelectedDate] = useState<DateRange>(initialSelected)
+
+  function handleSelectDate(selected: DateRange) {
+    handleOnSelect(selected)
+    setSelectedDate(selected)
+  }
+
+  /** English is default language and doesn't need to be imported */
+  const locale = lang === Lang.en ? undefined : locales[lang]
+
+  const currentDate = dt().toDate()
+  const startOfMonth = dt(currentDate).set("date", 1).toDate()
+  const yesterday = dt(currentDate).subtract(1, "day").toDate()
+  return (
+    <DayPicker
+      classNames={classNames}
+      disabled={{ from: startOfMonth, to: yesterday }}
+      excludeDisabled
+      locale={locale}
+      mode="range"
+      onSelect={handleSelectDate}
+      pagedNavigation
+      required
+      selected={selectedDate}
+      showWeekNumber
+      startMonth={currentDate}
+    />
+  )
+}

components/DatePicker/date-picker.module.css

@@ -0,0 +1,31 @@
+.container {
+  overflow: hidden;
+  position: relative;
+
+  &[data-isopen="true"] {
+    overflow: visible;
+  }
+}
+
+.hideWrapper {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.08);
+  padding: var(--Spacing-x-one-and-half);
+  position: absolute;
+  /** BookingWidget padding + border-width */
+  top: calc(100% + var(--Spacing-x2) + 1px);
+}
+
+.btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+
+.body {
+  opacity: 0.8;
+}

components/DatePicker/index.tsx

@@ -0,0 +1,73 @@
+"use client"
+import { useEffect, useRef, useState } from "react"
+import { useFormContext, useWatch } from "react-hook-form"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import DatePicker from "./DatePicker"
+
+import styles from "./date-picker.module.css"
+
+import type { DateRange } from "react-day-picker"
+
+import type { DatePickerFormProps } from "@/types/components/datepicker"
+
+export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
+  const lang = useLang()
+  const [isOpen, setIsOpen] = useState(false)
+  const selectedDate = useWatch({ name })
+  const { register, setValue } = useFormContext()
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  function handleOnClick() {
+    setIsOpen((prevIsOpen) => !prevIsOpen)
+  }
+
+  function handleSelectDate(selected: DateRange) {
+    setValue(name, {
+      from: dt(selected.from).format("YYYY-MM-DD"),
+      to: dt(selected.to).format("YYYY-MM-DD"),
+    })
+  }
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (ref.current && target && !ref.current.contains(target)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside)
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside)
+    }
+  }, [setIsOpen])
+
+  const selectedFromDate = dt(selectedDate.from)
+    .locale(lang)
+    .format("ddd D MMM")
+  const selectedToDate = dt(selectedDate.to).locale(lang).format("ddd D MMM")
+
+  return (
+    <div className={styles.container} data-isopen={isOpen} ref={ref}>
+      <button className={styles.btn} onClick={handleOnClick} type="button">
+        <Body className={styles.body}>
+          {selectedFromDate} - {selectedToDate}
+        </Body>
+      </button>
+      <input {...register("date.from")} type="hidden" />
+      <input {...register("date.to")} type="hidden" />
+      <div aria-modal className={styles.hideWrapper} role="dialog">
+        <DatePicker
+          handleOnSelect={handleSelectDate}
+          initialSelected={selectedDate}
+        />
+      </div>
+    </div>
+  )
+}

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -42,4 +42,4 @@
 
 .option {
   display: flex;
-}
+}

components/Forms/BookingWidget/FormContent/index.tsx

@@ -1,6 +1,10 @@
 "use client"
+import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { dt } from "@/lib/dt"
+
+import DatePicker from "@/components/DatePicker"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Search from "./Search"
@@ -13,11 +17,15 @@ export default function FormContent({
   locations,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
-  const when = intl.formatMessage({ id: "When" })
+  const selectedDate = useWatch({ name: "date" })
+
   const rooms = intl.formatMessage({ id: "Rooms & Guests" })
   const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
   const bonus = intl.formatMessage({ id: "Use bonus cheque" })
   const reward = intl.formatMessage({ id: "Book reward night" })
+
+  const nights = dt(selectedDate.to).diff(dt(selectedDate.from), "days")
+
   return (
     <div className={styles.input}>
       <div className={styles.where}>
@@ -25,9 +33,12 @@ export default function FormContent({
       </div>
       <div className={styles.when}>
         <Caption color="red" textTransform="bold">
-          {when}
+          {nights}{" "}
+          {nights > 1
+            ? intl.formatMessage({ id: "nights" })
+            : intl.formatMessage({ id: "night" })}
         </Caption>
-        <input type="text" placeholder={when} />
+        <DatePicker />
       </div>
       <div className={styles.rooms}>
         <Caption color="red" textTransform="bold">

components/Forms/BookingWidget/index.tsx

@@ -37,11 +37,11 @@ export default function Form({ locations }: BookingWidgetFormProps) {
       location: sessionStorageSearchData
         ? encodeURIComponent(sessionStorageSearchData)
         : undefined,
-      nights: {
+      date: {
         // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
         // This is specifically to handle timezones falling in different dates.
-        fromDate: dt().utc().format("DD/MM/YYYY"),
-        toDate: dt().utc().add(1, "day").format("DD/MM/YYYY"),
+        from: dt().utc().format("YYYY-MM-DD"),
+        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
       },
       bookingCode: "",
       redemption: false,

components/Forms/BookingWidget/schema.ts

@@ -4,10 +4,9 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export const bookingWidgetSchema = z.object({
   search: z.string({ coerce: true }).min(1, "Required"),
-  nights: z.object({
-    // Update this as required once started working with Date picker in Nights component
-    fromDate: z.string(),
-    toDate: z.string(),
+  date: z.object({
+    from: z.string(),
+    to: z.string(),
   }),
   location: z.string().refine(
     (value) => {