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

apps/scandic-web/components/DatePicker/Range/Desktop.tsx

@@ -17,14 +17,14 @@ import useLang from "@/hooks/useLang"
 import styles from "./desktop.module.css"
 import classNames from "react-day-picker/style.module.css"
 
-import type { DatePickerProps } from "@/types/components/datepicker"
+import type { DatePickerRangeProps } from "@/types/components/datepicker"
 
-export default function DatePickerDesktop({
+export default function DatePickerRangeDesktop({
   close,
   handleOnSelect,
   locales,
   selectedDate,
-}: DatePickerProps) {
+}: DatePickerRangeProps) {
   const lang = useLang()
   const intl = useIntl()
   const [month, setMonth] = useState(new Date())
@@ -58,6 +58,9 @@ export default function DatePickerDesktop({
         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 },
@@ -120,29 +123,6 @@ export default function DatePickerDesktop({
             </div>
           )
         },
-        Nav(props) {
-          if (Array.isArray(props.children)) {
-            const prevButton = props.children?.[0]
-            const nextButton = props.children?.[1]
-            return (
-              <>
-                {prevButton ? (
-                  <nav
-                    className={`${props.className} ${styles.previousButton}`}
-                  >
-                    {prevButton}
-                  </nav>
-                ) : null}
-                {nextButton ? (
-                  <nav className={`${props.className} ${styles.nextButton}`}>
-                    {nextButton}
-                  </nav>
-                ) : null}
-              </>
-            )
-          }
-          return <></>
-        },
       }}
     />
   )

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -14,14 +14,14 @@ import useLang from "@/hooks/useLang"
 import styles from "./mobile.module.css"
 import classNames from "react-day-picker/style.module.css"
 
-import type { DatePickerProps } from "@/types/components/datepicker"
+import type { DatePickerRangeProps } from "@/types/components/datepicker"
 
