feat: refactor of my stay

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

@@ -15,6 +15,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
+import { locales } from "../locales"
+
 import styles from "./desktop.module.css"
 import classNames from "react-day-picker/style.module.css"
 
@@ -23,7 +25,6 @@ import type { DatePickerRangeProps } from "@/types/components/datepicker"
 export default function DatePickerRangeDesktop({
   close,
   handleOnSelect,
-  locales,
   selectedRange,
 }: DatePickerRangeProps) {
   const lang = useLang()

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

@@ -12,6 +12,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
+import { locales } from "../locales"
+
 import styles from "./mobile.module.css"
 import classNames from "react-day-picker/style.module.css"
 
@@ -20,7 +22,6 @@ import type { DatePickerRangeProps } from "@/types/components/datepicker"
 export default function DatePickerRangeMobile({
   close,
   handleOnSelect,
-  locales,
   selectedRange,
 }: DatePickerRangeProps) {
   const lang = useLang()

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

@@ -15,6 +15,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
+import { locales } from "../locales"
+
 import styles from "./desktop.module.css"
 import classNames from "react-day-picker/style.module.css"
 
@@ -23,7 +25,6 @@ import type { DatePickerSingleProps } from "@/types/components/datepicker"
 export default function DatePickerSingleDesktop({
   close,
   handleOnSelect,
-  locales,
   selectedDate,
   startMonth,
 }: DatePickerSingleProps) {

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

@@ -10,6 +10,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
+import { locales } from "../locales"
+
 import styles from "./mobile.module.css"
 import classNames from "react-day-picker/style.module.css"
 
@@ -18,7 +20,6 @@ import type { DatePickerSingleProps } from "@/types/components/datepicker"
 export default function DatePickerSingleMobile({
   close,
   handleOnSelect,
-  locales,
   selectedDate,
   hideHeader,
 }: DatePickerSingleProps) {

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

@@ -1,11 +1,8 @@
 "use client"
-
-import { da, de, fi, nb, sv } from "date-fns/locale"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -20,14 +17,6 @@ import type { DateRange } from "react-day-picker"
 
 import type { DatePickerFormProps } from "@/types/components/datepicker"
 
-const locales = {
-  [Lang.da]: da,
-  [Lang.de]: de,
-  [Lang.fi]: fi,
-  [Lang.no]: nb,
-  [Lang.sv]: sv,
-}
-
 export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const lang = useLang()
   const intl = useIntl()
@@ -163,7 +152,6 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         <DatePickerRangeDesktop
           close={close}
           handleOnSelect={handleSelectDate}
-          locales={locales}
           // DayPicker lib needs Daterange in form as below to show appropriate UI
           selectedRange={{
             from: dt(selectedDate.fromDate).toDate(),
@@ -175,7 +163,6 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
         <DatePickerRangeMobile
           close={close}
           handleOnSelect={handleSelectDate}
-          locales={locales}
           // DayPicker lib needs Daterange in form as below to show appropriate UI
           selectedRange={{
             from: dt(selectedDate.fromDate).toDate(),

apps/scandic-web/components/DatePicker/locales.ts

@@ -0,0 +1,11 @@
+import { da, de, fi, nb, sv } from "date-fns/locale"
+
+import { Lang } from "@/constants/languages"
+
+export const locales = {
+  [Lang.da]: da,
+  [Lang.de]: de,
+  [Lang.fi]: fi,
+  [Lang.no]: nb,
+  [Lang.sv]: sv,
+}