perf(checkout): CHECKOUT-4272 Avoid passing arrow function to checkou…

…t components
bigcommerce · Aug 22, 2019 · 6e037c0 · 6e037c0
1 parent 2876c36
commit 6e037c0
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/src/app/checkout/CheckoutApp.tsx b/src/app/checkout/CheckoutApp.tsx
@@ -1,11 +1,11 @@
 import { createCheckoutService, createEmbeddedCheckoutMessenger } from '@bigcommerce/checkout-sdk';
-import { createRequestSender } from '@bigcommerce/request-sender';
+import { createRequestSender, Response } from '@bigcommerce/request-sender';
 import React, { Component } from 'react';
 import ReactModal from 'react-modal';
 
-import { StepTrackerFactory } from '../analytics';
+import { StepTracker, StepTrackerFactory } from '../analytics';
 import { ErrorLoggerFactory, ErrorLoggingBoundary } from '../common/error';
-import { NewsletterService } from '../customer';
+import { NewsletterService, NewsletterSubscribeData } from '../customer';
 import { createEmbeddedCheckoutStylesheet, createEmbeddedCheckoutSupport } from '../embeddedCheckout';
 import { getLanguageService, LocaleProvider } from '../locale';
 import { FlashMessage } from '../ui/alert';
@@ -44,15 +44,23 @@ export default class CheckoutApp extends Component<CheckoutAppProps> {
                         <Checkout
                             { ...this.props }
                             createEmbeddedMessenger={ createEmbeddedCheckoutMessenger }
-                            createStepTracker={ () => this.stepTrackerFactory.createTracker() }
+                            createStepTracker={ this.createStepTracker }
                             embeddedStylesheet={ this.embeddedStylesheet }
                             embeddedSupport={ this.embeddedSupport }
                             errorLogger={ this.errorLogger }
-                            subscribeToNewsletter={ data => this.newsletterService.subscribe(data) }
+                            subscribeToNewsletter={ this.subscribeToNewsletter }
                         />
                     </CheckoutProvider>
                 </LocaleProvider>
             </ErrorLoggingBoundary>
         );
     }
+
+    private createStepTracker: () => StepTracker = () => {
+        return this.stepTrackerFactory.createTracker();
+    };
+
+    private subscribeToNewsletter: (data: NewsletterSubscribeData) => Promise<Response> = data => {
+        return this.newsletterService.subscribe(data);
+    };
 }
diff --git a/src/app/checkout/CheckoutStep.tsx b/src/app/checkout/CheckoutStep.tsx
@@ -99,13 +99,7 @@ export default class CheckoutStep extends Component<CheckoutStepProps> {
                     }
 
                     return <CSSTransition
-                        addEndListener={ (node, done) => {
-                            node.addEventListener('transitionend', ({ target }) => {
-                                if (target === node) {
-                                    done();
-                                }
-                            });
-                        } }
+                        addEndListener={ this.handleTransitionEnd }
                         classNames="checkout-view-content"
                         timeout={ {} }
                         in={ isActive }
@@ -199,4 +193,12 @@ export default class CheckoutStep extends Component<CheckoutStepProps> {
 
         return this.timeoutDelay;
     }
+
+    private handleTransitionEnd: (node: HTMLElement, done: () => void) => void = (node, done) => {
+        node.addEventListener('transitionend', ({ target }) => {
+            if (target === node) {
+                done();
+            }
+        });
+    };
 }
diff --git a/src/app/customer/NewsletterService.ts b/src/app/customer/NewsletterService.ts
@@ -1,11 +1,16 @@
 import { RequestSender, Response } from '@bigcommerce/request-sender';
 
+export interface NewsletterSubscribeData {
+    email: string;
+    firstName?: string;
+}
+
 export default class NewsletterService {
     constructor(
         private requestSender: RequestSender
     ) {}
 
-    subscribe(data: { email: string; firstName?: string }): Promise<Response> {
+    subscribe(data: NewsletterSubscribeData): Promise<Response> {
         return this.requestSender.post('/subscribe.php', {
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',

diff --git a/src/app/customer/index.ts b/src/app/customer/index.ts
@@ -2,6 +2,7 @@ import { CustomerProps } from './Customer';
 import { CustomerInfoProps, CustomerSignOutEvent } from './CustomerInfo';
 import { GuestFormProps, GuestFormValues } from './GuestForm';
 import { LoginFormProps, LoginFormValues } from './LoginForm';
+import { NewsletterSubscribeData } from './NewsletterService';
 
 export type CustomerInfoProps = CustomerInfoProps;
 export type CustomerProps = CustomerProps;
@@ -10,6 +11,7 @@ export type GuestFormProps = GuestFormProps;
 export type GuestFormValues = GuestFormValues;
 export type LoginFormProps = LoginFormProps;
 export type LoginFormValues = LoginFormValues;
+export type NewsletterSubscribeData = NewsletterSubscribeData;
 
 export { default as CustomerViewType } from './CustomerViewType';
 export { default as CustomerInfo } from './CustomerInfo';