feat(config): finish the config initial

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "Malga"
+  ]
+}

src/async-tokenize/async-tokenize.ts

@@ -1,41 +1,29 @@
 import { Malga } from 'src/common/malga'
-import { MalgaFormElements } from 'src/common/interfaces'
-import {
-  getFormElements,
-  removeFormElements,
-  createFormElement,
-  getFormValues,
-} from '../common/utils'
 
 export class AsyncTokenize {
   constructor(
     private readonly malga: Malga,
-    private readonly elements: MalgaFormElements,
+    // private readonly elements: MalgaFormElements,
   ) {}
 
   public handle() {
-    const { form } = getFormElements(this.elements)
-
-    form?.addEventListener('submit', async (event) => {
-      event.preventDefault()
-
-      const { holderName, number, expirationDate, cvv } = getFormValues(
-        this.elements,
-      )
-
-      const { tokenId } = await this.malga.tokenization({
-        holderName,
-        number,
-        expirationDate,
-        cvv,
-      })
-
-      removeFormElements(this.elements)
-      const tokenIdElement = createFormElement('tokenId', tokenId)
-
-      form?.appendChild(tokenIdElement)
-
-      form?.submit()
-    })
+    return console.log('async')
+    // const { form } = getFormElements(this.elements)
+    // form?.addEventListener('submit', async (event) => {
+    //   event.preventDefault()
+    //   // const { holderName, number, expirationDate, cvv } = getFormValues(
+    //   //   this.elements,
+    //   // )
+    //   const { tokenId } = await this.malga.tokenization({
+    //     holderName,
+    //     number,
+    //     expirationDate,
+    //     cvv,
+    //   })
+    //   removeFormElements(this.elements)
+    //   const tokenIdElement = createFormElement('tokenId', tokenId)
+    //   form?.appendChild(tokenIdElement)
+    //   form?.submit()
+    // })
   }
 }

src/common/enums/Events.ts

@@ -0,0 +1,10 @@
+export enum Event {
+  Submit = 'submit',
+  Focus = 'focus',
+  Blur = 'blur',
+  OnChange = 'change',
+  Input = 'input',
+  Tokenize = 'tokenize',
+  UpdateField = 'updateField',
+  SetTypeField = 'setTypeField',
+}

src/common/enums/Fields.ts

@@ -0,0 +1,6 @@
+export enum Field {
+  CardNumber = 'card-number',
+  CardHolderName = 'card-holder-name',
+  CardExpirationDate = 'card-expiration-date',
+  CardCvv = 'card-cvv',
+}

src/common/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './Events'
+export * from './Fields'

src/common/interfaces/configurations.ts

@@ -6,32 +6,29 @@ export interface MalgaConfigurationsElements {
   number?: string
 }
 
-interface FieldStyles {
+interface MalgaInputFieldStyles {
   input: string
   [key: string]: string
 }
 
-interface FieldOptions {
-  container: string | HTMLElement
+interface MalgaInputFieldConfiguration {
+  container: string
   selector: string
   placeholder?: string
-  stylesField?: FieldStyles
+  stylesField?: MalgaInputFieldStyles
   type?: string
 }
 
+export interface MalgaInputFieldConfigurations {
+  fields: { [fieldName: string]: MalgaInputFieldConfiguration }
+  styles?: MalgaInputFieldStyles
+  preventAutofill?: boolean
+}
+
 export interface MalgaConfigurations {
   apiKey: string
   clientId: string
-  config: {
-    fields: {
-      cardNumber: FieldOptions
-      cardHolderName: FieldOptions
-      cardCvv: FieldOptions
-      cardExpirationDate: FieldOptions
-    }
-    styles?: {}
-    preventAutofill?: boolean
-  }
+  config: MalgaInputFieldConfigurations
   options?: {
     sandbox?: boolean
     elements?: MalgaConfigurationsElements

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

@@ -1,21 +1,40 @@
+import type { MalgaInputFieldConfigurations } from 'src/common/interfaces'
 import { EventPostMessage } from '../form-events'
 import { create } from './create'
 import { camelToKebabCase } from './parsedString'
+import { Event } from 'src/common/enums'
 
-export function loaded(configFields: any) {
-  const fields = Object.keys(configFields)
+export function loaded(config: MalgaInputFieldConfigurations) {
+  const fields = Object.keys(config.fields)
 
   for (const field of fields) {
+    const fieldConfig = config.fields[field]
+
     const iframe = create(field)
     const iframeName = camelToKebabCase(field)
-    if (!iframe || !iframe.contentWindow) return
+
+    if (!iframe || !iframe.contentWindow) {
+      console.error(`Error to access the iframe of ${field}`)
+      return
+    }
+
+    const parentNode = document.querySelector(fieldConfig.container)
+
+    if (!parentNode) {
+      console.error(`Container not found ${field}: ${fieldConfig.container}`)
+      return
+    }
+
+    parentNode?.appendChild(iframe)
 
     const iframePostmessage = new EventPostMessage(iframe.contentWindow, '*')
 
     iframe.onload = () => {
-      iframePostmessage.send('setTypeField', {
+      iframePostmessage.send(Event.SetTypeField, {
         fieldType: iframeName,
       })
+
+      iframe.onload = null
     }
   }
 }

src/tokenization.ts

@@ -17,16 +17,17 @@ export class MalgaTokenization {
     }
 
     this.malga = new Malga(configurations)
-    loaded(configurations.config.fields)
+
+    loaded(configurations.config)
   }
 
   public async init() {
-    const asyncTokenize = new AsyncTokenize(this.malga, this.elements)
+    const asyncTokenize = new AsyncTokenize(this.malga)
     return asyncTokenize.handle()
   }
 
   public async tokenize() {
-    const tokenize = new Tokenize(this.malga, this.elements)
+    const tokenize = new Tokenize(this.malga)
     return tokenize.handle()
   }
 }

src/tokenize/tokenize.ts

@@ -1,23 +1,19 @@
 import { Malga } from 'src/common/malga'
-import { MalgaFormElements } from 'src/common/interfaces'
-import { getFormValues } from '../common/utils'
 
 export class Tokenize {
-  constructor(
-    private readonly malga: Malga,
-    private readonly elements: MalgaFormElements,
-  ) {}
+  constructor(private readonly malga: Malga) {}
 
   public async handle() {
-    const { holderName, number, expirationDate, cvv } = getFormValues(
-      this.elements,
-    )
+    // const { holderName, number, expirationDate, cvv } = getFormValues(
+    //   this.elements,
+    // )
 
-    return this.malga.tokenization({
-      holderName,
-      number,
-      expirationDate,
-      cvv,
-    })
+    return console.log('entrou nessa funcao do tokeniza')
+    // return this.malga.tokenization({
+    //   holderName,
+    //   number,
+    //   expirationDate,
+    //   cvv,
+    // })
   }
 }