feat(payment): PAYPAL-5758 update PaypalCommerceFastlaneShippingStrategy using paypal-utils package

Author: bc-nick

packages/core/src/shipping/create-shipping-strategy-registry.ts

@@ -8,10 +8,7 @@ import {
     BraintreeScriptLoader,
     BraintreeSDKVersionManager,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
-import {
-    createPayPalCommerceFastlaneUtils,
-    createPayPalCommerceSdk,
-} from '@bigcommerce/checkout-sdk/paypal-commerce-utils';
+import { createPayPalFastlaneUtils, createPaypalSdk } from '@bigcommerce/checkout-sdk/paypal-utils';
 import { StripeScriptLoader } from '@bigcommerce/checkout-sdk/stripe-utils';
 
 import { BillingAddressActionCreator, BillingAddressRequestSender } from '../billing';
@@ -110,8 +107,8 @@ export default function createShippingStrategyRegistry(
                 consignmentActionCreator,
                 paymentMethodActionCreator,
                 new PaymentProviderCustomerActionCreator(),
-                createPayPalCommerceSdk(),
-                createPayPalCommerceFastlaneUtils(),
+                createPaypalSdk(),
+                createPayPalFastlaneUtils(),
             ),
     );
 

packages/core/src/shipping/strategies/paypal-commerce/paypal-commerce-fastlane-shipping-strategy.spec.ts

@@ -9,17 +9,17 @@ import {
     getShippingAddress,
 } from '@bigcommerce/checkout-sdk/payment-integrations-test-utils';
 import {
-    createPayPalCommerceFastlaneUtils,
-    createPayPalCommerceSdk,
-    getPayPalCommerceAcceleratedCheckoutPaymentMethod,
+    createPayPalFastlaneUtils,
+    createPaypalSdk,
+    getPayPalAcceleratedCheckoutPaymentMethod,
     getPayPalFastlane,
     getPayPalFastlaneAuthenticationResultMock,
     getPayPalFastlaneSdk,
-    PayPalCommerceFastlaneUtils,
-    PayPalCommerceSdk,
     PayPalFastlaneAuthenticationState,
     PayPalFastlaneSdk,
-} from '@bigcommerce/checkout-sdk/paypal-commerce-utils';
+    PayPalFastlaneUtils,
+    PaypalSdk,
+} from '@bigcommerce/checkout-sdk/paypal-utils';
 
 import { BillingAddress, BillingAddressActionCreator } from '../../../billing';
 import BillingAddressRequestSender from '../../../billing/billing-address-request-sender';
