Fetch tx failed: OrderPage and SalePage

src/containers/OrderPage/OrderPage.js

@@ -13,13 +13,16 @@ import css from './OrderPage.css';
 // OrderPage handles data loading
 // It show loading data text or OrderDetailsPanel (and later also another panel for messages).
 export const OrderPageComponent = props => {
-  const { currentUser, intl, transaction } = props;
+  const { currentUser, fetchOrderError, intl, transaction } = props;
   const currentTransaction = ensureTransaction(transaction);
   const currentListing = ensureListing(currentTransaction.listing);
   const title = currentListing.attributes.title;
 
   // Redirect users with someone else's direct link to their own inbox/orders page.
-  const isDataAvailable = currentUser && currentTransaction.id && currentTransaction.customer;
+  const isDataAvailable = currentUser &&
+    currentTransaction.id &&
+    currentTransaction.customer &&
+    !fetchOrderError;
   const isOwnSale = isDataAvailable && currentUser.id.uuid === currentTransaction.customer.id.uuid;
   if (isDataAvailable && !isOwnSale) {
     // eslint-disable-next-line no-console
@@ -40,9 +43,13 @@ export const OrderPageComponent = props => {
     [css.tabContentVisible]: props.tab === 'details',
   });
 
+  const loadingOrFaildFetching = fetchOrderError
+    ? <h1 className={css.title}><FormattedMessage id="OrderPage.fetchOrderFailed" /></h1>
+    : <h1 className={css.title}><FormattedMessage id="OrderPage.loadingData" /></h1>;
+
   const panel = isDataAvailable && currentTransaction.id
     ? <OrderDetailsPanel className={detailsClassName} {...detailsProps} />
-    : <h1 className={css.title}><FormattedMessage id="OrderPage.loadingData" /></h1>;
+    : loadingOrFaildFetching;
 
   return (
     <PageLayout title={intl.formatMessage({ id: 'OrderPage.title' }, { title })}>
@@ -51,26 +58,26 @@ export const OrderPageComponent = props => {
   );
 };
 
-OrderPageComponent.defaultProps = { transaction: null, currentUser: null };
+OrderPageComponent.defaultProps = { transaction: null, currentUser: null, fetchOrderError: null };
 
-const { oneOf } = PropTypes;
+const { instanceOf, oneOf } = PropTypes;
 
 OrderPageComponent.propTypes = {
   currentUser: propTypes.currentUser,
+  fetchOrderError: instanceOf(Error),
   intl: intlShape.isRequired,
   tab: oneOf(['details', 'discussion']).isRequired,
   transaction: propTypes.transaction,
 };
 
 const mapStateToProps = state => {
-  const { transactionRef } = state.OrderPage;
-  const { showListingError: showOrderError } = state.ListingPage;
+  const { fetchOrderError, transactionRef } = state.OrderPage;
   const { currentUser } = state.user;
 
   const transactions = getMarketplaceEntities(state, transactionRef ? [transactionRef] : []);
   const transaction = transactions.length > 0 ? transactions[0] : null;
 
-  return { transaction, showOrderError, currentUser };
+  return { transaction, fetchOrderError, currentUser };
 };
 
 const OrderPage = connect(mapStateToProps)(injectIntl(OrderPageComponent));

src/containers/SalePage/SalePage.js

@@ -14,13 +14,16 @@ import css from './SalePage.css';
 // SalePage handles data loading
 // It show loading data text or SaleDetailsPanel (and later also another panel for messages).
 export const SalePageComponent = props => {
-  const { currentUser, intl, onAcceptSale, onRejectSale, transaction } = props;
+  const { currentUser, fetchSaleError, intl, onAcceptSale, onRejectSale, transaction } = props;
   const currentTransaction = ensureTransaction(transaction);
   const currentListing = ensureListing(currentTransaction.listing);
   const title = currentListing.attributes.title;
 
   // Redirect users with someone else's direct link to their own inbox/sales page.
-  const isDataAvailable = currentUser && currentTransaction.id && currentTransaction.provider;
+  const isDataAvailable = currentUser &&
+    currentTransaction.id &&
+    currentTransaction.provider &&
+    !fetchSaleError;
   const isOwnSale = isDataAvailable && currentUser.id.uuid === currentTransaction.provider.id.uuid;
   if (isDataAvailable && !isOwnSale) {
     // eslint-disable-next-line no-console
@@ -42,9 +45,13 @@ export const SalePageComponent = props => {
     [css.tabContentVisible]: props.tab === 'details',
   });
 
+  const loadingOrFaildFetching = fetchSaleError
+    ? <h1 className={css.title}><FormattedMessage id="SalePage.fetchSaleFailed" /></h1>
+    : <h1 className={css.title}><FormattedMessage id="SalePage.loadingData" /></h1>;
+
   const panel = isDataAvailable && currentTransaction.id
     ? <SaleDetailsPanel className={detailsClassName} {...detailsProps} />
-    : <h1 className={css.title}><FormattedMessage id="SalePage.loadingData" /></h1>;
+    : loadingOrFaildFetching;
 
   const isPreauthorizedState = currentTransaction.attributes.state ===
     propTypes.TX_STATE_PREAUTHORIZED;
@@ -67,12 +74,13 @@ export const SalePageComponent = props => {
   );
 };
 
-SalePageComponent.defaultProps = { transaction: null, currentUser: null };
+SalePageComponent.defaultProps = { transaction: null, currentUser: null, fetchSaleError: null };
 
-const { func, oneOf } = PropTypes;
+const { func, instanceOf, oneOf } = PropTypes;
 
 SalePageComponent.propTypes = {
   currentUser: propTypes.currentUser,
+  fetchSaleError: instanceOf(Error),
   intl: intlShape.isRequired,
   onAcceptSale: func.isRequired,
   onRejectSale: func.isRequired,
@@ -81,14 +89,13 @@ SalePageComponent.propTypes = {
 };
 
 const mapStateToProps = state => {
-  const { transactionRef } = state.SalePage;
-  const { showListingError: showSaleError } = state.ListingPage;
+  const { fetchSaleError, transactionRef } = state.SalePage;
   const { currentUser } = state.user;
 
   const transactions = getMarketplaceEntities(state, transactionRef ? [transactionRef] : []);
   const transaction = transactions.length > 0 ? transactions[0] : null;
 
-  return { transaction, showSaleError, currentUser };
+  return { transaction, fetchSaleError, currentUser };
 };
 
 const mapDispatchToProps = dispatch => {

src/translations/en.json

@@ -66,6 +66,7 @@
   "OrderDetailsPanel.orderRejectedTitle": "You requested to book {title}.",
   "OrderDetailsPanel.orderRequestedStatus": "{providerName} has been notified about the booking request, so sit back and relax.",
   "OrderDetailsPanel.orderRequestedTitle": "You have requested to book {title}.",
+  "OrderPage.fetchOrderFailed": "Fetching order data failed.",
   "OrderPage.loadingData": "Loading order data.",
   "OrderPage.title": "Order details for ${title}.",
   "PageLayout.authInfoFailed": "Could not get authentication information.",
@@ -79,6 +80,7 @@
   "SaleDetailsPanel.saleRejectedStatus": "You rejected the booking.",
   "SaleDetailsPanel.saleRequestedStatus": "{customerName} is waiting for your response.",
   "SalePage.acceptButton": "Accept",
+  "SalePage.fetchSaleFailed": "Fetching sale data failed.",
   "SalePage.loadingData": "Loading sale data.",
   "SalePage.rejectButton": "Reject",
   "SalePage.title": "Sale details for ${title}.",