-export default function DatePickerMobile({
+export default function DatePickerRangeMobile({
   close,
   handleOnSelect,
   locales,
   selectedDate,
-}: DatePickerProps) {
+}: DatePickerRangeProps) {
   const lang = useLang()
   const intl = useIntl()
 

apps/scandic-web/components/DatePicker/Range/desktop.module.css

@@ -111,11 +111,18 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
   margin-top: var(--Spacing-x2);
 }
 
-.nextButton {
-  transform: rotate(180deg);
-  right: 0;
+.nav {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
-.previousButton {
-  left: 0;
+.nav .button_next {
+  transform: rotate(180deg);
+  margin-left: auto;
+}
+
+.nav .button_previous:disabled,
+.nav .button_next:disabled {
+  display: none;
 }

apps/scandic-web/components/DatePicker/Range/mobile.module.css

@@ -10,6 +10,11 @@
   position: relative;
 }
 
+.container.noHeader {
+  grid-template-areas: "content";
+  grid-template-rows: auto;
+}
+
 .root {
   display: grid;
   grid-area: content;
@@ -130,10 +135,6 @@ td.day[data-today="true"] {
   width: 40px;
 }
 
-td.day button.dayButton:hover {
-  background: var(--Base-Surface-Secondary-light-Hover);
-}
-
 td.day[data-outside="true"] button.dayButton {
   border: none;
 }

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>
+          )
+        },
+      }}
+    />
+  )
+}

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -0,0 +1,107 @@
+"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 { DatePickerSingleProps } from "@/types/components/datepicker"
+
+export default function DatePickerSingleMobile({
+  close,
+  handleOnSelect,
+  locales,
+  selectedDate,
+  hideHeader,
+}: DatePickerSingleProps) {
+  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} ${hideHeader ? styles.noHeader : ""}`}>
+      <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,
+          root: `${classNames.root} ${styles.root}`,
+          week: styles.week,
+          weekday: `${classNames.weekday} ${styles.weekDay}`,
+        }}
+        disabled={[
+          { from: startOfCurrentMonth, to: yesterday },
+          { from: endDate, to: endOfLastMonth },
+        ]}
+        endMonth={endDate}
+        formatters={{
+          formatWeekdayName(weekday) {
+            return dt(weekday).locale(lang).format("ddd")
+          },
+        }}
+        hideNavigation
+        lang={lang}
+        locale={locale}
+        mode="single"
+        /** 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>
+  )
+}

apps/scandic-web/components/DatePicker/Single/desktop.module.css

@@ -0,0 +1,127 @@
+@media screen and (max-width: 1366px) {
+  .container {
+    display: none;
+  }
+}
+
+div.months {
+  flex-wrap: nowrap;
+}
+
+.monthCaption {
+  justify-content: center;
+}
+
+.captionLabel {
+  text-transform: capitalize;
+}
+
+td.day,
+td.rangeEnd,
+td.rangeStart {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  text-decoration: var(--typography-Body-Bold-textDecoration);
+}
+
+td.rangeEnd,
+td.rangeStart {
+  background: var(--Base-Background-Primary-Normal);
+}
+
+td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
+  border-radius: 0 50% 50% 0;
+}
+
+td.rangeStart[aria-selected="true"] {
+  border-radius: 50% 0 0 50%;
+}
+
+td.rangeEnd[aria-selected="true"] button.dayButton:hover,
+td.rangeStart[aria-selected="true"] button.dayButton:hover {
+  background: var(--Primary-Light-On-Surface-Accent);
+  border-radius: 50%;
+}
+
+td.rangeEnd[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);
+}
+
+td.day,
+td.day[data-today="true"] {
+  color: var(--UI-Text-High-contrast);
+  height: 40px;
+  padding: var(--Spacing-x-half);
+  width: 40px;
+}
+
+td.day button.dayButton:hover {
+  background: var(--Base-Surface-Secondary-light-Hover);
+}
+
+td.day[data-outside="true"] button.dayButton {
+  border: none;
+}
+
+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"],
+td.day[data-disabled="true"] button.dayButton,
+td.day[data-outside="true"] ~ td.day[data-disabled="true"],
+td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
+.week:has(td.day[data-outside="true"] ~ td.day[data-disabled="true"])
+  td.day[data-outside="true"]
+  button.dayButton {
+  background: none;
+  color: var(--Base-Text-Disabled);
+  cursor: not-allowed;
+}
+
+.weekDay {
+  color: var(--UI-Text-Placeholder);
+  font-family: var(--typography-Footnote-Labels-fontFamily);
+  font-size: var(--typography-Footnote-Labels-fontSize);
+  font-weight: var(--typography-Footnote-Labels-fontWeight);
+  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
+  line-height: var(--typography-Footnote-Labels-lineHeight);
+  text-decoration: var(--typography-Footnote-Labels-textDecoration);
+  text-transform: uppercase;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--Spacing-x2);
+}
+
+.divider {
+  margin-top: var(--Spacing-x2);
+}
+
+.nav {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav .button_next {
+  transform: rotate(180deg);
+  margin-left: auto;
+}
+
+.nav .button_previous:disabled,
+.nav .button_next:disabled {
+  display: none;
+}

apps/scandic-web/components/DatePicker/Single/mobile.module.css

@@ -0,0 +1,176 @@
+.container {
+  --header-height: 72px;
+  --sticky-button-height: 120px;
+
+  display: grid;
+  grid-template-areas:
+    "header"
+    "content";
+  grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
+  position: relative;
+}
+
+.container.noHeader {
+  grid-template-areas: "content";
+  grid-template-rows: auto;
+}
+
+.root {
+  display: grid;
+  grid-area: content;
+}
+
+.header {
+  align-self: flex-end;
+  background-color: var(--Main-Grey-White);
+  grid-area: header;
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.select {
+  justify-self: center;
+  min-width: 100px;
+  transform: translateX(24px);
+}
+
+.close {
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-self: flex-end;
+}
+
+div.months {
+  display: grid;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+}
+
+.month {
+  display: grid;
+  justify-items: center;
+  scroll-snap-align: start;
+}
+
+.month:last-of-type {
+  padding-bottom: var(--sticky-button-height);
+}
+
+.monthCaption {
+  justify-content: center;
+}
+
+.captionLabel {
+  text-transform: capitalize;
+}
+
+.footer {
+  align-self: flex-start;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 7.5%,
+    #ffffff 82.5%
+  );
+  display: flex;
+  grid-area: content;
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+  position: sticky;
+  top: calc(100vh - var(--sticky-button-height));
+  width: 100%;
+  z-index: 10;
+}
+
+.footer .button {
+  width: 100%;
+}
+
+td.day,
+td.rangeEnd,
+td.rangeStart {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  text-decoration: var(--typography-Body-Bold-textDecoration);
+}
+
+td.rangeEnd,
+td.rangeStart {
+  background: var(--Base-Background-Primary-Normal);
+}
+
+td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) {
+  border-radius: 0 50% 50% 0;
+}
+
+td.rangeStart[aria-selected="true"] {
+  border-radius: 50% 0 0 50%;
+}
+
+td.rangeEnd[aria-selected="true"] button.dayButton:hover,
+td.rangeStart[aria-selected="true"] button.dayButton:hover {
+  background: var(--Primary-Light-On-Surface-Accent);
+  border-radius: 50%;
+}
+
+td.rangeEnd[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);
+}
+
+td.day,
+td.day[data-today="true"] {
+  color: var(--UI-Text-High-contrast);
+  height: 40px;
+  padding: var(--Spacing-x-half);
+  width: 40px;
+}
+
+td.day[data-outside="true"] button.dayButton {
+  border: none;
+}
+
+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"],
+td.day[data-disabled="true"] button.dayButton,
+td.day[data-outside="true"] ~ td.day[data-disabled="true"],
+td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
+.week:has(td.day[data-outside="true"] ~ td.day[data-disabled="true"])
+  td.day[data-outside="true"]
+  button.dayButton {
+  background: none;
+  color: var(--Base-Text-Disabled);
+  cursor: not-allowed;
+}
+
+.weekDay {
+  color: var(--UI-Text-Placeholder);
+  font-family: var(--typography-Caption-Labels-fontFamily);
+  font-size: var(--typography-Caption-Labels-fontSize);
+  font-weight: var(--typography-Caption-Labels-fontWeight);
+  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
+  line-height: var(--typography-Caption-Labels-lineHeight);
+  text-decoration: var(--typography-Caption-Labels-textDecoration);
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    display: none;
+  }
+}

apps/scandic-web/components/DatePicker/index.tsx

@@ -11,8 +11,8 @@ import { dt } from "@/lib/dt"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
-import DatePickerDesktop from "./Screen/Desktop"
-import DatePickerMobile from "./Screen/Mobile"
+import DatePickerRangeDesktop from "./Range/Desktop"
+import DatePickerRangeMobile from "./Range/Mobile"
 
 import styles from "./date-picker.module.css"
 
@@ -148,7 +148,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
       <input {...register("date.fromDate")} type="hidden" />
       <input {...register("date.toDate")} type="hidden" />
       <div aria-modal className={styles.hideWrapper} role="dialog">
-        <DatePickerDesktop
+        <DatePickerRangeDesktop
           close={close}
           handleOnSelect={handleSelectDate}
           locales={locales}
@@ -158,7 +158,7 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
             to: selectedDate.toDate,
           }}
         />
-        <DatePickerMobile
+        <DatePickerRangeMobile
           close={close}
           handleOnSelect={handleSelectDate}
           locales={locales}