diff --git a/src/app/common/error/ErrorCode.tsx b/src/app/common/error/ErrorCode.tsx index b9d4b78e67..bcaf02b486 100644 --- a/src/app/common/error/ErrorCode.tsx +++ b/src/app/common/error/ErrorCode.tsx @@ -1,14 +1,19 @@ -import React, { memo, FunctionComponent } from 'react'; +import React, { memo, FunctionComponent, ReactNode } from 'react'; import { TranslatedString } from '../../locale'; import './ErrorCode.scss'; -const ErrorCode: FunctionComponent<{code: string}> = ({ code }) => { +export interface ErrorCodeProps { + code: string; + label?: ReactNode; +} + +const ErrorCode: FunctionComponent = ({ code, label }) => { return (
- + { label ?? } { ' ' } { code } diff --git a/src/app/common/error/ErrorModal.spec.tsx b/src/app/common/error/ErrorModal.spec.tsx index 2d5f6ccb77..565be664e1 100644 --- a/src/app/common/error/ErrorModal.spec.tsx +++ b/src/app/common/error/ErrorModal.spec.tsx @@ -1,3 +1,4 @@ +import { RequestError } from '@bigcommerce/checkout-sdk'; import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; @@ -13,7 +14,7 @@ import ErrorModal, { ErrorModalProps } from './ErrorModal'; describe('ErrorModal', () => { let errorModal: ReactWrapper; let localeContext: LocaleContextType; - let error: Error; + let error: Error | RequestError; const onClose = jest.fn(); const ErrorModalContainer = (props: ErrorModalProps) => ( @@ -48,6 +49,18 @@ describe('ErrorModal', () => { expect(errorModal.find(ErrorCode).length).toEqual(1); }); + it('renders request ID if available', () => { + error = { + type: 'request', + headers: { 'x-request-id': 'foobar' }, + } as unknown as RequestError; + + errorModal = mount(); + + expect(errorModal.find(ErrorCode).text()) + .toEqual('Request ID: foobar'); + }); + it('overrides error message', () => { errorModal = mount( { return; } + if (isRequestError(error) && error?.headers?.['x-request-id']) { + return } + />; + } + const errorCode = computeErrorCode(error); if (!errorCode) { diff --git a/src/app/locale/translations/en.json b/src/app/locale/translations/en.json index 2adbf95297..4b45dd5bcf 100644 --- a/src/app/locale/translations/en.json +++ b/src/app/locale/translations/en.json @@ -81,6 +81,7 @@ "loading_text": "Loading", "ok_action": "Ok", "error_code": "Error code:", + "request_id": "Request ID:", "optional_text": "(Optional)", "unavailable_error": "Checkout is temporarily unavailable. Please try again later.", "unavailable_heading": "Checkout is temporarily unavailable",