feat(PAYMENTS-19009): add xsolla-number component

src/core/actions/next-action.interface.ts

@@ -8,6 +8,7 @@ import { SpecialButtonAction } from './special-button.action.type';
 import { ShowQrCodeAction } from './show-qr-code.action.type';
 import { ShowMobilePaymentScreenAction } from './show-mobile-payment-screen.action.type';
 import { HideFormAction } from './hide-form.action.type';
+import { ShowCashPaymentAction } from './show-cash-payment.action.type';
 
 export type NextAction =
   | CheckStatusAction
@@ -19,4 +20,5 @@ export type NextAction =
   | SpecialButtonAction
   | ShowQrCodeAction
   | ShowMobilePaymentScreenAction
-  | HideFormAction;
+  | HideFormAction
+  | ShowCashPaymentAction;

src/core/actions/show-cash-payment.action.type.ts

@@ -0,0 +1,5 @@
+import { Action } from './action.interface';
+
+export type ShowCashPaymentActionType = 'show_cash_payment_instruction';
+
+export type ShowCashPaymentAction = Action<ShowCashPaymentActionType, null>;

src/core/cash-payment-data.interface.ts

@@ -0,0 +1,9 @@
+export interface CashPaymentData {
+  isCashPaymentMethod: boolean;
+  xsollaNumber: string;
+  pid: number;
+  publicId: string;
+  title: string;
+  projectName: string;
+  printUrl: string;
+}

src/core/event-name.enum.ts

@@ -34,4 +34,8 @@ export const enum EventName {
   openApplePayPage = 'openApplePayPage',
   submitApplePayForm = 'submitApplePayForm',
   userCountryChanged = 'userCountryChanged',
+  getCashPaymentData = 'getCashPaymentData',
+  sendCashPaymentData = 'sendCashPaymentData',
+  sendCashPaymentButtonStatus = 'sendCashPaymentButtonStatus',
+  sendCashPaymentDataStatus = 'sendCashPaymentDataStatus',
 }

src/core/guards/get-cash-payment-data/get-cash-payment-data-event-message.guard.ts

@@ -0,0 +1,13 @@
+import { Message } from '../../message.interface';
+import { CashPaymentData } from '../../cash-payment-data.interface';
+import { isEventMessage } from '../event-message.guard';
+import { EventName } from '../../event-name.enum';
+
+export const isGetCashPaymentDataEventMessage = (
+  messageData: unknown,
+): messageData is Message<CashPaymentData | null | undefined> => {
+  if (isEventMessage(messageData)) {
+    return messageData.name === EventName.getCashPaymentData;
+  }
+  return false;
+};

src/core/guards/send-cash-payment-data-status/send-cash-payment-data-event-message.guard.ts

@@ -0,0 +1,13 @@
+import { Message } from '../../message.interface';
+import { isEventMessage } from '../event-message.guard';
+import { EventName } from '../../event-name.enum';
+import { SendCashPaymentDataStatus } from '../../send-cash-payment-data-status.interface';
+
+export const isSentCashPaymentDataStatus = (
+  messageData: unknown,
+): messageData is Message<SendCashPaymentDataStatus | null | undefined> => {
+  if (isEventMessage(messageData)) {
+    return messageData.name === EventName.sendCashPaymentDataStatus;
+  }
+  return false;
+};

src/core/send-cash-payment-data-status.interface.ts

@@ -0,0 +1,5 @@
+export interface SendCashPaymentDataStatus {
+  status: 'succeed' | 'failed';
+  type: 'sms' | 'email';
+  errors: string[];
+}

src/core/web-components/web-component-tag-name.enum.ts

@@ -20,4 +20,6 @@ export enum WebComponentTagName {
   GooglePayButtonComponent = 'psdk-google-pay-button',
   ApplePayComponent = 'psdk-apple-pay',
   QrCodeComponent = 'psdk-qr-code',
+  CashPaymentInstructionComponent = 'psdk-cash-payment-instruction',
+  XsollaNumberComponent = 'psdk-xsolla-number',
 }

