willba-component-library 0.2.80 → 0.2.82

package/src/core/components/calendar/utils/handleCalendarModifiers.tsx

@@ -0,0 +1,147 @@
+import { addDays, endOfDay, isAfter, isBefore } from 'date-fns'
+import { DateRange, Matcher } from 'react-day-picker'
+
+import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
+
+type Props = {
+  newDisableCalendarDates?: DisableCalendarDates
+  calendarRange?: DateRange
+  disabledDatesByPage: {
+    from: Date
+    to: Date
+  }[]
+  disabledDates?: Matcher[]
+  lastPossibleCheckout?: Matcher
+  overlappingDate?: DateRange[]
+  rangeContext?: RangeContext
+  findFirstPossibleRangeContextCheckIn?: NonNullable<
+    DisableCalendarDates['availableDates']
+  >['0']
+  findLastPossibleRangeContextCheckOut?: NonNullable<
+    DisableCalendarDates['availableDates']
+  >['0']
+  firstPossibleRangeContextCheckIn: Matcher[]
+  lastPossibleRangeContextCheckOut: Matcher[]
+  currentSelectionLastCheckoutDate?: NonNullable<
+    DisableCalendarDates['availableDates']
+  >['0']
+}
+
+export const handleCalendarModifiers = ({
+  newDisableCalendarDates,
+  calendarRange,
+  disabledDatesByPage,
+  disabledDates,
+  overlappingDate,
+  rangeContext,
+  firstPossibleRangeContextCheckIn,
+  lastPossibleRangeContextCheckOut,
+  findFirstPossibleRangeContextCheckIn,
+  findLastPossibleRangeContextCheckOut,
+  currentSelectionLastCheckoutDate,
+  lastPossibleCheckout,
+}: Props) => {
+  // Parse data
+  const calendarRangeFrom = calendarRange?.from && endOfDay(calendarRange.from)
+  const calendarRangeTo = calendarRange?.to && endOfDay(calendarRange.to)
+  const rangeContextFrom = rangeContext?.from && endOfDay(rangeContext.from)
+  const rangeContextTo = rangeContext?.to && endOfDay(rangeContext.to)
+
+  const filteredOverlappingDates = overlappingDate
+    ? overlappingDate
+        .filter((date) => {
+          const dateFrom = date.from ? endOfDay(date.from) : null
+          const isBeforeRange =
+            dateFrom &&
+            findFirstPossibleRangeContextCheckIn?.checkIn &&
+            isBefore(dateFrom, findFirstPossibleRangeContextCheckIn?.checkIn)
+          const isAfterRange =
+            dateFrom &&
+            findLastPossibleRangeContextCheckOut?.lastCheckOut &&
+            isAfter(
+              dateFrom,
+              endOfDay(findLastPossibleRangeContextCheckOut?.lastCheckOut)
+            )
+
+          return !(isBeforeRange || isAfterRange)
+        })
+        .map((date) => ({ from: date.from }))
+    : []
+
+  return {
+    booked: disabledDatesByPage.length
+      ? disabledDatesByPage
+      : disabledDates?.length
+      ? [
+          lastPossibleCheckout || [],
+          ...disabledDates,
+          ...firstPossibleRangeContextCheckIn,
+          ...lastPossibleRangeContextCheckOut,
+        ]
+      : newDisableCalendarDates?.disabledDates?.length
+      ? [
+          lastPossibleCheckout || [],
+          ...newDisableCalendarDates?.disabledDates,
+          ...firstPossibleRangeContextCheckIn,
+          ...lastPossibleRangeContextCheckOut,
+        ]
+      : [],
+
+    disabledAfterCheckIn: calendarRangeFrom
+      ? [{ after: calendarRangeFrom }]
+      : [],
+
+    overlappingDate:
+      !calendarRangeFrom && !!filteredOverlappingDates.length
+        ? filteredOverlappingDates.map((date) => ({ from: date.from }))
+        : [],
+
+    noActiveSelectionStart: rangeContextFrom || [],
+
+    noActiveSelectionMid: [
+      rangeContextFrom && rangeContextTo
+        ? { after: rangeContextFrom, before: rangeContextTo }
+        : [],
+    ],
+
+    noActiveSelectionEnd: rangeContextTo || [],
+
+    checkoutOptionsMid: [
+      ...(calendarRangeFrom &&
+      !calendarRangeTo &&
+      currentSelectionLastCheckoutDate?.lastCheckOut
+        ? [
+            {
+              after: calendarRangeFrom,
+              before: addDays(currentSelectionLastCheckoutDate.lastCheckOut, 1),
+            },
+          ]
+        : []),
+    ],
+
+    checkInOnly: [
+      ...(findFirstPossibleRangeContextCheckIn?.checkIn &&
+      rangeContext &&
+      rangeContextFrom
+        ? [
+            {
+              from: findFirstPossibleRangeContextCheckIn.checkIn,
+              to: addDays(rangeContextFrom, -1),
+            },
+          ]
+        : []),
+    ],
+
+    checkOutOnly: [
+      ...(findLastPossibleRangeContextCheckOut?.checkIn &&
+      findLastPossibleRangeContextCheckOut.lastCheckOut
+        ? [
+            {
+              from: addDays(findLastPossibleRangeContextCheckOut.checkIn, 1),
+              to: findLastPossibleRangeContextCheckOut.lastCheckOut,
+            },
+          ]
+        : []),
+    ],
+  }
+}

