diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ce6495820..565d256dbd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2019-XX-XX +- [add] Separate date ranges when fetching availability exceptions and bookings on availability + calendar. After this change, providers can block dates 365 days in advance instead of just 180 + days. [#997](https://github.com/sharetribe/flex-template-web/pull/997) - [fix] Fixed a small typo. [#995](https://github.com/sharetribe/flex-template-web/pull/995) ## [v2.7.0] 2019-01-08 diff --git a/src/forms/EditListingAvailabilityForm/ManageAvailabilityCalendar.js b/src/forms/EditListingAvailabilityForm/ManageAvailabilityCalendar.js index f07ac16563..22c62988ab 100644 --- a/src/forms/EditListingAvailabilityForm/ManageAvailabilityCalendar.js +++ b/src/forms/EditListingAvailabilityForm/ManageAvailabilityCalendar.js @@ -24,11 +24,15 @@ import css from './ManageAvailabilityCalendar.css'; // Constants const HORIZONTAL_ORIENTATION = 'horizontal'; -const MAX_AVAILABILITY_EXCEPTIONS_RANGE = 180; +const MAX_AVAILABILITY_EXCEPTIONS_RANGE = 365; +const MAX_BOOKINGS_RANGE = 180; const TODAY_MOMENT = moment().startOf('day'); const END_OF_RANGE_MOMENT = TODAY_MOMENT.clone() .add(MAX_AVAILABILITY_EXCEPTIONS_RANGE - 1, 'days') .startOf('day'); +const END_OF_BOOKING_RANGE_MOMENT = TODAY_MOMENT.clone() + .add(MAX_BOOKINGS_RANGE - 1, 'days') + .startOf('day'); // Constants for calculating day width (aka table cell dimensions) const TABLE_BORDER = 2; @@ -100,14 +104,15 @@ const isDateOutsideRange = date => { }; const isOutsideRange = memoize(isDateOutsideRange); -const isMonthInRange = monthMoment => { - const isAfterThisMonth = monthMoment.isSameOrAfter(TODAY_MOMENT, 'month'); - const isBeforeEndOfRange = monthMoment.isSameOrBefore(END_OF_RANGE_MOMENT, 'month'); +const isMonthInRange = (monthMoment, startOfRange, endOfRange) => { + const isAfterThisMonth = monthMoment.isSameOrAfter(startOfRange, 'month'); + const isBeforeEndOfRange = monthMoment.isSameOrBefore(endOfRange, 'month'); return isAfterThisMonth && isBeforeEndOfRange; }; const isPast = date => !isInclusivelyAfterDay(date, TODAY_MOMENT); const isAfterEndOfRange = date => !isInclusivelyBeforeDay(date, END_OF_RANGE_MOMENT); +const isAfterEndOfBookingRange = date => !isInclusivelyBeforeDay(date, END_OF_BOOKING_RANGE_MOMENT); const isBooked = (bookings, day) => { return !!bookings.find(b => { @@ -226,7 +231,7 @@ class ManageAvailabilityCalendar extends Component { const { availability, listingId } = this.props; // Don't fetch exceptions for past months or too far in the future - if (isMonthInRange(monthMoment)) { + if (isMonthInRange(monthMoment, TODAY_MOMENT, END_OF_RANGE_MOMENT)) { // Use "today", if the first day of given month is in the past const startMoment = isPast(monthMoment) ? TODAY_MOMENT : monthMoment; const start = momentToUTCDate(startMoment); @@ -241,9 +246,17 @@ class ManageAvailabilityCalendar extends Component { // Fetch AvailabilityExceptions for this month availability.onFetchAvailabilityExceptions({ listingId, start, end }); - // Fetch Bookings for this month (if they are in pending or accepted state) - const state = ['pending', 'accepted'].join(','); - availability.onFetchBookings({ listingId, start, end, state }); + // Fetch Bookings if the month is within bookable range (180 days) + if (isMonthInRange(startMoment, TODAY_MOMENT, END_OF_BOOKING_RANGE_MOMENT)) { + const endMomentForBookings = isAfterEndOfBookingRange(nextMonthMoment) + ? END_OF_BOOKING_RANGE_MOMENT.clone().add(1, 'days') + : nextMonthMoment; + const endForBookings = momentToUTCDate(endMomentForBookings); + + // Fetch Bookings for this month (if they are in pending or accepted state) + const state = ['pending', 'accepted'].join(','); + availability.onFetchBookings({ listingId, start, end: endForBookings, state }); + } } } @@ -374,7 +387,7 @@ class ManageAvailabilityCalendar extends Component { fetchBookingsError, } = currentMonthData || {}; const isMonthDataFetched = - !isMonthInRange(currentMonth) || + !isMonthInRange(currentMonth, TODAY_MOMENT, END_OF_RANGE_MOMENT) || (!!currentMonthData && !fetchExceptionsInProgress && !fetchBookingsInProgress); const monthName = currentMonth.format('MMMM');