src/core/web-components/web-components.map.ts

@@ -20,6 +20,8 @@ import { QrCodeComponent } from '../../features/headless-checkout/web-components
 import { ApplePayComponent } from '../../features/headless-checkout/web-components/apple-pay/apple-pay.component';
 import { DefaultSubmitButtonComponent } from '../../features/headless-checkout/web-components/submit-button/default-submit-button/default-submit-button.component';
 import { TotalComponent } from '../../features/headless-checkout/web-components/finance-details/total.component';
+import { CashPaymentInstructionComponent } from '../../features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component';
+import { XsollaNumberComponent } from '../../features/headless-checkout/web-components/xsolla-number/xsolla-number.component';
 
 export const webComponents: {
   [key in WebComponentTagName]: CustomElementConstructor;
@@ -46,4 +48,7 @@ export const webComponents: {
   [WebComponentTagName.ApplePayComponent]: ApplePayComponent,
   [WebComponentTagName.DefaultSubmitButtonComponent]:
     DefaultSubmitButtonComponent,
+  [WebComponentTagName.CashPaymentInstructionComponent]:
+    CashPaymentInstructionComponent,
+  [WebComponentTagName.XsollaNumberComponent]: XsollaNumberComponent,
 };

src/features/headless-checkout/post-messages-handlers/get-cash-payment-data/get-cash-payment-data.handler.spec.ts

@@ -0,0 +1,21 @@
+import { EventName } from '../../../../core/event-name.enum';
+import { Message } from '../../../../core/message.interface';
+import { getCashPaymentDataHandler } from './get-cash-payment-data.handler';
+
+const mockMessage: Message = {
+  name: EventName.getCashPaymentData,
+};
+describe('getCashPaymentDataHandler', () => {
+  it('should handle status', () => {
+    expect(getCashPaymentDataHandler(mockMessage)).toEqual({
+      isHandled: true,
+      value: undefined,
+    });
+  });
+
+  it('should return null', () => {
+    expect(
+      getCashPaymentDataHandler({ name: EventName.getPaymentMethodsList }),
+    ).toBeNull();
+  });
+});

src/features/headless-checkout/post-messages-handlers/get-cash-payment-data/get-cash-payment-data.handler.ts

@@ -0,0 +1,18 @@
+import { Handler } from '../../../../core/post-messages-client/handler.type';
+import { Message } from '../../../../core/message.interface';
+import { CashPaymentType } from '../../web-components/cash-payment-instruction/cash-payment.type';
+import { isGetCashPaymentDataEventMessage } from '../../../../core/guards/get-cash-payment-data/get-cash-payment-data-event-message.guard';
+
+export const getCashPaymentDataHandler: Handler<CashPaymentType | null> = (
+  message: Message,
+): { isHandled: boolean; value: CashPaymentType | null | undefined } | null => {
+  if (!isGetCashPaymentDataEventMessage(message)) {
+    return null;
+  }
+
+  const cashPaymentData = message.data;
+  return {
+    isHandled: true,
+    value: cashPaymentData,
+  };
+};

src/features/headless-checkout/post-messages-handlers/send-cash-payment-data-status/send-cash-payment-data-status.handler.spec.ts

@@ -0,0 +1,23 @@
+import { EventName } from '../../../../core/event-name.enum';
+import { Message } from '../../../../core/message.interface';
+import { sendCashPaymentDataStatusHandler } from './send-cash-payment-data-status.handler';
+
+const mockMessage: Message = {
+  name: EventName.sendCashPaymentDataStatus,
+};
+describe('sendCashPaymentDataStatusHandler', () => {
+  it('should handle status', () => {
+    expect(sendCashPaymentDataStatusHandler(mockMessage)).toEqual({
+      isHandled: true,
+      value: undefined,
+    });
+  });
+
+  it('should return null', () => {
+    expect(
+      sendCashPaymentDataStatusHandler({
+        name: EventName.getPaymentMethodsList,
+      }),
+    ).toBeNull();
+  });
+});

src/features/headless-checkout/post-messages-handlers/send-cash-payment-data-status/send-cash-payment-data-status.handler.ts

@@ -0,0 +1,23 @@
+import { Handler } from '../../../../core/post-messages-client/handler.type';
+import { Message } from '../../../../core/message.interface';
+import { isSentCashPaymentDataStatus } from '../../../../core/guards/send-cash-payment-data-status/send-cash-payment-data-event-message.guard';
+import { SendCashPaymentDataStatus } from '../../../../core/send-cash-payment-data-status.interface';
+
+export const sendCashPaymentDataStatusHandler: Handler<
+  SendCashPaymentDataStatus | null | undefined
+> = (
+  message: Message,
+): {
+  isHandled: boolean;
+  value: SendCashPaymentDataStatus | null | undefined;
+} | null => {
+  if (!isSentCashPaymentDataStatus(message)) {
+    return null;
+  }
+
+  const cashPaymentData = message.data;
+  return {
+    isHandled: true,
+    value: cashPaymentData,
+  };
+};

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.spec.ts

@@ -0,0 +1,87 @@
+import { container } from 'tsyringe';
+import { WebComponentTagName } from '../../../../core/web-components/web-component-tag-name.enum';
+import { noopStub } from '../../../../tests/stubs/noop.stub';
+import { FormSpy } from '../../../../core/spy/form-spy/form-spy';
+import { PostMessagesClient } from '../../../../core/post-messages-client/post-messages-client';
+import { CashPaymentData } from '../../../../core/cash-payment-data.interface';
+import { CashPaymentInstructionComponent } from './cash-payment-instruction.component';
+import { timeout } from '../../../../tests/stubs/timeout';
+
+function createComponent(): void {
+  const element = document.createElement(
+    WebComponentTagName.CashPaymentInstructionComponent,
+  );
+  (document.getElementById('container')! as HTMLElement).appendChild(element);
+}
+
+const cashPaymentData = {
+  isCashPaymentMethod: false,
+} as CashPaymentData;
+
+describe('CashPaymentInstructionComponent', () => {
+  let formSpy: FormSpy;
+  let postMessagesClient: PostMessagesClient;
+
+  window.customElements.define(
+    WebComponentTagName.CashPaymentInstructionComponent,
+    CashPaymentInstructionComponent,
+  );
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="container"></div>';
+
+    postMessagesClient = {
+      init: noopStub,
+      send: noopStub,
+      listen: noopStub,
+    } as unknown as PostMessagesClient;
+
+    formSpy = {
+      listenFormInit: noopStub,
+      get formWasInit() {
+        return;
+      },
+    } as unknown as FormSpy;
+
+    container.clearInstances();
+
+    container
+      .register<FormSpy>(FormSpy, {
+        useValue: formSpy,
+      })
+      .register<PostMessagesClient>(PostMessagesClient, {
+        useValue: postMessagesClient,
+      })
+      .register<Window>(Window, { useValue: window });
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('Should draw cash payment component', () => {
+    spyOnProperty(formSpy, 'formWasInit').and.returnValue(true);
+    spyOn(postMessagesClient, 'send').and.returnValue(Promise.resolve(null));
+    createComponent();
+    expect(
+      document.querySelector(
+        WebComponentTagName.CashPaymentInstructionComponent,
+      )!.innerHTML,
+    ).not.toContain(WebComponentTagName.XsollaNumberComponent);
+  });
+
+  it('Should draw XsollaNumberComponent', async () => {
+    spyOnProperty(formSpy, 'formWasInit').and.returnValue(true);
+    spyOn(postMessagesClient, 'send').and.returnValue(
+      Promise.resolve(cashPaymentData),
+    );
+    createComponent();
+    const delay = 100;
+    await timeout(delay);
+    expect(
+      document.querySelector(
+        WebComponentTagName.CashPaymentInstructionComponent,
+      )!.innerHTML,
+    ).toContain(WebComponentTagName.XsollaNumberComponent);
+  });
+});

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment-instruction.component.ts

@@ -0,0 +1,56 @@
+import { container } from 'tsyringe';
+import { FormSpy } from '../../../../core/spy/form-spy/form-spy';
+import { EventName } from '../../../../core/event-name.enum';
+import { PostMessagesClient } from '../../../../core/post-messages-client/post-messages-client';
+import { Message } from '../../../../core/message.interface';
+import { getCashPaymentDataHandler } from '../../post-messages-handlers/get-cash-payment-data/get-cash-payment-data.handler';
+import { CashPaymentData } from '../../../../core/cash-payment-data.interface';
+import { CashPaymentType } from './cash-payment.type';
+import { WebComponentAbstract } from '../../../../core/web-components/web-component.abstract';
+import { WebComponentTagName } from '../../../../core/web-components/web-component-tag-name.enum';
+
+export class CashPaymentInstructionComponent extends WebComponentAbstract {
+  private readonly formSpy: FormSpy;
+  private readonly postMessagesClient: PostMessagesClient;
+  private cashPaymentData?: CashPaymentData | null;
+  public constructor() {
+    super();
+    this.formSpy = container.resolve(FormSpy);
+    this.postMessagesClient = container.resolve(PostMessagesClient);
+  }
+
+  protected connectedCallback(): void {
+    if (!this.formSpy.formWasInit) {
+      this.formSpy.listenFormInit(() => this.connectedCallback());
+      return;
+    }
+
+    void this.getCashPaymentData().then(this.configLoadedHandler);
+  }
+
+  protected getHtml(): string {
+    if (this.cashPaymentData?.isCashPaymentMethod) {
+      return '';
+    }
+
+    return `<${WebComponentTagName.XsollaNumberComponent}></${WebComponentTagName.XsollaNumberComponent}>`;
+  }
+
+  private async getCashPaymentData(): Promise<CashPaymentType> {
+    const msg: Message = {
+      name: EventName.getCashPaymentData,
+    };
+
+    return this.postMessagesClient.send<CashPaymentType>(
+      msg,
+      getCashPaymentDataHandler,
+    ) as Promise<CashPaymentType>;
+  }
+
+  private readonly configLoadedHandler = (
+    cashPaymentData: CashPaymentType,
+  ): void => {
+    this.cashPaymentData = cashPaymentData;
+    super.render();
+  };
+}

src/features/headless-checkout/web-components/cash-payment-instruction/cash-payment.type.ts

@@ -0,0 +1,3 @@
+import { CashPaymentData } from '../../../../core/cash-payment-data.interface';
+
+export type CashPaymentType = CashPaymentData | null;

src/features/headless-checkout/web-components/xsolla-number/send-button-status.interface.ts

@@ -0,0 +1,4 @@
+export interface SendButtonStatus {
+  channelType: 'phone' | 'email';
+  isDisabled: boolean;
+}

src/features/headless-checkout/web-components/xsolla-number/templates/get-instruction.template.ts

@@ -0,0 +1,28 @@
+import i18next from 'i18next';
+
+export const getInstructionTemplate = (
+  paymentMethodName: string,
+  projectName?: string,
+): string => {
+  return `<div class='instruction-wrapper'>
+<h3 class="title">${i18next.t('xsolla-number.instruction.how-to')}</h3>
+<ul class="instruction">
+  <li class="paragraph">${i18next.t('xsolla-number.instruction.paragraph-one', {
+    paymentMethodName,
+  })}</li>
+  <li class="paragraph">
+    ${i18next.t('xsolla-number.instruction.paragraph-two', { projectName })}
+  </li>
+  <li class="paragraph">
+    ${i18next.t('xsolla-number.instruction.paragraph-three')}
+  </li>
+  <li class="paragraph">
+    ${i18next.t('xsolla-number.instruction.paragraph-four')}
+  </li>
+</ul>
+
+<p class='notifier'>
+    ${i18next.t('xsolla-number.instruction.notification')}
+</p>
+</div>`;
+};