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/Range/Mobile.tsx
+++ b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
@@ -0,0 +1,109 @@
+"use client"
+import { DayPicker } from "react-day-picker"
+import { useIntl } from "react-intl"
+
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+
+import { CloseLargeIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
+
+import styles from "./mobile.module.css"
+import classNames from "react-day-picker/style.module.css"
+
+import type { DatePickerRangeProps } from "@/types/components/datepicker"
+
+export default function DatePickerRangeMobile({
+  close,
+  handleOnSelect,
+  locales,
+  selectedDate,
+}: DatePickerRangeProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  /** English is default language and doesn't need to be imported */
+  const locale = lang === Lang.en ? undefined : locales[lang]
+  const currentDate = dt().toDate()
+  const startOfCurrentMonth = 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()
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <button className={styles.close} onClick={close} type="button">
+          <CloseLargeIcon />
+        </button>
+      </header>
+      <DayPicker
+        classNames={{
+          ...classNames,
+          caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
+          day: `${classNames.day} ${styles.day}`,
+          day_button: `${classNames.day_button} ${styles.dayButton}`,
+          month: styles.month,
+          month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
+          months: styles.months,
+          range_end: styles.rangeEnd,
+          range_middle: styles.rangeMiddle,
+          range_start: styles.rangeStart,
+          root: `${classNames.root} ${styles.root}`,
+          week: styles.week,
+          weekday: `${classNames.weekday} ${styles.weekDay}`,
+        }}
+        disabled={[
+          { from: startOfCurrentMonth, to: yesterday },
+          { from: endDate, to: endOfLastMonth },
+        ]}
+        endMonth={endDate}
+        excludeDisabled
+        formatters={{
+          formatWeekdayName(weekday) {
+            return dt(weekday).locale(lang).format("ddd")
+          },
+        }}
+        hideNavigation
+        lang={lang}
+        locale={locale}
+        mode="range"
+        /** Showing full year or what's left of it */
+        numberOfMonths={13}
+        onDayClick={handleOnSelect}
+        required
+        selected={selectedDate}
+        startMonth={currentDate}
+        weekStartsOn={1}
+        components={{
+          MonthCaption(props) {
+            return (
+              <div className={props.className}>
+                <Subtitle asChild type="two">
+                  {props.children}
+                </Subtitle>
+              </div>
+            )
+          },
+        }}
+      />
+      <footer className={styles.footer}>
+        <Button
+          className={styles.button}
+          intent="tertiary"
+          onPress={close}
+          size="large"
+          theme="base"
+        >
+          <Body color="white" textTransform="bold" asChild>
+            <span>{intl.formatMessage({ id: "Select dates" })}</span>
+          </Body>
+        </Button>
+      </footer>
+    </div>
+  )
+}