package/src/core/components/calendar/utils/handleRangeContextDisabledDates.tsx

@@ -0,0 +1,75 @@
+import { DateRange, Matcher } from 'react-day-picker'
+import { isEqual, endOfDay } from 'date-fns'
+
+import { DisableCalendarDates, RangeContext } from '../CalendarTypes'
+
+type Props = {
+  rangeContext?: RangeContext
+  availableDates?: DisableCalendarDates['availableDates']
+  calendarRange?: DateRange
+}
+
+export const handleRangeContextDisabledDates = ({
+  rangeContext,
+  availableDates,
+  calendarRange,
+}: Props) => {
+  let findFirstPossibleRangeContextCheckIn:
+    | NonNullable<DisableCalendarDates['availableDates']>['0']
+    | undefined
+  let findLastPossibleRangeContextCheckOut:
+    | NonNullable<DisableCalendarDates['availableDates']>['0']
+    | undefined
+
+  let firstPossibleRangeContextCheckIn: Matcher[] = []
+  let lastPossibleRangeContextCheckOut: Matcher[] = []
+
+  // Parse data
+  const rangeContextFrom = rangeContext?.from && endOfDay(rangeContext.from)
+  const rangeContextTo = rangeContext?.to && endOfDay(rangeContext.to)
+  const calendarRangeFrom = calendarRange?.from && endOfDay(calendarRange.from)
+
+  if (rangeContext && availableDates?.length) {
+    // Find the first possible check-in after the last date gap till the range context
+
+    findFirstPossibleRangeContextCheckIn = availableDates?.find(
+      (date) =>
+        rangeContextFrom &&
+        endOfDay(date.checkIn) < rangeContextFrom &&
+        endOfDay(date.lastCheckOut) >= rangeContextFrom
+    )
+
+    if (findFirstPossibleRangeContextCheckIn?.checkIn) {
+      firstPossibleRangeContextCheckIn.push({
+        before: findFirstPossibleRangeContextCheckIn.checkIn,
+      })
+    }
+
+    // Find the last possible checkout before the first date gap till the range context
+    findLastPossibleRangeContextCheckOut = availableDates?.find(
+      (date) =>
+        rangeContextTo && isEqual(rangeContextTo, endOfDay(date.checkIn))
+    )
+
+    if (findLastPossibleRangeContextCheckOut?.checkIn) {
+      lastPossibleRangeContextCheckOut.push({
+        after: findLastPossibleRangeContextCheckOut.lastCheckOut,
+      })
+    }
+  }
+
+  // Get last possible check-out dates for current check-in
+  const currentSelectionLastCheckoutDate = availableDates?.find((date) => {
+    return calendarRangeFrom
+      ? isEqual(endOfDay(date.checkIn), calendarRangeFrom)
+      : false
+  })
+
+  return {
+    findFirstPossibleRangeContextCheckIn,
+    findLastPossibleRangeContextCheckOut,
+    firstPossibleRangeContextCheckIn,
+    lastPossibleRangeContextCheckOut,
+    currentSelectionLastCheckoutDate,
+  }
+}

package/src/core/components/calendar/utils/index.ts

@@ -0,0 +1,8 @@
+export { parseDates } from './parseDates'
+export { parseDate } from './parseDate'
+export { nightsCount } from './nightsCount'
+export { calendarSelectionRules } from './calendarSelectionRules'
+export { disabledDatesByPage } from './disabledDatesByPage'
+export { handleCalendarModifiers } from './handleCalendarModifiers'
+export { handleRangeContextDisabledDates } from './handleRangeContextDisabledDates'
+export { checkForContinuousSelection } from './checkForContinuousSelection'

package/src/locales/en/common.json

@@ -8,5 +8,11 @@
 "clearDates": "Clear dates",
 "noCheckIn": "Room not available",
 "noCheckOut": "Check-out not available",
