Fix: Error messaging sub-system was not wired to UI

Fix for #19

Also corrects #17

Author: birdofpreyru

README.md

@@ -4,7 +4,7 @@
 ![Release Version](https://img.shields.io/github/tag/topcoder-platform/topcoder-payment-tool.svg)
 
 Based on
-[`topcoder-react-starter`](https://www.npmjs.com/package/topcoder-react-starter).
+[`topcoder-react-starter`](https://github.com/topcoder-platform/topcoder-react-starter).
 
 To install, test, and run in development mode:
 ```bash

__tests__/shared/__snapshots__/index.jsx.snap

@@ -7,6 +7,7 @@ exports[`Matches shallow snapshot 1`] = `
     title="Topcoder Payment Tool"
   />
   <Routes />
+  <Connect(ErrorMessageContainer) />
 </div>
 `;
 
@@ -17,6 +18,7 @@ exports[`Matches shallow snapshot in dev mode 1`] = `
     title="Topcoder Payment Tool"
   />
   <Routes />
+  <Connect(ErrorMessageContainer) />
   <DevTools />
 </div>
 `;

package-lock.json

@@ -59,8 +59,8 @@
     "slick-carousel": "^1.8.1",
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "topcoder-react-lib": "^0.6.0",
-    "topcoder-react-ui-kit": "^0.5.2",
-    "topcoder-react-utils": "^0.7.5"
+    "topcoder-react-ui-kit": "^0.5.5",
+    "topcoder-react-utils": "^0.7.8"
   },
   "devDependencies": {
     "autoprefixer": "^8.6.4",

package.json

@@ -2,6 +2,7 @@
  * Root component of the app.
  */
 
+import ErrorMessage from 'containers/ErrorMessage';
 import React from 'react';
 import Routes from 'routes';
 
@@ -19,6 +20,7 @@ export default function Application() {
         description="Topcoder Payment Tool"
       />
       <Routes />
+      <ErrorMessage />
       { isomorphy.isDevBuild() ? <DevTools /> : undefined }
     </div>
   );

src/shared/App.jsx

@@ -0,0 +1,73 @@
+/**
+ * ErrorMessage Container
+ *
+ * Description:
+ *   Connects the Redux store to the modal ErrorMessageContainer container.
+ *   NOTE: This is created and managed by utils/errors and should not
+ *   be used directly.
+ */
+import { actions } from 'topcoder-react-lib';
+import React from 'react';
+import PT from 'prop-types';
+import { connect } from 'react-redux';
+import { ErrorMessage } from 'topcoder-react-ui-kit';
+
+function ErrorMessageContainer({ error, clearError }) {
+  return (
+    <div>
+      { error
+        ? (
+          <ErrorMessage
+            title={error.title}
+            details={error.details}
+            onOk={() => clearError()}
+          />
+        ) : undefined }
+    </div>
+  );
+}
+
+/**
+ * Default values for Props
+ */
+ErrorMessageContainer.defaultProps = {
+  error: null,
+};
+
+/**
+ * Prop Validation
+ */
+ErrorMessageContainer.propTypes = {
+  clearError: PT.func.isRequired,
+  error: PT.shape({
+    title: PT.string.isRequired,
+    details: PT.string.isRequired,
+  }),
+};
+
+/**
+ * Standard redux function, passes redux state into Container as props.
+ * Is passed to connect(), not called directly.
+ * @param {Object} state Redux state
+ * @return {Object}
+ */
+const mapStateToProps = state => ({
+  error: state.errors.alerts[0],
+});
+
+/**
+ * Standard redux function, passes redux actions into Container as props.
+ * Is passed to connect(), not called directly.
+ * @param {Function} dispatch Function to dispatch action to reducers
+ * @return {Object}
+ */
+const mapDispatchToProps = dispatch => ({
+  clearError: () => {
+    dispatch(actions.errors.clearError());
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ErrorMessageContainer);

src/shared/containers/ErrorMessage.jsx

@@ -182,18 +182,17 @@ class EditorContainer extends React.Component {
    * Handles the payment.
    */
   async pay() {
+    const {
+      copilotPaymentAmount,
+      paymentAmount,
+      paymentTitle,
+      setPageState,
+      selectedBillingAccountId,
+      selectedProjectId,
+      tokenV3,
+      challengeTechnologyTags,
+    } = this.props;
     try {
-      const {
-        copilotPaymentAmount,
-        paymentAmount,
-        paymentTitle,
-        setPageState,
-        selectedBillingAccountId,
-        selectedProjectId,
-        tokenV3,
-        challengeTechnologyTags,
-      } = this.props;
-
       let {
         paymentDescription,
         submissionGuidelines,
@@ -237,6 +236,7 @@ class EditorContainer extends React.Component {
       }
       setPageState(PAGE_STATE.PAID);
     } catch (error) {
+      setPageState(PAGE_STATE.NEW_PAYMENT);
       logger.error(error);
       fireErrorMessage(
         'Failed to proceed the payment',