WiP: add BookingTimeForm to ListingPage

sharetribe · Oct 4, 2019 · c1bfacf · c1bfacf
1 parent cf3318b
commit c1bfacf
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
@@ -10,7 +10,7 @@ import { formatMoney } from '../../util/currency';
 import { parse, stringify } from '../../util/urlHelpers';
 import config from '../../config';
 import { ModalInMobile, Button } from '../../components';
-import { BookingDatesForm } from '../../forms';
+import { BookingTimeForm } from '../../forms';
 
 import css from './BookingPanel.css';
 
@@ -68,9 +68,11 @@ const BookingPanel = props => {
   } = props;
 
   const price = listing.attributes.price;
+  const timeZone =
+    listing.attributes.availabilityPlan && listing.attributes.availabilityPlan.timezone;
   const hasListingState = !!listing.attributes.state;
   const isClosed = hasListingState && listing.attributes.state === LISTING_STATE_CLOSED;
-  const showBookingDatesForm = hasListingState && !isClosed;
+  const showBookingTimeForm = hasListingState && !isClosed && timeSlots;
   const showClosedListingHelpText = listing.id && isClosed;
   const { formattedPrice, priceTitle } = priceData(price, intl);
   const isBook = !!parse(location.search).book;
@@ -97,7 +99,7 @@ const BookingPanel = props => {
     <div className={classes}>
       <ModalInMobile
         containerClassName={css.modalContainer}
-        id="BookingDatesFormInModal"
+        id="BookingTimeFormInModal"
         isModalOpenOnMobile={isBook}
         onClose={() => closeBookModal(history, location)}
         showAsModalMaxWidth={MODAL_BREAKPOINT}
@@ -114,17 +116,21 @@ const BookingPanel = props => {
           <h2 className={titleClasses}>{title}</h2>
           {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
-        {showBookingDatesForm ? (
-          <BookingDatesForm
+        {showBookingTimeForm ? (
+          <BookingTimeForm
             className={css.bookingForm}
             formId="BookingPanel"
-            submitButtonWrapperClassName={css.bookingDatesSubmitButtonWrapper}
+            submitButtonWrapperClassName={css.bookingTimeSubmitButtonWrapper}
             unitType={unitType}
             onSubmit={onSubmit}
             price={price}
             isOwnListing={isOwnListing}
             timeSlots={timeSlots}
             fetchTimeSlotsError={fetchTimeSlotsError}
+            initialValues={{ bookingStartDate: { date: new Date() } }}
+            startDatePlaceholder={new Date().toString()}
+            endDatePlaceholder={new Date().toString()}
+            timeZone={timeZone}
           />
         ) : null}
       </ModalInMobile>
@@ -138,7 +144,7 @@ const BookingPanel = props => {
           </div>
         </div>
 
-        {showBookingDatesForm ? (
+        {showBookingTimeForm ? (
           <Button
             rootClassName={css.bookButton}
             onClick={() => openBookModal(isOwnListing, isClosed, history, location)}

diff --git a/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js b/src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js
@@ -63,7 +63,21 @@ const EditListingAvailabilityPanel = props => {
           // I.e. this listing is available every night.
           // Exceptions are handled with live edit through a calendar,
           // which is visible on this panel.
-          onSubmit({ availabilityPlan });
+
+          const tempAvailabilityPlan = {
+            type: 'availability-plan/time',
+            timezone: 'America/New_York',
+            entries: [
+              { dayOfWeek: 'mon', seats: 3, startTime: '09:00', endTime: '17:00' },
+              { dayOfWeek: 'tue', seats: 3, startTime: '09:00', endTime: '17:00' },
+              { dayOfWeek: 'wed', seats: 3, startTime: '09:00', endTime: '11:00' },
+              { dayOfWeek: 'wed', seats: 1, startTime: '12:30', endTime: '16:30' },
+              { dayOfWeek: 'thu', seats: 3, startTime: '09:00', endTime: '17:00' },
+              { dayOfWeek: 'fri', seats: 3, startTime: '09:00', endTime: '17:00' },
+              { dayOfWeek: 'sat', seats: 8, startTime: '10:00', endTime: '15:00' },
+            ],
+          };
+          onSubmit({ availabilityPlan: tempAvailabilityPlan });
         }}
         onChange={onChange}
         saveActionMsg={submitButtonText}

diff --git a/src/containers/ListingPage/ListingPage.duck.js b/src/containers/ListingPage/ListingPage.duck.js
@@ -206,12 +206,10 @@ export const fetchTimeSlots = listingId => (dispatch, getState, sdk) => {
   const bookingRange = config.dayCountAvailableForBooking - 1;
   const timeSlotsRange = Math.min(bookingRange, maxTimeSlots);
 
-  const start = moment
-    .utc()
+  const start = moment()
     .startOf('day')
     .toDate();
   const end = moment()
-    .utc()
     .startOf('day')
     .add(timeSlotsRange, 'days')
     .toDate();

diff --git a/src/forms/BookingTimeForm/BookingTimeForm.js b/src/forms/BookingTimeForm/BookingTimeForm.js
@@ -70,8 +70,12 @@ export class BookingTimeFormComponent extends Component {
             values,
             timeSlots,
             fetchTimeSlotsError,
+            timeZone,
           } = fieldRenderProps;
 
+          console.log('Form values', values);
+          console.log('timeslots', timeSlots);
+
           const startTime = values && values.bookingStartTime ? values.bookingStartTime : null;
           const endTime = values && values.bookingEndTime ? values.bookingEndTime : null;
 
@@ -155,13 +159,10 @@ export class BookingTimeFormComponent extends Component {
             endTimeInputProps,
           };
 
-          // TODO: what is the correct time zone and how to get it?
-          const timeZone = 'Europe/Helsinki';
-
           return (
             <Form onSubmit={handleSubmit} className={classes}>
               {timeSlotsError}
-              {timeSlots ? (
+              {timeSlots && timeZone ? (
                 <FieldDateAndTimeInput
                   {...dateInputProps}
                   className={css.bookingDates}

diff --git a/src/forms/BookingTimeForm/FieldDateAndTimeInput.js b/src/forms/BookingTimeForm/FieldDateAndTimeInput.js
@@ -111,12 +111,16 @@ const getAllTimeValues = (
   const startTimes = selectedStartTime
     ? []
     : getAvailableStartTimes(intl, timeZone, startDate, getTimeSlots(timeSlots, startDate));
-  const startTime = selectedStartTime ? selectedStartTime : startTimes[0].timestamp;
+  const startTime = selectedStartTime
+    ? selectedStartTime
+    : startTimes[0]
+    ? startTimes[0].timestamp
+    : null;
   const startTimeAsDate = timestampToDate(startTime);
   const endDate = selectedEndDate ? selectedEndDate : findNextBoundary(timeZone, startTimeAsDate);
   const timeSlot = getCurrentTimeSlot(timeSlots, startTimeAsDate);
   const endTimes = getAvailableEndTimes(intl, timeZone, startTime, endDate, timeSlot);
-  const endTime = endTimes[0].timestamp;
+  const endTime = endTimes[0] ? endTimes[0].timestamp : null;
 
   return { startTime, endDate, endTime, timeSlot };
 };