Task now keeps the rejected value as error

src/apps/companies/apps/add-company/client/tasks.js

@@ -14,7 +14,7 @@ export const createCompany = ({ csrfToken, ...values }) => {
   return axios
     .post(postUrl, values)
     .catch((err) => {
-      return Promise.reject(err.response.data.error.message)
+      return Promise.reject(err.response.data.error.message[0])
     })
     .then((response) => response.data)
 }

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/ContactForm/tasks.js

@@ -8,13 +8,7 @@ export const saveContact = ({ contactId, values }) => {
   values.company = { id: values.company.id }
 
   return request(contactId ? `${endpoint}/${contactId}` : endpoint, values)
-    .catch((e) => {
-      if (e?.errors) {
-        return { data: e }
-      } else {
-        return Promise.reject(e.message)
-      }
-    })
+    .catch((e) => Promise.reject(e?.data?.email?.[0] || e.message))
     .then((response) => {
       return response.data
     })

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,9 @@ function* startTask(task, action) {
         type: TASK__ERROR,
         id,
         name,
-        errorMessage: error,
+        error,
+        // FIXME: This should be handled on the renderError level
+        errorMessage: typeof error === 'string' ? error : error.message,
       })
     }
   }

src/client/components/Task/utils.js

@@ -20,17 +20,17 @@ 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,
+    data: response.data,
+    httpStatusCode: response.status,
+  })
 
 /**
  * A custom Axios instance for easy access to the `/api-proxy` endpoint.

src/client/modules/Companies/CompanyExports/ExportCountriesEdit/index.jsx

@@ -29,27 +29,25 @@ const StyledP = styled.p`
   margin: 0;
 `
 
-function ErrorHandler({ errorMessage }) {
+function ErrorHandler({ error }) {
   return (
     <>
-      {errorMessage[API_ERROR] && (
+      {error[API_ERROR] && (
         <StatusMessage
           colour={ERROR_COLOUR}
           aria-labelledby="api-error-summary-title"
           role="alert"
         >
-          <StyledH2 id="api-error-summary-title">
-            {errorMessage[API_ERROR]}
-          </StyledH2>
+          <StyledH2 id="api-error-summary-title">{error[API_ERROR]}</StyledH2>
         </StatusMessage>
       )}
 
-      {errorMessage[API_WARN] && (
+      {error[API_WARN] && (
         <StatusMessage aria-labelledby="error-summary-title" role="alert">
           <StyledH2 id="error-summary-title">
             Export countries could not be saved, try again later.
           </StyledH2>
-          <StyledP>{errorMessage[API_WARN]}</StyledP>
+          <StyledP>{error[API_WARN]}</StyledP>
         </StatusMessage>
       )}
     </>

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>

src/client/modules/Interactions/ESSInteractionDetails/index.jsx

@@ -45,6 +45,7 @@ const ESSInteractionDetails = ({
       breadcrumbs={breadcrumbs}
       useReactRouter={true}
     >
+      {/* TODO: Use Resource */}
       <Task.Status
         name={TASK_GET_ESS_INTERACTION_DETAILS}
         id={ID}

test/component/cypress/specs/ExportWins/Review.cy.jsx

@@ -99,7 +99,7 @@ describe('ExportWins/Review', () => {
 
     it("should render default error view if the review couldn't be loaded for", () => {
       const Provider = createTestProvider({
-        'Export Win Review': () => Promise.reject(),
+        'Export Win Review': () => Promise.reject({}),
       })
       cy.mount(
         <Provider>

test/sandbox/routes/v4/export-win/export-win.js

@@ -142,6 +142,9 @@ export const getExportWinReview = (req, res) => {
   if (req.params.token === 'non-existent') {
     return res.status(404).json({ detail: 'Not found' })
   }
+  if (req.params.token === 'server-error') {
+    return res.status(500).json({ detail: 'Server error' })
+  }
   res.json({
     win: fakeExportWin(),
     company_contact: {