Spike: [UIORGS-61] Figure out if we are able to show error messages with a link

Owned by Andrei Shumski
Last updated: May 10, 2019
2 min read

Spike: figure out if we are able to show error messages with a link

During the investigation, it was found that Stripes Callout component supports string, HTML or React Component as a prop for rendering the message in the content of the callout.
So it possible to render hyperlink in the content of the callout based on back-end response code.
Also should be noticed that the default timeout for callout is 6 sec. In this case timeout for errors should be significantly increased so that user can follow the link if necessary or set to 0 to allow the user to close callout by himself.
If user clicks on hyperlink he will be redirected to the settings page.

import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';

import { get } from 'lodash';

export const ERROR_CODES = {
  loanTypeIsNotDefined: 'loanTypeIsNotDefined',
};

const showUpdateOrderError = async (response, callout) => {
  let error;

  try {
    error = await response.json();
  } catch (parsingException) {
    error = response;
  }

  const errorCode = get(error, 'errors.0.code');
  const messageCode = get(ERROR_CODES, errorCode, '');

  callout.sendCallout({
    type: 'error',
    message: (
      <FormattedMessage
        id="ui-orders.errors.loanTypeIsNotDefined"
        values={{ code: <Link to="/settings/inventory/loantypes">{messageCode}</Link> }}
      />
    ),
    timeout: 0,
  });
};

export default showUpdateOrderError;