feat(utils): create the utis functions

src/common/malga/malga.ts

@@ -1,22 +1,7 @@
-import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios'
-
-import { MalgaConfigurations } from 'src/common/interfaces'
-
-import { MalgaErrorResponse, TokenizationPayload } from './interfaces'
+import type { MalgaConfigurations } from '../interfaces'
 
 export class Malga {
-  private readonly api: AxiosInstance
-
-  constructor(private readonly configurations: MalgaConfigurations) {
-    this.api = axios.create({
-      baseURL: this.getBaseUrl(),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Api-Key': this.configurations.apiKey,
-        'X-Client-Id': this.configurations.clientId,
-      },
-    })
-  }
+  constructor(private readonly configurations: MalgaConfigurations) {}
 
   private getBaseUrl() {
     if (this.configurations.options?.sandbox) {
@@ -26,45 +11,21 @@ export class Malga {
     return 'https://api.malga.io/v1'
   }
 
-  private handleSuccess(response: AxiosResponse) {
-    return response.data
-  }
-
-  private handleError(error: AxiosError<any>): Promise<MalgaErrorResponse> {
-    if (!error.response?.data || error.response.status >= 500) {
-      return Promise.reject({
-        error: {
-          type: 'api_error',
-          code: 500,
-          message: 'unexpected error',
+  public async tokenization() {
+    const cardNumberIframe = document.querySelector(
+      "iframe[name='card-number']",
+    ) as HTMLIFrameElement
+
+    return cardNumberIframe.contentWindow?.postMessage(
+      {
+        type: 'submit',
+        data: {
+          apiKey: this.configurations.apiKey,
+          clientId: this.configurations.clientId,
+          url: this.getBaseUrl(),
         },
-      })
-    }
-
-    if (error.response.status === 403) {
-      return Promise.reject({
-        error: {
-          type: 'invalid_request_error',
-          code: 403,
-          message: 'forbidden',
-        },
-      })
-    }
-
-    return Promise.reject(error.response.data)
-  }
-
-  public async tokenization(payload: TokenizationPayload) {
-    const parsedPayload = {
-      cardNumber: payload.number,
-      cardCvv: payload.cvv,
-      cardExpirationDate: payload.expirationDate,
-      cardHolderName: payload.holderName,
-    }
-
-    return this.api
-      .post('/tokens', parsedPayload)
-      .then(this.handleSuccess)
-      .catch(this.handleError)
+      },
+      '*',
+    )
   }
 }

src/common/utils/form-events/events.ts

@@ -0,0 +1,20 @@
+export class EventPostMessage {
+  constructor(
+    private action: Window,
+    private origin: '*',
+  ) {}
+
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  send(type?: string, data?: any, origin?: string) {
+    this.action.postMessage({ type, data }, origin ?? this.origin)
+  }
+}
+
+export class EventListener {
+  constructor(private action: Window | HTMLElement) {}
+
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  get(type: string, eventHandler: (event: any) => void) {
+    this.action.addEventListener(type, eventHandler)
+  }
+}

src/common/utils/form-events/index.ts

@@ -0,0 +1 @@
+export * from './events'

src/common/utils/form-iframes/create.ts

@@ -0,0 +1,11 @@
+export function create(type: string) {
+  const iframe = document.createElement('iframe')
+
+  iframe.setAttribute('name', type)
+  iframe.setAttribute('src', 'https://develop.d3krxmg1839vaa.amplifyapp.com/')
+  iframe.setAttribute('width', '100%')
+  iframe.setAttribute('height', '100%')
+  iframe.setAttribute('frameborder', '0')
+
+  return iframe
+}

src/common/utils/form-iframes/index.ts

@@ -0,0 +1,3 @@
+export * from './create'
+export * from './loaded'
+export * from './parsedString'

src/common/utils/form-iframes/loaded.ts

@@ -0,0 +1,21 @@
+import { EventPostMessage } from '../form-events'
+import { create } from './create'
+import { camelToKebabCase } from './parsedString'
+
+export function loaded(configFields: any) {
+  const fields = Object.keys(configFields)
+
+  for (const field of fields) {
+    const iframe = create(field)
+    const iframeName = camelToKebabCase(field)
+    if (!iframe || !iframe.contentWindow) return
+
+    const iframePostmessage = new EventPostMessage(iframe.contentWindow, '*')
+
+    iframe.onload = () => {
+      iframePostmessage.send('setTypeField', {
+        fieldType: iframeName,
+      })
+    }
+  }
+}

src/common/utils/form-iframes/parsedString.ts

@@ -0,0 +1,3 @@
+export function camelToKebabCase(camelCaseString: string) {
+  return camelCaseString.replace(/([A-Z])/g, '-$1').toLowerCase()
+}

src/common/utils/index.ts

@@ -1,2 +1,4 @@
 export * from './form-elements'
 export * from './form-values'
+export * from './form-iframes'
+export * from './form-events'

src/tokenization.ts

@@ -1,17 +1,13 @@
 import { Malga } from './common/malga'
 
-import type {
-  MalgaConfigurations,
-  MalgaConfigurationsElements,
-  MalgaFormElements,
-} from 'src/common/interfaces'
+import type { MalgaConfigurations } from 'src/common/interfaces'
 
 import { Tokenize } from './tokenize'
 import { AsyncTokenize } from './async-tokenize'
+import { loaded } from './common/utils'
 
 export class MalgaTokenization {
   private readonly malga: Malga
-  private readonly elements: MalgaFormElements
 
   constructor(configurations: MalgaConfigurations) {
     if (!configurations.apiKey || !configurations.clientId) {
@@ -21,18 +17,7 @@ export class MalgaTokenization {
     }
 
     this.malga = new Malga(configurations)
-    this.elements = this.handleElements(configurations.options?.elements)
-  }
-
-  private handleElements(elements?: MalgaConfigurationsElements) {
-    return {
-      form: elements?.form || 'data-malga-tokenization-form',
-      holderName: elements?.holderName || 'data-malga-tokenization-holder-name',
-      cvv: elements?.cvv || 'data-malga-tokenization-cvv',
-      expirationDate:
-        elements?.expirationDate || 'data-malga-tokenization-expiration-date',
-      number: elements?.number || 'data-malga-tokenization-number',
-    }
+    loaded(configurations.config.fields)
   }
 
   public async init() {