feat(payment): STRIPE-52 Auto-Select Address and mount shipping component for Stripe Link

Author: AlanMunozN

packages/core/src/app/billing/Billing.spec.tsx

@@ -188,4 +188,16 @@ describe('Billing Component', () => {
         expect(defaultProps.onUnhandledError)
             .toHaveBeenCalledWith(error);
     });
+
+    it('calls onUnhandledError if onReady was failed', async () => {
+        defaultProps.onReady = jest.fn(() => {
+            throw new Error();
+        });
+
+        component = mount(<ComponentTest { ...defaultProps } />);
+
+        await new Promise(resolve => process.nextTick(resolve));
+
+        expect(defaultProps.onUnhandledError).toHaveBeenCalledWith(expect.any(Error));
+    });
 });

packages/core/src/app/checkout/Checkout.tsx

@@ -376,6 +376,7 @@ class Checkout extends Component<CheckoutProps & WithCheckoutProps & WithLanguag
                         onSignIn={ this.handleShippingSignIn }
                         onToggleMultiShipping={ this.handleToggleMultiShipping }
                         onUnhandledError={ this.handleUnhandledError }
+                        step={ step }
                     />
                 </LazyContainer>
             </CheckoutStep>

packages/core/src/app/shipping/RemoteShippingAddress.spec.tsx

@@ -18,6 +18,7 @@ describe('RemoteShippingAddress Component', () => {
         initialize: jest.fn(),
         deinitialize: jest.fn(),
         onFieldChange: jest.fn(),
+        onUnhandledError: jest.fn(),
     };
 
     const initialFormikValues = {
@@ -79,4 +80,22 @@ describe('RemoteShippingAddress Component', () => {
 
         expect(defaultProps.onFieldChange).toHaveBeenCalledWith(inputFieldName, 'foo');
     });
+
+    it('calls onUnhandledError if initialize was failed', () => {
+        defaultProps.initialize = jest.fn(() => { throw new Error(); });
+
+        shallow(<RemoteShippingAddress { ...defaultProps } />);
+
+        expect(defaultProps.onUnhandledError).toHaveBeenCalledWith(expect.any(Error));
+    });
+
+    it('calls onUnhandledError if deinitialize was failed', async () => {
+        defaultProps.deinitialize = jest.fn(() => {
+            throw new Error();
+        });
+
+        shallow(<RemoteShippingAddress { ...defaultProps } />).unmount();
+
+        expect(defaultProps.onUnhandledError).toHaveBeenCalledWith(expect.any(Error));
+    });
 });

packages/core/src/app/shipping/Shipping.spec.tsx

@@ -7,6 +7,7 @@ import { getCart } from '../cart/carts.mock';
 import { getPhysicalItem } from '../cart/lineItem.mock';
 import { CheckoutProvider } from '../checkout';
 import { getCheckout } from '../checkout/checkouts.mock';
+import CheckoutStepType from '../checkout/CheckoutStepType';
 import { getStoreConfig } from '../config/config.mock';
 import { getCustomer } from '../customer/customers.mock';
 import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale';
