feat(payment): add checkout locale to Stripe elements

Author: PavlenkoM

packages/core/src/cart/cart-selector.ts

@@ -12,6 +12,7 @@ export default interface CartSelector {
     getCartOrThrow(): Cart;
     getLoadError(): Error | undefined;
     isLoading(): boolean;
+    getLocale(): string | undefined;
 }
 
 export type CartSelectorFactory = (state: CartState) => CartSelector;
@@ -36,12 +37,18 @@ export function createCartSelectorFactory() {
         (status) => () => status,
     );
 
+    const getLocale = createSelector(
+        (state: CartState) => state.data?.locale,
+        (data) => () => data,
+    );
+
     return memoizeOne((state: CartState = DEFAULT_STATE): CartSelector => {
         return {
             getCart: getCart(state),
             getCartOrThrow: getCartOrThrow(state),
             getLoadError: getLoadError(state),
             isLoading: isLoading(state),
+            getLocale: getLocale(state),
         };
     });
 }

packages/core/src/cart/cart.ts

@@ -35,4 +35,5 @@ export default interface Cart {
     createdTime: string;
     updatedTime: string;
     source?: CartSource;
+    locale?: string;
 }

packages/core/src/payment-integration/create-payment-integration-selectors.ts

@@ -5,7 +5,7 @@ import { cloneResult as clone } from '../common/utility';
 
 export default function createPaymentIntegrationSelectors({
     billingAddress: { getBillingAddress, getBillingAddressOrThrow },
-    cart: { getCart, getCartOrThrow },
+    cart: { getCart, getCartOrThrow, getLocale: getCartLocale },
     checkout: { getCheckout, getCheckoutOrThrow, getOutstandingBalance },
     config: {
         getContextConfig,
@@ -50,6 +50,7 @@ export default function createPaymentIntegrationSelectors({
     return {
         getHost: clone(getHost),
         getLocale: clone(getLocale),
+        getCartLocale: clone(getCartLocale),
         getBillingAddress: clone(getBillingAddress),
         getBillingAddressOrThrow: clone(getBillingAddressOrThrow),
         getCart: clone(getCart),

packages/core/src/shipping/strategies/stripe-upe/stripe-upe-shipping-strategy.spec.ts

@@ -142,7 +142,7 @@ describe('StripeUPEShippingStrategy', () => {
                 getStripeUPE(),
             );
 
-            jest.spyOn(store.getState().config, 'getLocale').mockReturnValue('en');
+            jest.spyOn(store.getState().cart, 'getLocale').mockReturnValue('en');
         });
 
         afterEach(() => {

packages/core/src/shipping/strategies/stripe-upe/stripe-upe-shipping-strategy.ts

@@ -96,7 +96,7 @@ export default class StripeUPEShippingStrategy implements ShippingStrategy {
 
         this._stripeUPEClient = await this._stripeUPEScriptLoader.getStripeClient(
             initializationData,
-            state.config.getLocale(),
+            state.cart.getLocale(),
             STRIPE_UPE_CLIENT_BETAS,
             STRIPE_UPE_CLIENT_API_VERSION,
         );

packages/payment-integration-api/src/payment-integration-selectors.ts

@@ -17,6 +17,7 @@ import { Consignment, ShippingAddress } from './shipping';
 export default interface PaymentIntegrationSelectors {
     getHost(): string | undefined;
     getLocale(): string | undefined;
+    getCartLocale(): string | undefined;
 
     getBillingAddress(): BillingAddress | undefined;
     getBillingAddressOrThrow(): BillingAddress;

packages/payment-integrations-test-utils/src/test-utils/payment-integration-service.mock.ts

@@ -32,6 +32,7 @@ const state = {
     getCustomerOrThrow: jest.fn(() => getCustomer()),
     getHost: jest.fn(),
     getLocale: jest.fn(),
+    getCartLocale: jest.fn(),
     getOrder: jest.fn(() => getOrder()),
     getOrderOrThrow: jest.fn(() => getOrder()),
     getOrderMeta: jest.fn(() => getOrderMeta()),

packages/stripe-integration/src/stripe-ocs/stripe-link-v2-button-strategy.spec.ts

@@ -135,7 +135,7 @@ describe('StripeLinkV2ButtonStrategy', () => {
         jest.spyOn(paymentIntegrationService.getState(), 'getPaymentMethodOrThrow').mockReturnValue(
             stripePaymentMethod,
         );
-        jest.spyOn(paymentIntegrationService.getState(), 'getLocale').mockReturnValue('en');
+        jest.spyOn(paymentIntegrationService.getState(), 'getCartLocale').mockReturnValue('en');
         jest.spyOn(stripeIntegrationService, 'isPaymentCompleted').mockReturnValue(
             Promise.resolve(false),
         );

packages/stripe-integration/src/stripe-ocs/stripe-link-v2-button-strategy.ts

@@ -92,7 +92,7 @@ export default class StripeLinkV2ButtonStrategy implements CheckoutButtonStrateg
         this._captureMethod = captureMethod;
         this._stripeClient = await this.scriptLoader.getStripeClient(
             initializationData,
-            state.getLocale(),
+            state.getCartLocale(),
         );
 
         await this.paymentIntegrationService.loadDefaultCheckout();

packages/stripe-integration/src/stripe-ocs/stripe-link-v2-customer-strategy.spec.ts

@@ -135,7 +135,7 @@ describe('StripeLinkV2CustomerStrategy', () => {
         jest.spyOn(paymentIntegrationService.getState(), 'getPaymentMethodOrThrow').mockReturnValue(
             stripePaymentMethod,
         );
-        jest.spyOn(paymentIntegrationService.getState(), 'getLocale').mockReturnValue('en');
+        jest.spyOn(paymentIntegrationService.getState(), 'getCartLocale').mockReturnValue('en');
         jest.spyOn(stripeIntegrationService, 'isPaymentCompleted').mockReturnValue(
             Promise.resolve(false),
         );