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()); }