Merge pull request #413 from sharetribe/improve-checkout-error-handling

Improve checkout error handling

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 { createSlug } from '../../util/urlHelpers';
 import { isTransactionInitiateListingNotFoundError } from '../../util/errors';
 import {
   AvatarMedium,
@@ -186,7 +187,10 @@ 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 && !listingNotFound);
+    const showPaymentForm = !!(currentUser &&
+      hasRequiredData &&
+      !listingNotFound &&
+      !initiateOrderError);
 
     const listingTitle = currentListing.attributes.title;
     const title = intl.formatMessage({ id: 'CheckoutPage.title' }, { listingTitle });
@@ -200,9 +204,17 @@ export class CheckoutPageComponent extends Component {
           <FormattedMessage id="CheckoutPage.listingNotFoundError" />
         </p>
       : null;
+    const listingLink = (
+      <NamedLink
+        name="ListingPage"
+        params={{ id: currentListing.id.uuid, slug: createSlug(listingTitle) }}
+      >
+        <FormattedMessage id="CheckoutPage.errorlistingLinkText" />
+      </NamedLink>
+    );
     const initiateOrderErrorMessage = !listingNotFound && initiateOrderError
       ? <p className={css.orderError}>
-          <FormattedMessage id="CheckoutPage.initiateOrderError" />
+          <FormattedMessage id="CheckoutPage.initiateOrderError" values={{ listingLink }} />
         </p>
       : null;
     const speculateTransactionErrorMessage = speculateTransactionError

src/translations/en.json

@@ -37,9 +37,10 @@
   "BookingDatesForm.requestToBook": "Request to book",
   "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
   "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet",
+  "CheckoutPage.errorlistingLinkText": "the sauna page",
   "CheckoutPage.goToLandingPage": "Go to homepage",
   "CheckoutPage.hostedBy": "Hosted by {name}",
-  "CheckoutPage.initiateOrderError": "Payment request failed. Please refresh the page and try again.",
+  "CheckoutPage.initiateOrderError": "Payment request failed. Please go back to {listingLink} and try again. If the error persists, try refreshing the page or contacting the marketplace admin.",
   "CheckoutPage.listingNotFoundError": "Unfortunately the listing is not available anymore.",
   "CheckoutPage.loadingData": "Loading checkout data...",
   "CheckoutPage.paymentInfo": "You'll only be charged if your request is accepted by the provider.",