Merge pull request #66 from xsolla/PAYMENTS-18110

feat (PAYMENTS-18110): add combined payment methods

src/core/combined-payment-methods.interface.ts

@@ -0,0 +1,10 @@
+import { PaymentMethod } from './payment-method.interface';
+import { SavedMethod } from './saved-method.interface';
+
+export interface CombinedPaymentMethods {
+  paymentMethods: {
+    quick: PaymentMethod[];
+    remained: PaymentMethod[];
+  };
+  savedMethods: SavedMethod[];
+}

src/core/event-name.enum.ts

@@ -6,6 +6,7 @@ export const enum EventName {
   submitForm = 'submitForm',
   getPaymentMethodsList = 'getPaymentMethodsList',
   getPaymentQuickMethods = 'getPaymentQuickMethods',
+  getCombinedPaymentMethods = 'getCombinedPaymentMethods',
   getSavedMethods = 'getSavedMethods',
   getUserBalance = 'getUserBalance',
   getUserBalanceValue = 'getUserBalanceValue',

src/core/guards/combined-payment-methods-event-message.guard.ts

@@ -0,0 +1,22 @@
+import { Message } from '../../core/message.interface';
+import { isEventMessage } from './event-message.guard';
+import { EventName } from '../../core/event-name.enum';
+import { CombinedPaymentMethods } from '../combined-payment-methods.interface';
+
+export const isCombinedMethodsEventMessage = (
+  messageData: unknown,
+): messageData is Message<{
+  combinedPaymentMethods: CombinedPaymentMethods;
+}> => {
+  if (isEventMessage(messageData)) {
+    return (
+      messageData.name === EventName.getCombinedPaymentMethods &&
+      !!(
+        messageData.data as {
+          [key: string]: unknown;
+        }
+      )?.combinedPaymentMethods
+    );
+  }
+  return false;
+};

src/features/headless-checkout/headless-checkout.spec.ts

@@ -52,7 +52,7 @@ describe('HeadlessCheckout', () => {
           origin: headlessCheckoutAppUrl,
           data: JSON.stringify({ name: EventName.isReady }),
         } as MessageEvent);
-      }
+      },
     );
     postMessagesClient = {
       init: stub,
@@ -83,7 +83,7 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'init');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
     await headlessCheckout.init({ isWebview: false });
     expect(spy).toHaveBeenCalled();
@@ -92,7 +92,7 @@ describe('HeadlessCheckout', () => {
   it('Should init localization', () => {
     const localizeSpy = spyOn(
       localizeService,
-      'initDictionaries'
+      'initDictionaries',
     ).and.resolveTo();
 
     void headlessCheckout.init({ isWebview: false });
@@ -111,7 +111,7 @@ describe('HeadlessCheckout', () => {
     headlessCheckout.events.onCoreEvent(
       EventName.initPayment,
       mockHandler,
-      stub
+      stub,
     );
     expect(spy).toHaveBeenCalled();
   });
@@ -120,7 +120,7 @@ describe('HeadlessCheckout', () => {
     const spy = spyOn(postMessagesClient, 'listen');
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -152,7 +152,7 @@ describe('HeadlessCheckout', () => {
     await headlessCheckout.getFinanceDetails();
     expect(spy).toHaveBeenCalledWith(
       { name: EventName.financeDetails },
-      getFinanceDetailsHandler
+      getFinanceDetailsHandler,
     );
   });
 
@@ -168,12 +168,18 @@ describe('HeadlessCheckout', () => {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('Should getCombinedPaymentMethods', async () => {
+    const spy = spyOn(postMessagesClient, 'send').and.stub();
+    await headlessCheckout.getCombinedPaymentMethods();
+    expect(spy).toHaveBeenCalled();
+  });
+
   it('Should correctly define web components', async () => {
     const spy = spyOn(windowService.customElements, 'define');
     spyOn(windowService.customElements, 'get').and.returnValue(undefined);
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     await headlessCheckout.init({ isWebview: false });
@@ -182,11 +188,11 @@ describe('HeadlessCheckout', () => {
 
   it('Should web components not be redefined', async () => {
     spyOn(windowService.customElements, 'get').and.returnValue(
-      CustomElementMock
+      CustomElementMock,
     );
     spyOn(windowService.document.body, 'appendChild');
     spyOn(windowService.document, 'createElement').and.callFake(
-      () => new MockIframeElement() as unknown as HTMLIFrameElement
+      () => new MockIframeElement() as unknown as HTMLIFrameElement,
     );
 
     const spy = spyOn(window.customElements, 'define');

src/features/headless-checkout/headless-checkout.ts

@@ -31,6 +31,8 @@ import { FormStatus } from '../../core/status/form-status.enum';
 import { setSecureComponentStylesHandler } from './post-messages-handlers/set-secure-component-styles.handler';
 import { formFieldsStatusChangedHandler } from './post-messages-handlers/form-fields-status-changed.handler';
 import { FormFieldsStatus } from '../../core/form/form-fields-status.interface';
+import { getCombinedPaymentMethodsHandler } from './post-messages-handlers/get-combined-payment-methods.handler';
+import { CombinedPaymentMethods } from '../../core/combined-payment-methods.interface';
 
 @singleton()
 export class HeadlessCheckout {
@@ -270,6 +272,17 @@ export class HeadlessCheckout {
     ) as Promise<PaymentMethod[]>;
   }
 
+  public async getCombinedPaymentMethods(): Promise<CombinedPaymentMethods> {
+    const msg: Message = {
+      name: EventName.getCombinedPaymentMethods,
+    };
+
+    return this.postMessagesClient.send<CombinedPaymentMethods>(
+      msg,
+      getCombinedPaymentMethodsHandler,
+    ) as Promise<CombinedPaymentMethods>;
+  }
+
   public async getSavedMethods(): Promise<SavedMethod[]> {
     const msg: Message = {
       name: EventName.getSavedMethods,

src/features/headless-checkout/post-messages-handlers/get-combined-payment-methods.handler.ts

@@ -0,0 +1,20 @@
+import { Handler } from '../../../core/post-messages-client/handler.type';
+import { Message } from '../../../core/message.interface';
+import { isCombinedMethodsEventMessage } from '../../../core/guards/combined-payment-methods-event-message.guard';
+import { CombinedPaymentMethods } from '../../../core/combined-payment-methods.interface';
+
+export const getCombinedPaymentMethodsHandler: Handler<
+  CombinedPaymentMethods
+> = (
+  message: Message,
+): { isHandled: boolean; value: CombinedPaymentMethods } | null => {
+  if (!isCombinedMethodsEventMessage(message)) {
+    return null;
+  }
+
+  const combinedPaymentMethods = message.data?.combinedPaymentMethods;
+  return {
+    isHandled: true,
+    value: combinedPaymentMethods as unknown as CombinedPaymentMethods,
+  };
+};