Add error message for time slot request errors

sharetribe · Aug 17, 2018 · 09991d2 · 09991d2
1 parent e64f0e7
commit 09991d2
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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>

diff --git 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 (
     <div>
       <ModalInMobile
@@ -70,6 +72,7 @@ const SectionBooking = props => {
             price={price}
             isOwnListing={isOwnListing}
             timeSlots={timeSlots}
+            fetchTimeSlotsError={fetchTimeSlotsError}
           />
         ) : null}
       </ModalInMobile>

diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/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]}

diff --git 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
@@ -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"

diff --git a/src/translations/en.json b/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",