feat(payment): PAYPAL-4937 updates related to new requirements

Author: bc-nick

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

@@ -18,7 +18,6 @@ export default interface ConfigSelector {
     getHost(): string | undefined;
     getLocale(): string | undefined;
     getVariantIdentificationToken(): string | undefined;
-    getStorefrontJwtToken(): string | undefined;
     getLoadError(): Error | undefined;
     isLoading(): boolean;
 }
@@ -57,11 +56,6 @@ export function createConfigSelectorFactory(): ConfigSelectorFactory {
         },
     );
 
-    const getStorefrontJwtToken = createSelector(
-        (state: ConfigState) => state.meta && state.meta.storefrontJwtToken,
-        (data) => () => data,
-    );
-
     const getStoreConfig = createSelector(
         (state: ConfigState) => state.data,
         (_: ConfigState, { formState }: ConfigSelectorDependencies) => formState && formState.data,
@@ -126,7 +120,6 @@ export function createConfigSelectorFactory(): ConfigSelectorFactory {
                 getContextConfig: getContextConfig(state),
                 getExternalSource: getExternalSource(state),
                 getHost: getHost(state),
-                getStorefrontJwtToken: getStorefrontJwtToken(state),
                 getLocale: getLocale(state),
                 getVariantIdentificationToken: getVariantIdentificationToken(state),
                 getLoadError: getLoadError(state),

packages/core/src/config/config-state.ts

@@ -12,7 +12,6 @@ export interface ConfigMetaState {
     variantIdentificationToken?: string;
     host?: string;
     locale?: string;
-    storefrontJwtToken?: string;
 }
 
 export interface ConfigErrorsState {

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

@@ -14,7 +14,6 @@ export default function createPaymentIntegrationSelectors({
         getStoreConfig,
         getStoreConfigOrThrow,
         getConfig,
-        getStorefrontJwtToken,
     },
     consignments: { getConsignments, getConsignmentsOrThrow },
     countries: { getCountries },
@@ -81,7 +80,6 @@ export default function createPaymentIntegrationSelectors({
         getPaymentStatusOrThrow,
         getPaymentRedirectUrl,
         getPaymentRedirectUrlOrThrow,
-        getStorefrontJwtToken,
         getPaymentMethod: clone(getPaymentMethod),
         getPaymentMethodOrThrow: clone(getPaymentMethodOrThrow),
         getPaymentMethodsMeta: clone(getPaymentMethodsMeta),

packages/core/src/payment/headless-payment/headless-payment-request-options.ts

@@ -1,6 +1,5 @@
 import { RequestOptions } from '../../common/http-request';
 
 export default interface HeadlessPaymentRequestOptions extends RequestOptions {
-    body?: { query: string };
-    headers: { Authorization: string; [key: string]: string };
+    body: { entityId: string };
 }

packages/core/src/payment/payment-method-action-creator.spec.ts

@@ -48,10 +48,6 @@ describe('PaymentMethodActionCreator', () => {
         ).mockReturnValue(Promise.resolve(paymentMethodResponse));
 
         jest.spyOn(store.getState().cart, 'getCartOrThrow').mockReturnValue(getCheckout().cart);
-
-        jest.spyOn(store.getState().config, 'getStorefrontJwtToken').mockReturnValue(
-            'storefront_jwt_token',
-        );
     });
 
     describe('#loadPaymentMethods()', () => {
@@ -214,12 +210,7 @@ describe('PaymentMethodActionCreator', () => {
 
             expect(
                 paymentMethodRequestSender.loadPaymentWalletWithInitializationData,
-            ).toHaveBeenCalledWith(methodId, {
-                headers: {
-                    Authorization: `Bearer storefront_jwt_token`,
-                    'Content-Type': 'application/json',
-                },
-            });
+            ).toHaveBeenCalledWith(methodId, undefined, undefined);
         });
 
         it('loads payment wallet method with timeout', async () => {
@@ -237,13 +228,7 @@ describe('PaymentMethodActionCreator', () => {
 
             expect(
                 paymentMethodRequestSender.loadPaymentWalletWithInitializationData,
-            ).toHaveBeenCalledWith(methodId, {
-                headers: {
-                    Authorization: `Bearer storefront_jwt_token`,
-                    'Content-Type': 'application/json',
-                },
-                ...options,
-            });
+            ).toHaveBeenCalledWith(methodId, undefined, options);
         });
 
         it('emits actions if able to load payment wallet method', async () => {

packages/core/src/payment/payment-method-action-creator.ts

@@ -4,7 +4,6 @@ import { Observable, Observer } from 'rxjs';
 
 import { InternalCheckoutSelectors } from '../checkout';
 import { ActionOptions, cachableAction } from '../common/data-store';
-import { MissingDataError, MissingDataErrorType } from '../common/error/errors';
 import { RequestOptions } from '../common/http-request';
 
 import {
@@ -169,11 +168,7 @@ export default class PaymentMethodActionCreator {
         return (store) =>
             Observable.create((observer: Observer<LoadPaymentMethodAction>) => {
                 const state = store.getState();
-                const jwtToken = state.config.getStorefrontJwtToken();
-
-                if (!jwtToken) {
-                    throw new MissingDataError(MissingDataErrorType.MissingPaymentToken);
-                }
+                const host = state.config.getHost();
 
                 observer.next(
                     createAction(PaymentMethodActionType.LoadPaymentMethodRequested, undefined, {
@@ -182,13 +177,7 @@ export default class PaymentMethodActionCreator {
                 );
 
                 this._requestSender
-                    .loadPaymentWalletWithInitializationData(methodId, {
-                        headers: {
-                            Authorization: `Bearer ${jwtToken}`,
-                            'Content-Type': 'application/json',
-                        },
-                        ...options,
-                    })
+                    .loadPaymentWalletWithInitializationData(methodId, host, options)
                     .then((response) => {
                         observer.next(
                             createAction(

packages/core/src/payment/payment-method-request-sender.spec.ts

@@ -141,26 +141,27 @@ describe('PaymentMethodRequestSender', () => {
 
     describe('#loadPaymentWalletWithInitializationData()', () => {
         let response: Response<HeadlessPaymentMethodResponse>;
-        const authorization = 'authorization-1234';
 
         beforeEach(() => {
             response = getHeadlessPaymentResponse(getHeadlessPaymentMethod());
             jest.spyOn(requestSender, 'post').mockReturnValue(Promise.resolve(response));
         });
 
         it('loads headless payment method', async () => {
+            const host = 'https://test.com';
+            const path = 'get-initialization-data';
+
             const walletInitData =
                 await paymentMethodRequestSender.loadPaymentWalletWithInitializationData(
                     'paypalcommerce',
-                    { headers: { Authorization: authorization } },
+                    host,
                 );
 
             expect(requestSender.post).toHaveBeenCalledWith(
-                '/graphql',
+                `${host}/${path}`,
                 expect.objectContaining({
-                    headers: {
-                        Authorization: authorization,
-                        'Content-Type': 'application/json',
+                    body: {
+                        entityId: 'paypalcommerce.paypal',
                     },
                 }),
             );

packages/core/src/payment/payment-method-request-sender.ts

@@ -11,8 +11,8 @@ import {
     HeadlessPaymentMethodConfig,
     HeadlessPaymentMethodResponse,
     HeadlessPaymentMethodType,
-    HeadlessPaymentRequestOptions,
 } from './headless-payment';
+import HeadlessPaymentRequestOptions from './headless-payment/headless-payment-request-options';
 import PaymentMethod from './payment-method';
 import paymentMethodTransformer from './payment-method-transformer';
 
@@ -53,37 +53,25 @@ export default class PaymentMethodRequestSender {
     }
 
     /**
-     * GraphQL payment requests
+     * Headless payment requests
      */
     loadPaymentWalletWithInitializationData(
         methodId: string,
-        options: HeadlessPaymentRequestOptions,
+        host?: string,
+        { timeout }: RequestOptions = {},
     ): Promise<Response<PaymentMethod>> {
-        const entityId = this._getPaymentEntityId(methodId);
-
-        const graphQLQuery = `
-            query {
-                site {
-                    paymentWalletWithInitializationData(filter: { paymentWalletEntityId: "${entityId}" }) {
-                        clientToken
-                        initializationData
-                    }
-                }
-            }
-        `;
+        const path = 'get-initialization-data';
+        const url = host ? `${host}/${path}` : `/${path}`;
 
         const requestOptions: HeadlessPaymentRequestOptions = {
-            headers: {
-                ...options.headers,
-                'Content-Type': 'application/json',
-            },
             body: {
-                query: graphQLQuery,
+                entityId: this._getPaymentEntityId(methodId),
             },
+            timeout,
         };
 
         return this._requestSender
-            .post<HeadlessPaymentMethodResponse>('/graphql', requestOptions)
+            .post<HeadlessPaymentMethodResponse>(url, requestOptions)
             .then((response) => paymentMethodTransformer(response, methodId));
     }
 

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

@@ -85,8 +85,6 @@ export default interface PaymentIntegrationSelectors {
 
     getInstrumentsMeta(): InstrumentMeta | undefined;
 
-    getStorefrontJwtToken(): string | undefined;
-
     getOrderMeta(): OrderMetaState | undefined;
 
     getPaymentMethodsMeta(): PaymentMethodMeta | undefined;

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

@@ -59,7 +59,6 @@ const state = {
     getPaymentRedirectUrl: jest.fn(),
     getPaymentRedirectUrlOrThrow: jest.fn(),
     isPaymentDataRequired: jest.fn(),
-    getStorefrontJwtToken: jest.fn(),
 };
 
 const createBuyNowCart = jest.fn(() => Promise.resolve(getCart()));