-"checkOutOnly": "Check-out only"
+"checkOutOnly": "Check-out only",
+"checkInOnly": "Check-in only",
+"errors": {
+    "calendarErrors": {
+        "checkInAvailabilityError": "All room reservations in a single purchase must be for the same dates. If you need reservations for different dates, please make a separate purchase."
+    }
+}
 }

package/src/locales/en/filterBar.json

@@ -7,7 +7,8 @@
     "endDate": "End date",
     "title": "Calendar",
     "checkoutOnly": "Check-out only",
-    "hasDisableDates": "Contains unavailable dates"
+    "hasDisableDates": "Contains unavailable dates",
+    "minNights": "2 nights min"
   },
   "guests": {
     "label": "Number of guests",

package/src/locales/fi/common.json

@@ -8,6 +8,12 @@
 "clearDates": "Tyhjennä",
 "noCheckIn": "Huone ei saatavilla",
 "noCheckOut": "Uloskirjaus ei saatavilla",
-"checkOutOnly": "Vain uloskirjaus"
+"checkOutOnly": "Vain uloskirjaus",
+"checkInOnly": "Vain sisäänkirjaus",
+"errors": {
+    "calendarErrors": {
+        "checkInAvailabilityError": "Yhdellä ostolla tehdyt huonevaraukset tulee olla samalle ajankohdalle. Jos tarvitset huonevarauksia eri ajankohdille, ole hyvä ja tee uusi osto."
+    }
+}
 }
   

package/src/locales/fi/filterBar.json

@@ -7,7 +7,8 @@
     "endDate": "Loppu",
     "title": "Kalenteri",
     "checkoutOnly": "Check-out only",
-    "hasDisableDates": "Contains unavailable dates"
+    "hasDisableDates": "Contains unavailable dates",
+    "minNights": "2 nights min"
   },
   "guests": {
     "label": "Vierasmäärä",

package/src/themes/Default.css

@@ -15,21 +15,30 @@
   --will-primary: #374269;
   --will-secondary: #374269;
   --will-grey: #ABA7AF;
+  --will-light-grey: #C8C8C8;
   --will-white: #fff;
   --will-white-transparent: #ffffffcf;
   --will-black: #000;
   --will-onahau: #CDEEFF;
   --will-text: #5A5959;
   --will-charcoal-blue: #384265;
+  --will-error: #d32f2f;
+
+  /* Transparent */
+  --will-transparent-black: rgba(0, 0, 0, 0.5);
   --will-transparent-white: rgba(255, 255, 255, 0.30);
-  --will-transparent-black: rgba(171, 167, 175, 0.30);
+  --will-transparent-lavender: rgba(171, 167, 175, 0.30);
+
+  /* Color mix */
+  --will-primary-lighter: color-mix(in srgb, var(--will-primary), white 50%);
+  --will-primary-lightest: color-mix(in srgb, var(--will-primary), white 80%);
 
-  /* Confines */
+
+  /* Shadows */
   --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;
   --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;
 
   /* Breakpoints */
-
   --will-lg: 1140px;
   --will-md: 960px;
   --will-sm: 600px;

package/src/themes/useTheme.tsx

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react'
 export type Palette = {
   primary: string
   secondary: string
+  error: string
 }
 
 export type ThemeProps = {
@@ -12,12 +13,14 @@ export type ThemeProps = {
 export interface CustomPaletteTypes extends CSSProperties {
   '--will-primary'?: string
   '--will-secondary'?: string
+  '--will-error'?: string
 }
 
 export default function useTheme({ palette }: ThemeProps) {
   const themePalette: CustomPaletteTypes = {
     '--will-primary': palette?.primary,
     '--will-secondary': palette?.secondary,
+    '--will-error': palette?.error,
   }
 
   return themePalette

package/src/assets/SpinnerSvg.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-export const SpinnerSVG = ({
-  fill,
-  size,
-}: {
-  fill?: string
-  size?: number
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={`${size || 25}`}
-    height={`${size || 25}`}
-    viewBox="0 0 24 24"
-  >
-    <style>
-      {`
-  .spinner_z9k8 {
-  transform-origin: center;
-  animation: spinner_StKS .75s infinite linear;
-  }
-  @keyframes spinner_StKS {
-  100% {
-  transform: rotate(360deg);
-  }
-  }
-  `}
-    </style>
-    <path
-      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-      opacity=".25"
-      fill={fill}
-    />
-    <path
-      d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
-      className="spinner_z9k8"
-      fill={fill}
-    />
-  </svg>
-)

package/src/core/utils/index.ts

@@ -1,3 +0,0 @@
-export { parseDates } from './parseDates'
-export { parseDate } from './parseDate'
-export { nightsCount } from './nightsCount'