Task now keeps the rejected value as error

src/apps/interactions/apps/details-form/client/tasks.js

@@ -354,7 +354,9 @@ export function saveInteraction({ values, companyIds, referralId }) {
     .catch((e) => {
       // Accounts for non-standard API error on contacts field
       const contactsError = e.response?.data?.contacts[0]
-      return contactsError ? Promise.reject(contactsError) : catchApiError(e)
+      return contactsError
+        ? Promise.reject(contactsError)
+        : catchApiError(e).message
     })
 }
 

src/client/components/AccessDenied/index.jsx

@@ -3,6 +3,8 @@ import React from 'react'
 import DefaultLayout from '../Layout/DefaultLayout'
 
 const AccessDenied = ({ breadcrumbs }) => (
+  // FIXME: This shouldn't DefaultLayout as it can appear anywhere in a page in which case
+  // it completely breaks the layout.
   <DefaultLayout
     heading="You don't have permission to view this page"
     pageTitle="Access denied"

src/client/components/Task/index.jsx

@@ -52,8 +52,14 @@ const startOnRenderPropTypes = {
  * @typedef Task
  * @property {'progress' | 'error'} status - The current status of the task
  * @property {Boolean} progress - Whether the task is in progress
- * @property {Boolean} error - Whether the task is in error state
+ * @property {Boolean} isError - Whether the task is in error state
  * @property {(name, id, StartOptions) => void} start - Starts a task.
+ * @property {any} [payload=undefined] - The value of the payload with which the task was started.
+ * @property {any} [error=undefined] - The value with wich the task rejected
+ * @property {string} [errorMessage=undefined] - Error message extracted from {error.message}.
+ * @property {string} [onSuccessDispatch=undefined] - Action that will be dispatched when the task resolves
+ * @property {() => void} [dismissError=undefined] - When when the task is in `state === 'error'`
+ * will reset the tasks state.
  */
 
 /**
@@ -245,6 +251,7 @@ Task.Status = ({
         errorMessage,
         onSuccessDispatch,
         dismissError,
+        error,
       } = getTask(name, id)
 
       const retry = () =>
@@ -263,12 +270,14 @@ Task.Status = ({
             progress &&
             renderProgress({ message: progressMessage, noun })}
           {isError &&
+            // FIXME: This is shouldn't be done here and it shouldn't be done this way
             (errorMessage ===
             'You do not have permission to perform this action.' ? (
               <AccessDenied />
             ) : (
               renderError({
                 noun,
+                error,
                 errorMessage,
                 retry: !noRetry && retry,
                 dismiss: !noDismiss && dismissError,

src/client/components/Task/saga.js

@@ -47,7 +47,8 @@ function* startTask(task, action) {
         type: TASK__ERROR,
         id,
         name,
-        errorMessage: error,
+        error,
+        errorMessage: error.message,
       })
     }
   }

src/client/components/Task/utils.js

@@ -20,17 +20,16 @@ export const delay = curry((duration, task, payload) =>
 )
 
 export const catchApiError = ({ response, message }) =>
-  Promise.reject(
-    response?.data?.detail ||
+  Promise.reject({
+    message:
+      response?.data?.detail ||
       response?.text ||
       response?.data?.non_field_errors ||
-      (response?.data && {
-        errors: response.data,
-        httpStatusCode: response.status,
-      }) ||
       response?.statusText ||
-      message
-  )
+      response.data ||
+      message,
+    httpStatusCode: response.status,
+  })
 
 /**
  * A custom Axios instance for easy access to the `/api-proxy` endpoint.

src/client/modules/ExportWins/Review/index.jsx

@@ -27,7 +27,7 @@ import ThankYou from './ThankYou'
 const FORM_ID = 'export-wins-customer-feedback'
 
 const NotFound = (props) =>
-  props.errorMessage?.httpStatusCode === 404 ? (
+  props.error?.httpStatusCode === 404 ? (
     <>
       <H4 as="h2">The link you used has expired</H4>
       <p>