Merged in feat(SW-1274)-modify-date-my-stay (pull request #1528)

Feat(SW-1274) modify date my stay * feat(SW-1676): Modify guest details step 1 * feat(SW-1676) Integration to api to update guest details * feat(SW-1676) Reuse of old modal * feat(SW-1676) updated modify guest * feat(SW-1676) cleanup * feat(SW-1274) modify stay modal and datepicker * feat(SW-1274) DatePicker from modify dates * feat(SW-1274) Modify dates fixes and merge conflicts * feat(SW-1274) handle modify for multiroom * feat(SW-1274) update manage stay * feat(SW-1274) fixed some comments * feat(SW-1274) use Modal instead * feat(SW-1274) fixed formatChildBedPreferences * feat(SW-1274) removed any as prop * feat(SW-1274) fix rebase conflicts * feat(SW-1274) fix flicker on modify modal * feat(SW-1274) CalendarButton * feat(SW-1274) fixed gap variable * feat(SW-1274) simplified code * feat(SW-1274) Split up DatePicker on mode * feat(SW-1274) Updated file structure for datepicker Approved-by: Arvid Norlin
2025-03-19 13:11:03 +00:00
parent b0aea68ee5
commit fb321cdb13
54 changed files with 1986 additions and 321 deletions
--- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import { useState } from "react"
+import { DayPicker } from "react-day-picker"
+import { useIntl } from "react-intl"
+
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+
+import { ChevronLeftIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+
+import styles from "./desktop.module.css"
+import classNames from "react-day-picker/style.module.css"
+
+import type { DatePickerSingleProps } from "@/types/components/datepicker"
+
+export default function DatePickerSingleDesktop({
+  close,
+  handleOnSelect,
+  locales,
+  selectedDate,
+  startMonth,
+}: DatePickerSingleProps) {
+  const lang = useLang()
+  const intl = useIntl()
+  const [month, setMonth] = useState(() => startMonth ?? new Date())
+
+  /** 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()
+
+  // Max future date allowed to book kept same as of existing prod.
+  const endDate = dt().add(395, "day").toDate()
+  const endOfLastMonth = dt(endDate).endOf("month").toDate()
+
+  function handleMonthChange(selected: Date) {
+    setMonth(selected)
+  }
+
+  return (
+    <DayPicker
+      classNames={{
+        ...classNames,
+        caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
+        day: `${classNames.day} ${styles.day}`,
+        day_button: `${classNames.day_button} ${styles.dayButton}`,
+        footer: styles.footer,
+        month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
+        months: `${classNames.months} ${styles.months}`,
+        range_end: styles.rangeEnd,
+        range_middle: styles.rangeMiddle,
+        range_start: styles.rangeStart,
+        root: `${classNames.root} ${styles.container}`,
+        week: styles.week,
+        weekday: `${classNames.weekday} ${styles.weekDay}`,
+        nav: `${classNames.nav} ${styles.nav}`,
+        button_next: `${classNames.button_next} ${styles.button_next}`,
+        button_previous: `${classNames.button_previous} ${styles.button_previous}`,
+      }}
+      disabled={[
+        { from: startOfMonth, to: yesterday },
+        { from: endDate, to: endOfLastMonth },
+      ]}
+      footer
+      formatters={{
+        formatWeekdayName(weekday) {
+          return dt(weekday).locale(lang).format("ddd")
+        },
+      }}
+      lang={lang}
+      locale={locale}
+      mode="single"
+      month={month}
+      numberOfMonths={2}
+      onDayClick={handleOnSelect}
+      onMonthChange={handleMonthChange}
+      required={false}
+      selected={selectedDate}
+      startMonth={currentDate}
+      endMonth={endDate}
+      weekStartsOn={1}
+      components={{
+        Chevron(props) {
+          return (
+            <ChevronLeftIcon
+              className={props.className}
+              height={20}
+              width={20}
+            />
+          )
+        },
+        Footer(props) {
+          return (
+            <>
+              <Divider className={styles.divider} color="primaryLightSubtle" />
+              <footer className={props.className}>
+                <Button
+                  intent="tertiary"
+                  onPress={close}
+                  size="small"
+                  theme="base"
+                >
+                  <Caption color="white" type="bold" asChild>
+                    <span>{intl.formatMessage({ id: "Select date" })}</span>
+                  </Caption>
+                </Button>
+              </footer>
+            </>
+          )
+        },
+        MonthCaption(props) {
+          return (
+            <div className={props.className}>
+              <Subtitle asChild type="two">
+                {props.children}
+              </Subtitle>
+            </div>
+          )
+        },
+      }}
+    />
+  )
+}