feat(PAYMENTS-15242): add form initialization

src/core/event-name.enum.ts

@@ -1,6 +1,7 @@
 export const enum EventName {
   error = 'error',
   initPayment = 'initPayment',
+  initForm = 'initForm',
   getPaymentMethodsList = 'getPaymentMethodsList',
   getPaymentQuickMethods = 'getPaymentQuickMethods',
   getSavedMethods = 'getSavedMethods',

src/core/form/field.interface.ts

@@ -0,0 +1,24 @@
+import { XpsBoolean } from '../xps-boolean.enum';
+
+export interface Field {
+  name: string;
+  type: string;
+  value: string;
+  title: string;
+  example: string;
+  options?: unknown[];
+  isMandatory: XpsBoolean;
+  isReadonly?: XpsBoolean;
+  isVisible: XpsBoolean;
+  tooltip?: string;
+  regex?: string;
+  validation_error_msg?: string;
+  label_hint?: string;
+  javascript: {
+    change: {
+      mutableFields: string[];
+      staticParams: { [key: string]: string };
+      params: string[];
+    };
+  };
+}

src/core/form/form-configuration.interface.ts

@@ -0,0 +1,5 @@
+export interface FormConfiguration {
+  paymentMethodId: number;
+  returnUrl: string;
+  country?: string;
+}

src/core/form/form.interface.ts

@@ -0,0 +1,5 @@
+import { Field } from './field.interface';
+
+export interface Form {
+  fields: Field[];
+}

src/core/guards/init-form-event-message.guard.ts

@@ -0,0 +1,14 @@
+import { EventName } from '../../core/event-name.enum';
+import { Message } from '../../core/message.interface';
+import { Form } from '../form/form.interface';
+import { isEventMessage } from './event-message.guard';
+
+export const isInitFormEventMessage = (
+  messageData: unknown
+): messageData is Message<Form> => {
+  if (isEventMessage(messageData)) {
+    return messageData.name === EventName.initForm;
+  }
+
+  return false;
+};

src/core/xps-boolean.enum.ts

@@ -0,0 +1,4 @@
+export const enum XpsBoolean {
+  true = '1',
+  false = '0',
+}

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

@@ -16,6 +16,9 @@ import { UserBalance } from '../../core/user-balance.interface';
 import { getUserBalanceHandler } from './post-messages-handlers/get-user-balance.handler';
 import { HeadlessCheckoutSpy } from '../../core/headless-checkout-spy/headless-checkout-spy';
 import { getRegularMethodsHandler } from './post-messages-handlers/get-regular-methods.handler';
+import { FormConfiguration } from '../../core/form/form-configuration.interface';
+import { initFormHandler } from './post-messages-handlers/init-form.handler';
+import { Form } from '../../core/form/form.interface';
 
 @singleton()
 export class HeadlessCheckout {
@@ -46,6 +49,27 @@ export class HeadlessCheckout {
     },
   };
 
+  public form = {
+    /**
+     * Initialize payment form
+     * @param configuration Form configuration
+     * @returns {Form} form details
+     */
+    init: async (configuration: FormConfiguration): Promise<Form> => {
+      const msg: Message = {
+        name: EventName.initForm,
+        data: {
+          configuration,
+        },
+      };
+
+      return this.postMessagesClient.send<Form>(
+        msg,
+        initFormHandler
+      ) as Promise<Form>;
+    },
+  };
+
   private isWebView?: boolean;
   private coreIframe!: HTMLIFrameElement;
   private errorsSubscription?: () => void;

src/features/headless-checkout/post-messages-handlers/init-form.handler.ts

@@ -0,0 +1,16 @@
+import { Form } from '../../../core/form/form.interface';
+import { isInitFormEventMessage } from '../../../core/guards/init-form-event-message.guard';
+import { Message } from '../../../core/message.interface';
+import { Handler } from '../../../core/post-messages-client/handler.type';
+
+export const initFormHandler: Handler<Form> = (
+  message: Message
+): { isHandled: boolean; value?: Form } | null => {
+  if (isInitFormEventMessage(message)) {
+    return {
+      isHandled: true,
+      value: message.data,
+    };
+  }
+  return null;
+};