diff --git a/src/components/NotFoundPage.jsx b/src/components/NotFoundPage.jsx
index 14258ce1e..976a555fb 100644
--- a/src/components/NotFoundPage.jsx
+++ b/src/components/NotFoundPage.jsx
@@ -1,7 +1,9 @@
import React from 'react';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
-export default function NotFoundPage() {
+const NotFoundPage = (props) => {
+ const { error } = props;
return (
@@ -10,7 +12,18 @@ export default function NotFoundPage() {
defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."
description="error message when a page does not exist"
/>
+ {error}
);
-}
+};
+
+NotFoundPage.defaultProps = {
+ error: null,
+};
+
+NotFoundPage.propTypes = {
+ error: PropTypes.string,
+};
+
+export default injectIntl(NotFoundPage);
diff --git a/src/receipt/actions.js b/src/receipt/actions.js
index 045e9e188..6186f87da 100644
--- a/src/receipt/actions.js
+++ b/src/receipt/actions.js
@@ -20,6 +20,11 @@ export const fetchOrderSuccess = result => ({
payload: result,
});
+export const fetchOrderFailure = error => ({
+ type: FETCH_ORDER.FAILURE,
+ payload: { error },
+});
+
export const fetchOrderReset = () => ({
type: FETCH_ORDER.RESET,
});
diff --git a/src/receipt/reducer.js b/src/receipt/reducer.js
index bbf1c1179..0a63c6eec 100644
--- a/src/receipt/reducer.js
+++ b/src/receipt/reducer.js
@@ -20,6 +20,12 @@ const receiptPage = (state = initialState, action) => {
order: action.payload.order,
loadingReceipt: false,
};
+ case FETCH_ORDER.FAILURE:
+ return {
+ ...state,
+ loadingReceiptError: action.payload.error,
+ loadingReceipt: false,
+ };
case FETCH_ORDER.RESET:
return {
...state,
diff --git a/src/receipt/saga.js b/src/receipt/saga.js
index de6872afe..2ec25d1ce 100644
--- a/src/receipt/saga.js
+++ b/src/receipt/saga.js
@@ -1,10 +1,13 @@
import { call, put, takeEvery } from 'redux-saga/effects';
+import { history } from '@edx/frontend-platform';
+import { logError } from '@edx/frontend-platform/logging';
// Actions
import {
FETCH_ORDER,
fetchOrderBegin,
fetchOrderSuccess,
+ fetchOrderFailure,
fetchOrderReset,
} from './actions';
@@ -12,15 +15,19 @@ import {
import * as OrderApiService from './service';
export function* handleFetchOrder(action) {
- console.log('[Saga] 1.a) action', action);
- const { orderToFetch } = action.payload;
- // JK TODO: try and finally block? Remove console.log
- console.log('[Saga] 1.b) orderToFetch:', orderToFetch);
- yield put(fetchOrderBegin());
- const result = yield call(OrderApiService.getOrder, orderToFetch);
- console.log('[Saga] 1.c) result:', result);
- yield put(fetchOrderSuccess(result));
- console.log('[Saga] 1.d) success');
+ try {
+ const { orderToFetch } = action.payload;
+ yield put(fetchOrderBegin());
+ const result = yield call(OrderApiService.getOrder, orderToFetch);
+ yield put(fetchOrderSuccess(result));
+ } catch (error) {
+ if (error.response.status === 404) {
+ history.push('/notfound');
+ } else {
+ yield put(fetchOrderFailure(error.message));
+ logError(error);
+ }
+ }
yield put(fetchOrderReset());
}