@@ -48,8 +48,8 @@ describe('PayPalCommerceFastlaneShippingStrategy', () => {
     let paymentMethod: PaymentMethod;
     let paymentProviderCustomerActionCreator: PaymentProviderCustomerActionCreator;
     let paypalFastlaneSdk: PayPalFastlaneSdk;
-    let paypalCommerceSdk: PayPalCommerceSdk;
-    let paypalCommerceFastlaneUtils: PayPalCommerceFastlaneUtils;
+    let paypalCommerceSdk: PaypalSdk;
+    let paypalCommerceFastlaneUtils: PayPalFastlaneUtils;
     let store: CheckoutStore;
     let storeConfig: StoreConfig;
     let strategy: PayPalCommerceFastlaneShippingStrategy;
@@ -98,7 +98,7 @@ describe('PayPalCommerceFastlaneShippingStrategy', () => {
         cart = getCart();
         customer = { ...getCustomer(), isGuest: true };
         storeConfig = getConfig().storeConfig;
-        paymentMethod = getPayPalCommerceAcceleratedCheckoutPaymentMethod();
+        paymentMethod = getPayPalAcceleratedCheckoutPaymentMethod();
         paypalFastlaneSdk = getPayPalFastlaneSdk();
 
         store = createCheckoutStore();
@@ -114,8 +114,8 @@ describe('PayPalCommerceFastlaneShippingStrategy', () => {
             new PaymentMethodRequestSender(requestSender),
         );
         paymentProviderCustomerActionCreator = new PaymentProviderCustomerActionCreator();
-        paypalCommerceSdk = createPayPalCommerceSdk();
-        paypalCommerceFastlaneUtils = createPayPalCommerceFastlaneUtils();
+        paypalCommerceSdk = createPaypalSdk();
+        paypalCommerceFastlaneUtils = createPayPalFastlaneUtils();
 
         strategy = new PayPalCommerceFastlaneShippingStrategy(
             store,

packages/core/src/shipping/strategies/paypal-commerce/paypal-commerce-fastlane-shipping-strategy.ts

@@ -3,12 +3,12 @@ import {
     getFastlaneStyles,
     isPayPalCommerceAcceleratedCheckoutCustomer,
     isPayPalFastlaneCustomer,
-    PayPalCommerceFastlaneUtils,
-    PayPalCommerceInitializationData,
-    PayPalCommerceSdk,
     PayPalFastlaneAuthenticationState,
     PayPalFastlaneStylesOption,
-} from '@bigcommerce/checkout-sdk/paypal-commerce-utils';
+    PayPalFastlaneUtils,
+    PayPalInitializationData,
+    PaypalSdk,
+} from '@bigcommerce/checkout-sdk/paypal-utils';
 
 import { AddressRequestBody } from '../../../address';
 import { BillingAddressActionCreator } from '../../../billing';
@@ -27,8 +27,8 @@ export default class PayPalCommerceFastlaneShippingStrategy implements ShippingS
         private _consignmentActionCreator: ConsignmentActionCreator,
         private _paymentMethodActionCreator: PaymentMethodActionCreator,
         private _paymentProviderCustomerActionCreator: PaymentProviderCustomerActionCreator,
-        private _paypalCommerceSdk: PayPalCommerceSdk,
-        private _paypalCommerceFastlaneUtils: PayPalCommerceFastlaneUtils,
+        private _paypalCommerceSdk: PaypalSdk,
+        private _paypalCommerceFastlaneUtils: PayPalFastlaneUtils,
     ) {}
 
     updateAddress(
@@ -91,7 +91,7 @@ export default class PayPalCommerceFastlaneShippingStrategy implements ShippingS
 
     private async _getPayPalPaymentMethodOrThrow(
         methodId: string,
-    ): Promise<PaymentMethod<PayPalCommerceInitializationData>> {
+    ): Promise<PaymentMethod<PayPalInitializationData>> {
         const state = this._store.getState();
         const paymentMethod = state.paymentMethods.getPaymentMethod(methodId);
 

packages/paypal-utils/src/mocks/get-paypal-payment-method.mock.ts

@@ -48,6 +48,7 @@ export default function getPayPalPaymentMethod(): PaymentMethod {
             isPayPalCommerceAnalyticsV2Enabled: false,
             isPayPalCreditAvailable: false,
             isVenmoEnabled: false,
+            isDeveloperModeApplicable: false,
             shouldRenderFields: true,
             shouldRunAcceleratedCheckout: false,
             isHostedCheckoutEnabled: false,

packages/paypal-utils/src/paypal-integration-service.ts

@@ -212,9 +212,15 @@ export default class PayPalIntegrationService {
 
         const selectedShippingOption = selectedShippingOptionId
             ? availableShippingOptions.find((option) => option.id === selectedShippingOptionId)
-            : availableShippingOptions.find(
-                  (option) => option.id === consignment.selectedShippingOption?.id,
-              );
+            : availableShippingOptions.find((option) => {
+                  if (consignment.selectedShippingOption) {
+                      const shippingOptionId = consignment.selectedShippingOption.id;
+
+                      return option.id === shippingOptionId;
+                  }
+
+                  return false;
+              });
 
         const shippingOptionToSelect =
             selectedShippingOption || recommendedShippingOption || availableShippingOptions[0];
@@ -293,8 +299,8 @@ export default class PayPalIntegrationService {
      * Buttons style methods
      *
      */
-    getValidButtonStyle(style?: PayPalButtonStyleOptions): PayPalButtonStyleOptions {
-        const { color, height, label, shape } = style || {};
+    getValidButtonStyle(style: PayPalButtonStyleOptions = {}): PayPalButtonStyleOptions {
+        const { color, height, label, shape } = style;
 
         const validStyles = {
             color: color && StyleButtonColor[color] ? color : undefined,

packages/paypal-utils/src/paypal-sdk-script-loader.ts

@@ -163,7 +163,7 @@ export default class PaypalSdkScriptLoader {
     ): PayPalSdkConfig {
         const { id, clientToken, initializationData } = paymentMethod;
 
-        if (!initializationData?.clientId) {
+        if (!initializationData || !initializationData.clientId) {
             throw new MissingDataError(MissingDataErrorType.MissingPaymentMethod);
         }