From 0f8c393afc3d8eb129408f44ef40657d2b14a4a2 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Tue, 19 Sep 2017 14:14:29 +0300
Subject: [PATCH 1/2] Improve checkout error handling

 - Hide form if there's an error in creating the transaction
 - Improve the error message byt adding instructions on how to continue
---
 src/containers/CheckoutPage/CheckoutPage.js | 16 ++++++++++++++--
 src/translations/en.json                    |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js
index 171c46ba..f73024eb 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 { 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
diff --git a/src/translations/en.json b/src/translations/en.json
index 93d6fbbb..664be9a2 100644
--- a/src/translations/en.json
+++ b/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 listing 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.",

From fdfa6b21bcbe0afc358b73fdb9b40b9e8eab2225 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 20 Sep 2017 10:34:59 +0300
Subject: [PATCH 2/2] Change error copy text slightly

---
 src/translations/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/translations/en.json b/src/translations/en.json
index 664be9a2..449456c2 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -37,7 +37,7 @@
   "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 listing page",
+  "CheckoutPage.errorlistingLinkText": "the sauna page",
   "CheckoutPage.goToLandingPage": "Go to homepage",
   "CheckoutPage.hostedBy": "Hosted by {name}",
   "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.",