perf(billing): CHECKOUT-4352 Optimize rendering of static address

bigcommerce · Aug 21, 2019 · dab9d1c · dab9d1c
1 parent 2876c36
commit dab9d1c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 57 deletions.
diff --git a/src/app/address/StaticAddress.tsx b/src/app/address/StaticAddress.tsx
@@ -1,9 +1,8 @@
-import { Address } from '@bigcommerce/checkout-sdk';
+import { Address, Country, FormField } from '@bigcommerce/checkout-sdk';
 import { isEmpty } from 'lodash';
-import React, { FunctionComponent } from 'react';
+import React, { memo, FunctionComponent } from 'react';
 
 import { withCheckout, CheckoutContextProps } from '../checkout';
-import { LocalizedGeography } from '../geography';
 
 import isValidAddress from './isValidAddress';
 import localizeAddress from './localizeAddress';
@@ -16,15 +15,22 @@ export interface StaticAddressProps {
 }
 
 interface WithCheckoutStaticAddressProps {
-    isValid: boolean;
-    localizedAddress: Address & LocalizedGeography;
+    countries?: Country[];
+    fields?: FormField[];
 }
 
 const StaticAddress: FunctionComponent<StaticAddressProps & WithCheckoutStaticAddressProps> = ({
-    isValid,
-    localizedAddress: address,
-}) => (
-    !isValid ? null : <div className="vcard checkout-address--static">
+    countries,
+    fields,
+    address: addressWithoutLocalization,
+}) => {
+    const address = localizeAddress(addressWithoutLocalization, countries);
+    const isValid = !fields ? !isEmpty(address) : isValidAddress(
+        address,
+        fields.filter(field => !field.custom)
+    );
+
+    return !isValid ? null : <div className="vcard checkout-address--static">
         {
             (address.firstName || address.lastName) &&
             <p className="fn address-entry">
@@ -71,8 +77,8 @@ const StaticAddress: FunctionComponent<StaticAddressProps & WithCheckoutStaticAd
                 }
             </p>
         </div>
-    </div>
-);
+    </div>;
+};
 
 export function mapToStaticAddressProps(
     context: CheckoutContextProps,
@@ -88,31 +94,14 @@ export function mapToStaticAddressProps(
         },
     } = context;
 
-    let isValid: boolean;
-
-    if (type === AddressType.Billing) {
-        isValid = isValidAddress(
-            address,
-            getBillingAddressFields(address.countryCode)
-                .filter(field => !field.custom)
-        );
-    } else if (type === AddressType.Shipping) {
-        isValid = isValidAddress(
-            address,
-            getShippingAddressFields(address.countryCode)
-                .filter(field => !field.custom)
-        );
-    } else {
-        isValid = !isEmpty(address);
-    }
-
     return {
-        isValid,
-        localizedAddress: localizeAddress(
-            address,
-            getBillingCountries()
-        ),
+        countries: getBillingCountries(),
+        fields: type === AddressType.Billing ?
+            getBillingAddressFields(address.countryCode) :
+            type === AddressType.Shipping ?
+            getShippingAddressFields(address.countryCode) :
+            undefined,
     };
 }
 
-export default withCheckout(mapToStaticAddressProps)(StaticAddress);
+export default withCheckout(mapToStaticAddressProps)(memo(StaticAddress));
diff --git a/src/app/address/localizeAddress.ts b/src/app/address/localizeAddress.ts
@@ -1,7 +1,6 @@
 import { Address } from '@bigcommerce/checkout-sdk';
 import { find, isEmpty } from 'lodash';
 
-import { memoize } from '../common/utility';
 import { Country, LocalizedGeography } from '../geography';
 
 const localizeAddress = <T1 extends Address>(
@@ -19,4 +18,4 @@ const localizeAddress = <T1 extends Address>(
     };
 };
 
-export default memoize(localizeAddress);
+export default localizeAddress;
diff --git a/src/app/billing/StaticBillingAddress.tsx b/src/app/billing/StaticBillingAddress.tsx
@@ -1,24 +1,33 @@
-import { Address } from '@bigcommerce/checkout-sdk';
-import React, { FunctionComponent } from 'react';
+import { Address, CheckoutPayment, FormField } from '@bigcommerce/checkout-sdk';
+import React, { memo, FunctionComponent } from 'react';
 
 import { isValidAddress, AddressType, StaticAddress } from '../address';
 import { withCheckout, CheckoutContextProps } from '../checkout';
-import { withLanguage, WithLanguageProps } from '../locale';
+import { EMPTY_ARRAY } from '../common/utility';
+import { TranslatedString } from '../locale';
 
 export interface StaticBillingAddressProps {
     address: Address;
 }
 
 interface WithCheckoutStaticBillingAddressProps {
-    message?: string;
+    fields: FormField[];
+    payments?: CheckoutPayment[];
 }
 
-const StaticBillingAddress: FunctionComponent<StaticBillingAddressProps & WithCheckoutStaticBillingAddressProps> = ({
+const StaticBillingAddress: FunctionComponent<
+    StaticBillingAddressProps &
+    WithCheckoutStaticBillingAddressProps
+> = ({
     address,
-    message,
+    fields,
+    payments = EMPTY_ARRAY,
 }) => {
-    if (message) {
-        return <p>{ message }</p>;
+    if (isValidAddress(address, fields.filter(field => !field.custom)) &&
+        payments.find(payment => payment.providerId === 'amazon')) {
+        return (
+            <p><TranslatedString id="billing.billing_address_amazon" /></p>
+        );
     }
 
     return (
@@ -31,7 +40,7 @@ const StaticBillingAddress: FunctionComponent<StaticBillingAddressProps & WithCh
 
 export function mapToStaticBillingAddressProps(
     { checkoutState }: CheckoutContextProps,
-    { address, language }: StaticBillingAddressProps & WithLanguageProps
+    { address }: StaticBillingAddressProps
 ): WithCheckoutStaticBillingAddressProps | null {
     const {
         data: {
@@ -40,19 +49,12 @@ export function mapToStaticBillingAddressProps(
         },
     } = checkoutState;
 
-    let message: string | undefined;
-
-    if (isValidAddress(address, getBillingAddressFields(address.countryCode).filter(field => !field.custom))) {
-        const { payments = [] } = getCheckout() || {};
-
-        if (payments.find(payment => payment.providerId === 'amazon')) {
-            message = language.translate('billing.billing_address_amazon');
-        }
-    }
+    const checkout = getCheckout();
 
     return {
-        message,
+        fields: getBillingAddressFields(address.countryCode),
+        payments: checkout && checkout.payments,
     };
 }
 
-export default withLanguage(withCheckout(mapToStaticBillingAddressProps)(StaticBillingAddress));
+export default withCheckout(mapToStaticBillingAddressProps)(memo(StaticBillingAddress));