diff --git a/src/containers/ListingPage/ListingPage.duck.js b/src/containers/ListingPage/ListingPage.duck.js index 2e365f0920..1728586c3c 100644 --- a/src/containers/ListingPage/ListingPage.duck.js +++ b/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, diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 4d6eacc14f..9e11022c9b 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/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} /> diff --git a/src/containers/ListingPage/SectionBooking.js b/src/containers/ListingPage/SectionBooking.js index 08cb4a6f89..a649d4489a 100644 --- a/src/containers/ListingPage/SectionBooking.js +++ b/src/containers/ListingPage/SectionBooking.js @@ -25,8 +25,10 @@ const SectionBooking = props => { handleMobileBookModalClose, onManageDisableScrolling, timeSlots, + fetchTimeSlotsError, } = props; const showClosedListingHelpText = listing.id && isClosed; + return (
{ price={price} isOwnListing={isOwnListing} timeSlots={timeSlots} + fetchTimeSlotsError={fetchTimeSlotsError} /> ) : null} diff --git a/src/forms/BookingDatesForm/BookingDatesForm.css b/src/forms/BookingDatesForm/BookingDatesForm.css index b2a76b0cf8..e30d160f93 100644 --- a/src/forms/BookingDatesForm/BookingDatesForm.css +++ b/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); diff --git a/src/forms/BookingDatesForm/BookingDatesForm.js b/src/forms/BookingDatesForm/BookingDatesForm.js index a127a9513b..cb56d47895 100644 --- a/src/forms/BookingDatesForm/BookingDatesForm.js +++ b/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 ? ( +

+ +

+ ) : 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 (
+ {timeSlotsError}