fix: Add fetchOrderFailure for error handling and modify handleFetchO…

…rder with try block

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 (
     <div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
       <p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
@@ -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"
         />
+        <span>{error}</span>
       </p>
     </div>
   );
-}
+};
+
+NotFoundPage.defaultProps = {
+  error: null,
+};
+
+NotFoundPage.propTypes = {
+  error: PropTypes.string,
+};
+
+export default injectIntl(NotFoundPage);

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

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,

src/receipt/saga.js

@@ -1,26 +1,33 @@
 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';
 
 // Services
 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());
 }