@@ -36,6 +37,13 @@ describe('Shipping Component', () => {
             onToggleMultiShipping: jest.fn(),
             cartHasChanged: false,
             onSignIn: jest.fn(),
+            step: { isActive: true,
+                isComplete: true,
+                isEditable: true,
+                isRequired: true,
+                type: CheckoutStepType.Shipping },
+            isStripeLinkEnabled: true,
+            isStripeLoading: false,
             navigateNextStep: jest.fn(),
             onUnhandledError: jest.fn(),
         };
@@ -104,6 +112,18 @@ describe('Shipping Component', () => {
             .toHaveBeenCalled();
     });
 
+    it('loads shipping data when component is mounted and stripeupe is enable', () => {
+        jest.spyOn(checkoutState.data, 'getCustomer')
+            .mockReturnValue({ ...getCustomer(), email: '' ,addresses: [] });
+        mount(<ComponentTest { ...defaultProps }/>);
+
+        expect(checkoutService.loadShippingAddressFields)
+            .toHaveBeenCalled();
+
+        expect(checkoutService.loadShippingOptions)
+            .toHaveBeenCalled();
+    });
+
     it('triggers callback when shipping data is loaded', async () => {
         const handleReady = jest.fn();
 

packages/core/src/app/shipping/Shipping.tsx

@@ -5,7 +5,9 @@ import { createSelector } from 'reselect';
 
 import { isEqualAddress, mapAddressFromFormValues } from '../address';
 import { withCheckout, CheckoutContextProps } from '../checkout';
+import CheckoutStepStatus from '../checkout/CheckoutStepStatus';
 import { EMPTY_ARRAY } from '../common/utility';
+import { PaymentMethodId } from '../payment/paymentMethod';
 import { LoadingOverlay } from '../ui/loading';
 
 import { UnassignItemError } from './errors';
@@ -20,6 +22,7 @@ export interface ShippingProps {
     isBillingSameAsShipping: boolean;
     cartHasChanged: boolean;
     isMultiShippingMode: boolean;
+    step: CheckoutStepStatus;
     onCreateAccount(): void;
     onToggleMultiShipping(): void;
     onReady?(): void;
@@ -40,12 +43,15 @@ export interface WithCheckoutShippingProps {
     isGuest: boolean;
     isInitializing: boolean;
     isLoading: boolean;
+    isStripeLoading: boolean;
+    isStripeAutoStep: boolean;
     isShippingStepPending: boolean;
     methodId?: string;
     shippingAddress?: Address;
     shouldShowAddAddressInCheckout: boolean;
     shouldShowMultiShipping: boolean;
     shouldShowOrderComments: boolean;
+    isStripeLinkEnabled?: boolean;
     assignItem(consignment: ConsignmentAssignmentRequestBody): Promise<CheckoutSelectors>;
     deinitializeShippingMethod(options: ShippingRequestOptions): Promise<CheckoutSelectors>;
     deleteConsignments(): Promise<Address | undefined>;
@@ -59,10 +65,13 @@ export interface WithCheckoutShippingProps {
     updateBillingAddress(address: Partial<Address>): Promise<CheckoutSelectors>;
     updateCheckout(payload: CheckoutRequestBody): Promise<CheckoutSelectors>;
     updateShippingAddress(address: Partial<Address>): Promise<CheckoutSelectors>;
+    loadPaymentMethods(): Promise<CheckoutSelectors>;
 }
 
 interface ShippingState {
     isInitializing: boolean;
+    isStripeLoading: boolean;
+    isStripeAutoStep: boolean;
 }
 
 class Shipping extends Component<ShippingProps & WithCheckoutShippingProps, ShippingState> {
@@ -71,13 +80,17 @@ class Shipping extends Component<ShippingProps & WithCheckoutShippingProps, Ship
 
         this.state = {
             isInitializing: true,
+            isStripeLoading: true,
+            isStripeAutoStep: false,
+
         };
     }
 
     async componentDidMount(): Promise<void> {
         const {
             loadShippingAddressFields,
             loadShippingOptions,
+            loadPaymentMethods,
             onReady = noop,
             onUnhandledError = noop,
         } = this.props;
@@ -89,6 +102,7 @@ class Shipping extends Component<ShippingProps & WithCheckoutShippingProps, Ship
             ]);
 
             onReady();
+            await loadPaymentMethods();
         } catch (error) {
             onUnhandledError(error);
         } finally {
@@ -108,43 +122,106 @@ class Shipping extends Component<ShippingProps & WithCheckoutShippingProps, Ship
             deinitializeShippingMethod,
             isMultiShippingMode,
             onToggleMultiShipping,
+            isStripeLinkEnabled,
+            step,
             ...shippingFormProps
         } = this.props;
 
         const {
             isInitializing,
+            isStripeLoading,
+            isStripeAutoStep,
         } = this.state;
 
-        return (
-            <div className="checkout-form">
-                <ShippingHeader
-                    isGuest={ isGuest }
-                    isMultiShippingMode={ isMultiShippingMode }
-                    onMultiShippingChange={ this.handleMultiShippingModeSwitch }
-                    shouldShowMultiShipping={ shouldShowMultiShipping }
-                />
-
-                <LoadingOverlay
-                    isLoading={ isInitializing }
-                    unmountContentWhenLoading
-                >
-                    <ShippingForm
-                        { ...shippingFormProps }
-                        addresses={ customer.addresses }
-                        deinitialize={ deinitializeShippingMethod }
-                        initialize={ initializeShippingMethod }
-                        isBillingSameAsShipping = { isBillingSameAsShipping }
+        const renderShipping = () => {
+            if (isStripeLinkEnabled && !customer.email) {
+                return <div className="checkout-form">
+                    <div style={ {display: isStripeAutoStep ? 'none' : undefined,} }>
+                    <LoadingOverlay
+                        hideContentWhenLoading
+                        isLoading={ isStripeLoading }
+                    >
+                        <ShippingHeader
+                            isGuest={ isGuest }
+                            isMultiShippingMode={ isMultiShippingMode }
+                            onMultiShippingChange={ this.handleMultiShippingModeSwitch }
+                            shouldShowMultiShipping={ shouldShowMultiShipping }
+                        />
+
+                        <LoadingOverlay
+                            isLoading={ isInitializing }
+                            unmountContentWhenLoading
+                        >
+                            <ShippingForm
+                                { ...shippingFormProps }
+                                addresses={ customer.addresses }
+                                customerEmail={ customer.email }
+                                deinitialize={ deinitializeShippingMethod }
+                                initialize={ initializeShippingMethod }
+                                isBillingSameAsShipping = { isBillingSameAsShipping }
+                                isGuest={ isGuest }
+                                isMultiShippingMode={ isMultiShippingMode }
+                                isStripeAutoStep={ this.handleIsAutoStep }
+                                isStripeLinkEnabled={ isStripeLinkEnabled }
+                                isStripeLoading={ this.handleIsStripeLoading }
+                                onMultiShippingSubmit={ this.handleMultiShippingSubmit }
+                                onSingleShippingSubmit={ this.handleSingleShippingSubmit }
+                                onUseNewAddress={ this.handleUseNewAddress }
+                                shouldShowSaveAddress={ !isGuest }
+                                step={ step }
+                                updateAddress={ updateShippingAddress }
+                            />
+                        </LoadingOverlay>
+                    </LoadingOverlay>
+                    </div>
+                </div>
+            }
+
+            return <div className="checkout-form">
+                    <ShippingHeader
                         isGuest={ isGuest }
                         isMultiShippingMode={ isMultiShippingMode }
-                        onMultiShippingSubmit={ this.handleMultiShippingSubmit }
-                        onSingleShippingSubmit={ this.handleSingleShippingSubmit }
-                        onUseNewAddress={ this.handleUseNewAddress }
-                        shouldShowSaveAddress={ !isGuest }
-                        updateAddress={ updateShippingAddress }
+                        onMultiShippingChange={ this.handleMultiShippingModeSwitch }
+                        shouldShowMultiShipping={ shouldShowMultiShipping }
                     />
-                </LoadingOverlay>
+
+                    <LoadingOverlay
+                        isLoading={ isInitializing }
+                        unmountContentWhenLoading
+                    >
+                        <ShippingForm
+                            { ...shippingFormProps }
+                            addresses={ customer.addresses }
+                            customerEmail={ customer.email }
+                            deinitialize={ deinitializeShippingMethod }
+                            initialize={ initializeShippingMethod }
+                            isBillingSameAsShipping = { isBillingSameAsShipping }
+                            isGuest={ isGuest }
+                            isMultiShippingMode={ isMultiShippingMode }
+                            isStripeAutoStep={ this.handleIsAutoStep }
+                            isStripeLinkEnabled={ isStripeLinkEnabled }
+                            isStripeLoading={ this.handleIsStripeLoading }
+                            onMultiShippingSubmit={ this.handleMultiShippingSubmit }
+                            onSingleShippingSubmit={ this.handleSingleShippingSubmit }
+                            onUseNewAddress={ this.handleUseNewAddress }
+                            shouldShowSaveAddress={ !isGuest }
+                            step={ step }
+                            updateAddress={ updateShippingAddress }
+                        />
+                    </LoadingOverlay>
             </div>
-        );
+
+        }
+
+        return ( renderShipping() );
+    }
+
+    private handleIsStripeLoading: () => void = () => {
+        this.setState({ isStripeLoading: false });
+    }
+
+    private handleIsAutoStep: () => void = () => {
+        this.setState({ isStripeAutoStep: true });
     }
 
     private handleMultiShippingModeSwitch: () => void = async () => {
@@ -284,6 +361,7 @@ const deleteConsignmentsSelector = createSelector(
     }
 );
 
+// tslint:disable-next-line:cyclomatic-complexity
 export function mapToShippingProps({
     checkoutService,
     checkoutState,
@@ -299,6 +377,7 @@ export function mapToShippingProps({
             getBillingAddress,
             getShippingAddressFields,
             getShippingCountries,
+            getPaymentMethod,
         },
         statuses: {
             isShippingStepPending,
@@ -350,6 +429,11 @@ export function mapToShippingProps({
         shippableItemsCount < 50
     );
     const countriesWithAutocomplete = ['US', 'CA', 'AU', 'NZ'];
+    const stripeUpe = getPaymentMethod('card', PaymentMethodId.StripeUPE);
+    const linkEnabled = stripeUpe?.initializationData.enableLink || false;
+    const stripeUpeSupportedCurrency = cart?.currency.code === 'USD' || false;
+    const stripeUpeLinkEnabled = linkEnabled && stripeUpeSupportedCurrency;
+
 
     if (features['CHECKOUT-4183.checkout_google_address_autocomplete_uk']) {
         countriesWithAutocomplete.push('GB');
@@ -375,6 +459,8 @@ export function mapToShippingProps({
         isGuest: customer.isGuest,
         isInitializing: isLoadingShippingCountries() || isLoadingShippingOptions(),
         isLoading,
+        isStripeLoading: false,
+        isStripeAutoStep: false,
         isShippingStepPending: isShippingStepPending(),
         loadShippingAddressFields: checkoutService.loadShippingAddressFields,
         loadShippingOptions: checkoutService.loadShippingOptions,
@@ -388,6 +474,8 @@ export function mapToShippingProps({
         updateBillingAddress: checkoutService.updateBillingAddress,
         updateCheckout: checkoutService.updateCheckout,
         updateShippingAddress: checkoutService.updateShippingAddress,
+        isStripeLinkEnabled: stripeUpeLinkEnabled,
+        loadPaymentMethods: checkoutService.loadPaymentMethods,
     };
 }