add confirmation to bookings page when user selects dates (#589)

client/src/components/composite/Booking/BookingCreation/BookingCreation.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { CreateBookingSection } from "./BookingCreation"
+import { MemoryRouter } from "react-router-dom"
 
 const meta: Meta<typeof CreateBookingSection> = {
   component: CreateBookingSection
@@ -9,5 +10,12 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const DefaultCreateBookingPage: Story = {
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    )
+  ],
   args: {}
 }

client/src/components/composite/Booking/BookingCreation/BookingCreation.tsx

@@ -6,7 +6,13 @@ import Button from "components/generic/FigmaButtons/FigmaButton"
 import { useEffect, useMemo, useState } from "react"
 
 import { BookingAvailability } from "models/Booking"
-import { NEXT_YEAR_FROM_TODAY, TODAY } from "utils/Constants"
+import {
+  CHECK_IN_TIME,
+  CHECK_OUT_TIME,
+  MS_IN_SECOND,
+  NEXT_YEAR_FROM_TODAY,
+  TODAY
+} from "utils/Constants"
 import { Timestamp } from "firebase/firestore"
 import Checkbox from "components/generic/Checkbox/Checkbox"
 import { DateRange, DateUtils } from "components/utils/DateUtils"
@@ -66,6 +72,36 @@ interface ICreateBookingSection {
 const NORMAL_PRICE = 40 as const
 const SPECIAL_PRICE = 60 as const
 
+/**
+ * A notification to the user informing the actual
+ * start and end dates that they will be staying, as opposed to
+ * displaying just the nights.
+ *
+ * Note that this should not change any booking logic
+ */
+const ActualBookingStayRange = ({
+  startDateTime,
+  endDateTime
+}: {
+  /**
+   * a time **string** to display
+   */
+  startDateTime: string
+  /**
+   * a time **string** to display
+   */
+  endDateTime: string
+}) => {
+  return (
+    <h5 className="uppercase">
+      The currently selected stay at the lodge will be from{" "}
+      <strong className="text-dark-blue-100">{startDateTime}</strong> (check in)
+      to <strong className="text-dark-blue-100">{endDateTime}</strong> (check
+      out)
+    </h5>
+  )
+}
+
 export const CreateBookingSection = ({
   bookingSlots = [],
   handleBookingCreation,
@@ -256,6 +292,12 @@ export const CreateBookingSection = ({
             }}
           />
 
+          <ActualBookingStayRange
+            startDateTime={`${DateUtils.formattedNzDate(currentStartDate)} ${CHECK_IN_TIME}`}
+            // Need to add one day to this because the checkout is the day after the last night
+            endDateTime={`${DateUtils.formattedNzDate(new Date(currentEndDate.getTime() + 24 * 60 * 60 * MS_IN_SECOND))} ${CHECK_OUT_TIME}`}
+          />
+
           <RequirementCheckBoxes
             onValidityChange={(newValid) => {
               setIsValidForCreation(newValid)

client/src/components/composite/Booking/BookingInfoComponent/BookingInfoComponent.tsx

@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom"
+import { CHECK_IN_TIME, CHECK_OUT_TIME } from "utils/Constants"
 
 interface IBookingInfoProps {
   /**
@@ -56,10 +57,10 @@ const BookingInfoComponent = ({
         </p>
         <p>Please read UASC policy below before booking.</p>
         <h4>
-          Check in time: <strong>3:00pm</strong>
+          Check in time: <strong>{CHECK_IN_TIME}</strong>
         </h4>
         <h4>
-          Check out time: <strong>10:00am</strong>
+          Check out time: <strong>{CHECK_OUT_TIME}</strong>
         </h4>
         <h4 className="text-red font-bold italic">
           You must have a booking to stay at the lodge!

client/src/utils/Constants.ts

@@ -16,4 +16,7 @@ let NEXT_YEAR_FROM_TODAY = new Date(
 )
 NEXT_YEAR_FROM_TODAY = new Date(NEXT_YEAR_FROM_TODAY.toDateString())
 
-export { TODAY, NEXT_YEAR_FROM_TODAY }
+const CHECK_OUT_TIME = "10:00am" as const
+const CHECK_IN_TIME = "3:00pm" as const
+
+export { TODAY, NEXT_YEAR_FROM_TODAY, CHECK_IN_TIME, CHECK_OUT_TIME }