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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { createCheckoutService, createEmbeddedCheckoutMessenger, createStepTracker, StepTracker } from '@bigcommerce/checkout-sdk';
import { BrowserOptions } from '@sentry/browser';
import React, { Component, ReactNode } from 'react';
import ReactModal from 'react-modal';
import '../../scss/App.scss';
import { CheckoutProvider } from '../checkout';
import { createErrorLogger, ErrorBoundary, ErrorLogger } from '../common/error';
import { createEmbeddedCheckoutStylesheet } from '../embeddedCheckout';
import { AccountService, CreatedCustomer, SignUpFormValues } from '../guestSignup';
import { getLanguageService, LocaleProvider } from '../locale';
import OrderConfirmation from './OrderConfirmation';
export interface OrderConfirmationAppProps {
containerId: string;
orderId: number;
publicPath?: string;
sentryConfig?: BrowserOptions;
}
class OrderConfirmationApp extends Component<OrderConfirmationAppProps> {
private accountService = new AccountService();
private checkoutService = createCheckoutService({
locale: getLanguageService().getLocale(),
shouldWarnMutation: process.env.NODE_ENV === 'development',
});
private embeddedStylesheet = createEmbeddedCheckoutStylesheet();
private errorLogger: ErrorLogger;
constructor(props: Readonly<OrderConfirmationAppProps>) {
super(props);
this.errorLogger = createErrorLogger(
{ sentry: props.sentryConfig },
{
errorTypes: ['UnrecoverableError'],
publicPath: props.publicPath,
}
);
}
componentDidMount(): void {
const { containerId } = this.props;
ReactModal.setAppElement(`#${containerId}`);
}
render(): ReactNode {
return (
<ErrorBoundary logger={ this.errorLogger }>
<LocaleProvider checkoutService={ this.checkoutService }>
<CheckoutProvider checkoutService={ this.checkoutService }>
<OrderConfirmation
{ ...this.props }
createAccount={ this.createAccount }
createEmbeddedMessenger={ createEmbeddedCheckoutMessenger }
createStepTracker={ this.createStepTracker }
embeddedStylesheet={ this.embeddedStylesheet }
errorLogger={ this.errorLogger }
/>
</CheckoutProvider>
</LocaleProvider>
</ErrorBoundary>
);
}
private createAccount: (values: SignUpFormValues) => Promise<CreatedCustomer> = ({
password,
confirmPassword,
}) => {
const { orderId } = this.props;
return this.accountService.create({
orderId,
newsletter: false,
password,
confirmPassword,
});
};
private createStepTracker: () => StepTracker = () => {
return createStepTracker(this.checkoutService);
};
}
export default OrderConfirmationApp;
|