Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 1x 2x 2x 1x 2x 2x 1x | import { createCheckoutService, createEmbeddedCheckoutMessenger, createStepTracker, StepTracker } from '@bigcommerce/checkout-sdk';
import { BrowserOptions } from '@sentry/browser';
import React, { Component } from 'react';
import ReactModal from 'react-modal';
import '../../scss/App.scss';
import { createErrorLogger, ErrorBoundary, ErrorLogger } from '../common/error';
import { createEmbeddedCheckoutStylesheet, createEmbeddedCheckoutSupport } from '../embeddedCheckout';
import { getLanguageService, LocaleProvider } from '../locale';
import Checkout from './Checkout';
import CheckoutProvider from './CheckoutProvider';
export interface CheckoutAppProps {
checkoutId: string;
containerId: string;
publicPath?: string;
sentryConfig?: BrowserOptions;
}
export default class CheckoutApp extends Component<CheckoutAppProps> {
private checkoutService = createCheckoutService({
locale: getLanguageService().getLocale(),
shouldWarnMutation: process.env.NODE_ENV === 'development',
});
private embeddedStylesheet = createEmbeddedCheckoutStylesheet();
private embeddedSupport = createEmbeddedCheckoutSupport(getLanguageService());
private errorLogger: ErrorLogger;
constructor(props: Readonly<CheckoutAppProps>) {
super(props);
this.errorLogger = createErrorLogger(
{ sentry: props.sentryConfig },
{
errorTypes: ['UnrecoverableError'],
publicPath: props.publicPath,
}
);
}
componentDidMount(): void {
const { containerId } = this.props;
ReactModal.setAppElement(`#${containerId}`);
}
render() {
return (
<ErrorBoundary logger={ this.errorLogger }>
<LocaleProvider checkoutService={ this.checkoutService }>
<CheckoutProvider checkoutService={ this.checkoutService }>
<Checkout
{ ...this.props }
createEmbeddedMessenger={ createEmbeddedCheckoutMessenger }
createStepTracker={ this.createStepTracker }
embeddedStylesheet={ this.embeddedStylesheet }
embeddedSupport={ this.embeddedSupport }
errorLogger={ this.errorLogger }
/>
</CheckoutProvider>
</LocaleProvider>
</ErrorBoundary>
);
}
private createStepTracker: () => StepTracker = () => {
return createStepTracker(this.checkoutService);
};
}
|