fix(payment): CHECKOUT-4357 Redirect to PayPal when location header

src/app/common/error/index.ts

@@ -13,4 +13,5 @@ export { default as ErrorModal } from './ErrorModal';
 export { default as computeErrorCode } from './computeErrorCode';
 export { default as createErrorLogger } from './createErrorLogger';
 export { default as isCustomError } from './isCustomError';
+export { default as isRequestError } from './isRequestError';
 export { setPrototypeOf } from './createCustomErrorType';

src/app/common/error/isRequestError.ts

@@ -0,0 +1,7 @@
+import { RequestError } from '@bigcommerce/checkout-sdk';
+
+export default function isRequestError(error: Error): error is RequestError {
+    const requestError = error as RequestError;
+
+    return requestError.type === 'request';
+}

src/app/payment/Payment.spec.tsx

@@ -1,4 +1,4 @@
-import { createCheckoutService, CheckoutSelectors, CheckoutService, CustomError, PaymentMethod } from '@bigcommerce/checkout-sdk';
+import { createCheckoutService, CheckoutSelectors, CheckoutService, CustomError, PaymentMethod, RequestError } from '@bigcommerce/checkout-sdk';
 import { mount, ReactWrapper } from 'enzyme';
 import { EventEmitter } from 'events';
 import { find, merge, noop } from 'lodash';
@@ -11,6 +11,7 @@ import { ErrorModal } from '../common/error';
 import { getStoreConfig } from '../config/config.mock';
 import { getCustomer } from '../customer/customers.mock';
 import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale';
+import { Button } from '../ui/button';
 
 import { getPaymentMethod } from './payment-methods.mock';
 import Payment, { PaymentProps } from './Payment';
@@ -313,6 +314,24 @@ describe('Payment', () => {
             .toHaveLength(1);
     });
 
+    it('redirects to location error header when error type is provider_error', () => {
+        jest.spyOn(window.top.location, 'assign')
+            .mockImplementation();
+
+        jest.spyOn(checkoutState.errors, 'getFinalizeOrderError')
+            .mockReturnValue({
+                type: 'request',
+                body: { type: 'provider_error' },
+                headers: { location: 'foo' },
+            } as unknown as RequestError);
+
+        const container = mount(<PaymentTest { ...defaultProps } />);
+
+        container.find(Button).simulate('click');
+
+        expect(window.top.location.assign).toHaveBeenCalledWith('foo');
+    });
+
     it('does not render error modal if order does not need to finalize', () => {
         jest.spyOn(checkoutState.errors, 'getFinalizeOrderError')
             .mockReturnValue({ type: 'order_finalization_not_required' } as CustomError);

src/app/payment/Payment.tsx

@@ -5,7 +5,7 @@ import React, { Component, ReactNode } from 'react';
 import { ObjectSchema } from 'yup';
 
 import { withCheckout, CheckoutContextProps } from '../checkout';
-import { ErrorModal, ErrorModalOnCloseProps } from '../common/error';
+import { isRequestError, ErrorModal, ErrorModalOnCloseProps } from '../common/error';
 import { EMPTY_ARRAY } from '../common/utility';
 import { withLanguage, WithLanguageProps } from '../locale';
 import { FlashAlert, FlashMessage } from '../ui/alert';
@@ -282,6 +282,14 @@ class Payment extends Component<PaymentProps & WithCheckoutPaymentProps & WithLa
             window.location.replace(cartUrl || '/');
         }
 
+        if (isRequestError(error)) {
+            const { body, headers } = error;
+
+            if (body.type === 'provider_error' && headers.location) {
+                window.top.location.assign(headers.location);
+            }
+        }
+
         clearError(error);
     };