diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index 381416f8..be504c20 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/src/containers/CheckoutPage/CheckoutPage.css @@ -247,16 +247,27 @@ } } +.orderError, +.notFoundError { + margin: 11px 0 12px 0; + + @media (--viewportMedium) { + margin: 10px 0 12px 0; + } +} .orderError { - /* Font */ color: var(--failColor); } +.notFoundError { + color: var(--attentionColor); +} .speculateError { color: var(--failColor); + margin: 19px 0 1px 0; @media (--viewportLarge) { - margin: 0 48px; + margin: 28px 48px 0 48px; } } diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index 5b4fee9d..b99af6c8 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/src/containers/CheckoutPage/CheckoutPage.js @@ -8,6 +8,7 @@ import { pathByRouteName } from '../../util/routes'; import * as propTypes from '../../util/propTypes'; import { ensureListing, ensureUser, ensureTransaction, ensureBooking } from '../../util/data'; import { withFlattenedRoutes } from '../../util/contextHelpers'; +import { isTransactionInitiateListingNotFoundError } from '../../util/errors'; import { AvatarMedium, BookingBreakdown, @@ -129,6 +130,15 @@ export class CheckoutPageComponent extends Component { currentUser, } = this.props; + // Since the listing data is already given from the ListingPage + // and stored to handle refreshes, it might not have the possible + // deleted or closed information in it. If the transaction + // initiate or the speculative initiate fail due to the listing + // being deleted or closec, we should dig the information from the + // errors and not the listing data. + const listingNotFound = isTransactionInitiateListingNotFoundError(speculateTransactionError) || + isTransactionInitiateListingNotFoundError(initiateOrderError); + const isLoading = !this.state.dataLoaded || speculateTransactionInProgress; const { listing, bookingDates } = this.state.pageData; @@ -142,14 +152,13 @@ export class CheckoutPageComponent extends Component { currentAuthor && currentAuthor.id && currentAuthor.id.uuid === currentUser.id.uuid; - const listingIsOpen = currentListing.id && currentListing.attributes.open; const hasListingAndAuthor = !!(currentListing.id && currentAuthor.id); const hasBookingDates = !!(bookingDates && bookingDates.bookingStart && bookingDates.bookingEnd); const hasRequiredData = hasListingAndAuthor && hasBookingDates; - const canShowPage = hasRequiredData && listingIsOpen && !isOwnListing; + const canShowPage = hasRequiredData && !isOwnListing; const shouldRedirect = !isLoading && !canShowPage; // Redirect back to ListingPage if data is missing. @@ -177,7 +186,7 @@ export class CheckoutPageComponent extends Component { // Allow showing page when currentUser is still being downloaded, // but show payment form only when user info is loaded. - const showPaymentForm = !!(currentUser && hasRequiredData); + const showPaymentForm = !!(currentUser && hasRequiredData && !listingNotFound); const listingTitle = currentListing.attributes.title; const title = intl.formatMessage({ id: 'CheckoutPage.title' }, { listingTitle }); @@ -191,6 +200,11 @@ export class CheckoutPageComponent extends Component {

: null; + const listingNotFoundErrorMessage = listingNotFound + ?

+ +

+ : null; const speculateTransactionErrorMessage = speculateTransactionError ?

@@ -271,6 +285,7 @@ export class CheckoutPageComponent extends Component { {initiateOrderErrorMessage} + {listingNotFoundErrorMessage} {showPaymentForm ?