Merge pull request #901 from sharetribe/max-time-slots

Availability improvements

CHANGELOG.md

@@ -12,12 +12,14 @@ way to update this template, but currently, we follow a pattern:
 
 ---
 ## Upcoming version 2018-08-XX
+* [fix] Drop date time from time slots request query params
+  [#901](https://github.com/sharetribe/flex-template-web/pull/901)
+* [fix] Make a second time slots request when required
+  [#901](https://github.com/sharetribe/flex-template-web/pull/901)
 * [add] Map component (used in ListingPage) using Mapbox instead of Google Maps
   [#896](https://github.com/sharetribe/flex-template-web/pull/896)
 * [add] Listing availability
   [#868](https://github.com/sharetribe/flex-template-web/pull/868), [#873](https://github.com/sharetribe/flex-template-web/pull/873), [#891](https://github.com/sharetribe/flex-template-web/pull/891) & [#892](https://github.com/sharetribe/flex-template-web/pull/892)
-
-
 * [add] Add support for user's current location as a default
   suggestion in the location autocomplete search.
   [#895](https://github.com/sharetribe/flex-template-web/pull/895)

src/config.js

@@ -42,7 +42,8 @@ const fetchAvailableTimeSlots = true;
 
 // A maximum number of days forwards during which a booking can be made.
 // This is limited due to Stripe holding funds up to 90 days from the
-// moment they are charged.
+// moment they are charged. Also note that available time slots can only
+// be fetched for 180 days in the future.
 const dayCountAvailableForBooking = 90;
 
 // To pass environment variables to the client app in the build

src/containers/ListingPage/ListingPage.duck.js

@@ -38,7 +38,7 @@ const initialState = {
   reviews: [],
   fetchReviewsError: null,
   timeSlots: null,
-  fetchTimesLotsError: null,
+  fetchTimeSlotsError: null,
   sendEnquiryInProgress: false,
   sendEnquiryError: null,
   enquiryModalOpenForListingId: null,
@@ -185,13 +185,56 @@ export const fetchReviews = listingId => (dispatch, getState, sdk) => {
     });
 };
 
-export const fetchTimeSlots = params => (dispatch, getState, sdk) => {
+const timeSlotsRequest = params => (dispatch, getState, sdk) => {
+  return sdk.timeslots.query(params).then(response => {
+    return denormalisedResponseEntities(response);
+  });
+};
+
+export const fetchTimeSlots = listingId => (dispatch, getState, sdk) => {
   dispatch(fetchTimeSlotsRequest);
-  return sdk.timeslots
-    .query(params)
-    .then(response => {
-      const timeSlots = denormalisedResponseEntities(response);
-      dispatch(fetchTimeSlotsSuccess(timeSlots));
+
+  // Time slots can be fetched for 90 days at a time,
+  // for at most 180 days from now. If max number of bookable
+  // day exceeds 90, a second request is made.
+
+  const maxTimeSlots = 90;
+  // booking range: today + bookable days -1
+  const bookingRange = config.dayCountAvailableForBooking - 1;
+  const timeSlotsRange = Math.min(bookingRange, maxTimeSlots);
+
+  const start = moment
+    .utc()
+    .startOf('day')
+    .toDate();
+  const end = moment()
+    .utc()
+    .startOf('day')
+    .add(timeSlotsRange, 'days')
+    .toDate();
+  const params = { listingId, start, end };
+
+  return dispatch(timeSlotsRequest(params))
+    .then(timeSlots => {
+      const secondRequest = bookingRange > maxTimeSlots;
+
+      if (secondRequest) {
+        const secondRange = Math.min(maxTimeSlots, bookingRange - maxTimeSlots);
+        const secondParams = {
+          listingId,
+          start: end,
+          end: moment(end)
+            .add(secondRange, 'days')
+            .toDate(),
+        };
+
+        return dispatch(timeSlotsRequest(secondParams)).then(secondBatch => {
+          const combined = timeSlots.concat(secondBatch);
+          dispatch(fetchTimeSlotsSuccess(combined));
+        });
+      } else {
+        dispatch(fetchTimeSlotsSuccess(timeSlots));
+      }
     })
     .catch(e => {
       dispatch(fetchTimeSlotsError(storableError(e)));
@@ -231,18 +274,9 @@ export const loadData = (params, search) => dispatch => {
   }
 
   if (config.fetchAvailableTimeSlots) {
-    // fetch time slots for 90 days starting today
-    // as the booking can only be done for 90 days
-    // in the future due to Stripe limitations
-    const start = moment().toDate();
-    const end = moment()
-      .add(config.dayCountAvailableForBooking, 'days')
-      .toDate();
-    const timeSlotsParams = { listingId, start, end };
-
     return Promise.all([
       dispatch(showListing(listingId)),
-      dispatch(fetchTimeSlots(timeSlotsParams)),
+      dispatch(fetchTimeSlots(listingId)),
       dispatch(fetchReviews(listingId)),
     ]);
   } else {

src/containers/ListingPage/ListingPage.js

@@ -198,6 +198,7 @@ export class ListingPageComponent extends Component {
       sendEnquiryInProgress,
       sendEnquiryError,
       timeSlots,
+      fetchTimeSlotsError,
       categoriesConfig,
       amenitiesConfig,
     } = this.props;
@@ -479,6 +480,7 @@ export class ListingPageComponent extends Component {
                   handleMobileBookModalClose={handleMobileBookModalClose}
                   onManageDisableScrolling={onManageDisableScrolling}
                   timeSlots={timeSlots}
+                  fetchTimeSlotsError={fetchTimeSlotsError}
                 />
               </div>
             </div>

src/containers/ListingPage/SectionBooking.js

@@ -25,8 +25,10 @@ const SectionBooking = props => {
     handleMobileBookModalClose,
     onManageDisableScrolling,
     timeSlots,
+    fetchTimeSlotsError,
   } = props;
   const showClosedListingHelpText = listing.id && isClosed;
+
   return (
     <div>
       <ModalInMobile
@@ -70,6 +72,7 @@ const SectionBooking = props => {
             price={price}
             isOwnListing={isOwnListing}
             timeSlots={timeSlots}
+            fetchTimeSlotsError={fetchTimeSlotsError}
           />
         ) : null}
       </ModalInMobile>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -264,6 +264,7 @@ exports[`ListingPage matches snapshot 1`] = `
           </div>
           <SectionBooking
             authorDisplayName="user-1 display name"
+            fetchTimeSlotsError={null}
             formattedPrice={55}
             handleBookButtonClick={[Function]}
             handleBookingSubmit={[Function]}

src/forms/BookingDatesForm/BookingDatesForm.css

@@ -47,6 +47,16 @@
   display: inline-block;
 }
 
+.timeSlotsError {
+  @apply --marketplaceH4FontStyles;
+  color: var(--failColor);
+  margin: 0 24px 12px 24px;
+
+  @media (--viewportMedium) {
+    margin: 0 0 12px 0;
+  }
+}
+
 .smallPrint {
   @apply --marketplaceTinyFontStyles;
   color: var(--matterColorAnti);

src/forms/BookingDatesForm/BookingDatesForm.js

@@ -86,6 +86,7 @@ export class BookingDatesFormComponent extends Component {
             unitType,
             values,
             timeSlots,
+            fetchTimeSlotsError,
           } = fieldRenderProps;
           const { startDate, endDate } = values && values.bookingDates ? values.bookingDates : {};
 
@@ -100,6 +101,11 @@ export class BookingDatesFormComponent extends Component {
           const endDateErrorMessage = intl.formatMessage({
             id: 'FieldDateRangeInput.invalidEndDate',
           });
+          const timeSlotsError = fetchTimeSlotsError ? (
+            <p className={css.timeSlotsError}>
+              <FormattedMessage id="BookingDatesForm.timeSlotsError" />
+            </p>
+          ) : null;
 
           // This is the place to collect breakdown estimation data. See the
           // EstimatedBreakdownMaybe component to change the calculations
@@ -148,6 +154,7 @@ export class BookingDatesFormComponent extends Component {
 
           return (
             <Form onSubmit={handleSubmit} className={classes}>
+              {timeSlotsError}
               <FieldDateRangeInput
                 className={css.bookingDates}
                 name="bookingDates"

src/translations/en.json

@@ -65,6 +65,7 @@
   "BookingDatesForm.priceBreakdownTitle": "Booking breakdown",
   "BookingDatesForm.requestToBook": "Request to book",
   "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
+  "BookingDatesForm.timeSlotsError": "Loading listing availability failed. Please refresh the page.",
   "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet",
   "CheckoutPage.bookingTimeNotAvailableMessage": "Unfortunately, the requested time is already booked.",
   "CheckoutPage.errorlistingLinkText": "the sauna page",