@tonder.io/ionic-full-sdk 0.0.48-beta.DEV-1610.1 → 0.0.48-beta.DEV-1610.2

package/src/classes/inlineCheckout.ts

@@ -2,7 +2,7 @@ import { apmItemsTemplate, Card, cardItemsTemplate, cardTemplate, CollectorIds }
 import {
   showError,
   showMessage,
-  mapCards, generateRandomString,
+  mapCards,
 } from '../helpers/utils';
 import {initSkyflow, initUpdateSkyflow} from '../helpers/skyflow'
 import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
@@ -13,6 +13,7 @@ import {ISaveCardSkyflowRequest} from "@tonder.io/ionic-lite-sdk/dist/types/card
 import {ITonderPaymentMethod} from "@tonder.io/ionic-lite-sdk/dist/types/paymentMethod";
 import {IInlineCheckoutOptions, IInlineCustomizationOptions, InCollectorContainer} from "../types/commons";
 import {IInlineCheckout} from "../types/inlineCheckout";
+import get from "lodash.get";
 // @ts-ignore
 import Accordion from "accordion-js";
 
@@ -25,11 +26,13 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
   renderSaveCardButton?: boolean
   customStyles: any
   injectInterval: any
+  #cardsData: any[] = [];
   abortRefreshCardsController: AbortController;
   containerId: string
-  accordionC: {open: any; closeAll: any} | null = null;
   injected: boolean
   cardsInjected: boolean
+  accordionCards: any = null;
+  accordionPaymentMethods: any = null;
   apmsInjected = false
   apmsData: ITonderPaymentMethod[] = []
   collectorIds: CollectorIds
@@ -39,7 +42,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
   #customizationBase: IInlineCustomizationOptions = {
     paymentButton: {
       show: false,
-      text: "Pagar",
+      text: "Pagars",
       showAmount: true,
     },
   }
@@ -83,9 +86,11 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
       cvv: "collectCvv",
       tonderPayButton: "tonderPayButton",
       msgError: "msgError",
+      msgErrorText: "msgErrorText",
       msgNotification: "msgNotification",
       tonderSaveCardButton: "tonderSaveCardButton",
       apmsListContainer: "apmsListContainer",
+      msgNotificationText: "msgNotificationText",
       tdsIframe: "tdsIframe"
     }
     this.collectorIds = collectorIds ? {...this.collectorIds, ...collectorIds} :this.collectorIds
@@ -125,7 +130,14 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     const containerTonderCheckout = document.querySelector(`#${this.containerId}`);
 
     if (containerTonderCheckout) {
-      containerTonderCheckout.innerHTML = cardTemplate({ collectorIds: this.collectorIds, customStyles: this.customStyles, isEnrollmentCard: this.isEnrollmentCard, renderPaymentButton: this.renderPaymentButton, customization: this.customization })
+      containerTonderCheckout.innerHTML = cardTemplate({
+        collectorIds: this.collectorIds,
+        customStyles: this.customStyles,
+        isEnrollmentCard: this.isEnrollmentCard,
+        renderPaymentButton: this.renderPaymentButton,
+        customization: this.customization,
+        renderSaveCardButton: this.renderSaveCardButton
+      })
       await this.#mountTonder();
       this.injected = true
       return;
@@ -133,7 +145,13 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     const observer = new MutationObserver(async (mutations, obs) => {
       const containerTonderCheckout = document.querySelector(`#${this.containerId}`);
       if (containerTonderCheckout) {
-        containerTonderCheckout.innerHTML = cardTemplate({collectorIds: this.collectorIds, customStyles: this.customStyles, isEnrollmentCard: this.isEnrollmentCard, renderPaymentButton: this.renderPaymentButton, customization: this.customization })
+        containerTonderCheckout.innerHTML = cardTemplate({
+          collectorIds: this.collectorIds,
+          customStyles: this.customStyles,
+          isEnrollmentCard: this.isEnrollmentCard,
+          renderSaveCardButton: this.renderSaveCardButton,
+          renderPaymentButton: this.renderPaymentButton,
+          customization: this.customization })
         await this.#mountTonder();
         // clearInterval(injectInterval);
         this.injected = true
@@ -174,10 +192,11 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
       try{
         await this.#updateSaveCardButton(true, "Guardando...")
         await this.#validateAndSaveCard()
-        await this.#updateSaveCardButton(false)
         resolve("Tarjeta registrada con éxito");
       }catch(error){
         reject(error);
+      }finally {
+        await this.#updateSaveCardButton()
       }
     })
   }
@@ -195,26 +214,26 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
 
   async #loadCardsList (customerToken: string) {
-    if(this.cardsInjected || !this.customization.saveCards?.showSaved) return;
+    if(this.cardsInjected || !this.customization.saveCards?.showSaved || this.isEnrollmentCard) return;
     this.cardsInjected = false
     const cardsResponse = await this._getCustomerCards(customerToken, this.merchantData!.business.pk)
+    this.#cardsData = get(cardsResponse, "cards", []);
+
     let cards: Card[] = []
     if("cards" in cardsResponse) {
       cards = cardsResponse.cards.map(mapCards)
       const injectInterval = setInterval(() => {
         const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
         if (queryElement && this.injected) {
-          const acId = generateRandomString(10)
           queryElement.innerHTML = cardItemsTemplate({
             cards,
-            acId: acId,
             collectorIds: this.collectorIds,
             renderPaymentButton: this.renderPaymentButton,
             customStyles: this.customStyles,
             customization: this.customization,
           })
           clearInterval(injectInterval)
-          this.#generateCardsAccordion(acId)
+          this.#generateAccordion()
           this.#mountRadioButtons(customerToken)
           this.cardsInjected = true
         }
@@ -222,21 +241,68 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     }
   }
 
-  #generateCardsAccordion(acId: string){
-    this.accordionC = new Accordion(`.accordion-container${acId}`, {
-      triggerClass: "card-item-label",
+  #generateAccordion(type:AccordionType = "cards"){
+    const accordionByType:Record<AccordionType, { accClass: string; triggerClass: string }> = {
+      cards: {
+        accClass: "accordion-container",
+        triggerClass: "card-item-label",
+      },
+      paymentMethods: {
+        accClass: "accordion-container-apm",
+        triggerClass: "apm-item-label",
+      },
+    };
+    const accordion = new Accordion("." + accordionByType[type].accClass, {
+      triggerClass: accordionByType[type].triggerClass,
       duration: 300,
       collapse: true,
       showMultiple: false,
       onOpen: async (currentElement: any) => {
-        await this.#handleOpenCardAccordion(currentElement)
-      }
+        await this.#handleOpenCardAccordion(currentElement, type);
+      },
     });
+
+    if (type === "cards") {
+      this.accordionCards = accordion;
+    } else if (type === "paymentMethods") {
+      this.accordionPaymentMethods = accordion;
+    }
   }
 
-  async #handleOpenCardAccordion(currentElement: any){
+  #handleOpenCloseAccordion(type = "", position: number | null = null, closeAll = false, closeOthers = false) {
+    const accordions = [
+      { type: "cards", accordion: this.accordionCards },
+      { type: "paymentMethods", accordion: this.accordionPaymentMethods },
+    ];
+    accordions.forEach(({ accordion, type: currentType }) => {
+      if (!accordion) return;
+
+      if (closeAll && "closeAll" in accordion) {
+        accordion.closeAll();
+      }
+
+      if (closeOthers && currentType !== type && accordion.closeAll) {
+        accordion.closeAll();
+      }
+
+      if (position !== null && currentType === type && accordion.open) {
+        accordion.open(
+            currentType !== "paymentMethods" ? position : position - (this.#cardsData.length + 1),
+        );
+      }
+    });
+  }
+  #removeClass(selectors: string[] = [], className = "show") {
+    selectors.forEach(slcItem => {
+      document.querySelectorAll("." + slcItem).forEach(container => {
+        container.classList.remove(className);
+      });
+    });
+  }
+  async #handleOpenCardAccordion(currentElement: any, type = "cards"){
+    console.log("Handling open card accordion for type:", type);
     const { vault_id, vault_url } = this.merchantData!;
-    const container_radio_id = currentElement.id.replace("card_container-", "");
+    const container_radio_id = currentElement.id.replace("option_container-", "");
 
     if (this.updateCollectContainer && "unmount" in this.updateCollectContainer?.elements?.cvvElement) {
       this.updateCollectContainer.elements.cvvElement.unmount()
@@ -245,39 +311,45 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     document.querySelectorAll(".cvvContainer").forEach((container) => {
       container.classList.remove("show");
     });
-
+    this.#removeClass(["cvvContainer"]);
     const radio_card = document.getElementById(container_radio_id) as HTMLInputElement;
     if (radio_card) radio_card.checked = true;
 
     try{
-      this.updateCollectContainer = await initUpdateSkyflow(
-          container_radio_id,
-          vault_id,
-          vault_url,
-          this.baseUrl,
-          this.abortController.signal,
-          this.customStyles,
-          this.collectorIds,
-          this.apiKeyTonder
+      if(type === "cards"){
+        this.updateCollectContainer = await initUpdateSkyflow(
+            container_radio_id,
+            vault_id,
+            vault_url,
+            this.baseUrl,
+            this.abortController.signal,
+            this.customStyles,
+            this.collectorIds,
+            this.apiKeyTonder
+        );
+        setTimeout(() => {
+          const containerCvv = document.querySelector(`#cvvContainer${container_radio_id}`)
+          if(containerCvv) containerCvv.classList.add("show");
+        }, 5)
+      }
 
-      );
-      setTimeout(() => {
-        const containerCvv = document.querySelector(`#cvvContainer${container_radio_id}`)
-        if(containerCvv) containerCvv.classList.add("show");
-      }, 5)
       this.#mountPayButton(container_radio_id)
     }catch (e){
       console.error("Ha ocurrido un error", e);
     }
-
-    if (radio_card) await this.#handleRadioButtonClick(radio_card)
+    await this.#handleRadioButtonClick(radio_card, null, type);
   }
 
 
   #mountPayButton(cardId="") {
+    console.log("Mounting pay button with cardId:", cardId);
+
     if (!this.renderPaymentButton) return;
     const btnID = `#${this.collectorIds.tonderPayButton}${cardId}`;
-    const payButton: HTMLElement | null = document.querySelector(btnID);
+    let payButton: HTMLElement | null = document.querySelector(btnID);
+    if (!payButton) {
+      payButton = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+    }
     const containerID = `#acContainer${cardId}`;
     const container = document.querySelector(containerID);
 
@@ -301,7 +373,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
     payButton.textContent = `${this.customization?.paymentButton?.text} ${this.customization.paymentButton?.showAmount ? `$${inCartTotal}`:''}`;
 
-    document.querySelectorAll(".ac-card-panel-container").forEach((cont) => {
+    document.querySelectorAll(".ac-option-panel-container").forEach((cont) => {
       cont.classList.remove("show");
     });
     if (container) {
@@ -310,12 +382,12 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
 
     payButton.onclick = async (event) => {
       event.preventDefault();
-      await this.#handlePaymentClick(payButton);
+      await this.#handlePaymentClick();
     };
 
   }
 
-  async #handlePaymentClick(payButton: any) {
+  async #handlePaymentClick() {
     try {
       await this.payment({} as IProcessPaymentRequest);
     } catch (error) {
@@ -383,8 +455,9 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
       radio.style.display = "block";
       radio.onclick = async (event) => {
         //event.preventDefault();
+        const classType = radio.classList[0];
         const position = Array.from(radioButtons).indexOf(radio);
-        await this.#handleRadioButtonClick(radio, position);
+        await this.#handleRadioButtonClick(radio, position, classType);
       };
     }
     const cardsButtons: HTMLCollectionOf<Element> = document.getElementsByClassName("card-delete-button");
@@ -428,30 +501,32 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     this.cardsInjected = false;
     await this.#loadCardsList(customerToken)
   }
-  async #handleRadioButtonClick (radio: HTMLElement, position: number | null = null) {
+  async #handleRadioButtonClick (radio: HTMLElement, position: number | null = null, type = "") {
+    if (radio.id === this.radioChecked || (radio.id === "new" && this.radioChecked === undefined))
+      return;
+
     const containerForm: HTMLElement | null = document.querySelector(".container-form");
     if(containerForm) {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
+    console.log("radio.id", radio.id)
     if(radio.id === "new") {
-      this.#handleOpenCloseCardAccordion(null, true)
+      this.#removeClass(["cvvContainer"]);
+      this.#handleOpenCloseAccordion("", null, true);
       if(this.radioChecked !== radio.id) {
         await this.#mountForm();
         this.#mountPayButton()
       }
     } else {
-      this.#handleOpenCloseCardAccordion(position, position !== null)
+      this.#handleOpenCloseAccordion(type, null, false, true);
+      if (position !== null) {
+        this.#handleOpenCloseAccordion(type, position, true);
+      }
       this.#unmountForm();
     }
     this.radioChecked = radio.id;
   }
 
-  #handleOpenCloseCardAccordion(position: number | null = null, closeAll = false){
-    if(closeAll && this.accordionC && 'closeAll' in this.accordionC) this.accordionC.closeAll();
-    if(position !== null && this.accordionC && 'open' in this.accordionC) {
-      this.accordionC.open(position)
-    }
-  }
   async #mountAPMs(){
     try{
       const apms = await this._fetchCustomerPaymentMethods();
@@ -469,8 +544,14 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
     const injectInterval = setInterval(() => {
       const queryElement = document.querySelector(`#${this.collectorIds.apmsListContainer}`);
       if (queryElement && this.injected) {
-        queryElement.innerHTML = apmItemsTemplate(!!this.customStyles, apms);
+        queryElement.innerHTML = apmItemsTemplate({
+          apms: apms,
+          collectorIds: this.collectorIds,
+          renderPaymentButton: this.renderPaymentButton,
+          customization: this.customization
+        });
         clearInterval(injectInterval);
+        this.#generateAccordion("paymentMethods");
         this.#mountRadioButtons();
         this.apmsInjected = true;
       }
@@ -478,6 +559,7 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
   }
 
   async #mountTonder() {
+
     if(this.isEnrollmentCard){
         this.#mountSaveCardButton()
       }else{
@@ -560,10 +642,10 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           const collectResponseSkyflowTonder: any = await containerCollect.collect();
           return await collectResponseSkyflowTonder["records"][0]["fields"];
         }else{
-          showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
+          showError("Por favor, verifica todos los campos de tu tarjeta", this.radioChecked, this.collectorIds.msgError)
         }
       } catch (error) {
-        showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
+        showError("Por favor, verifica todos los campos de tu tarjeta", this.radioChecked, this.collectorIds.msgError)
         throw error;
       }
   }
@@ -590,16 +672,16 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           if("auth_token" in customerResponse && this.secureToken) {
             const { auth_token } = customerResponse;
             await this._saveCustomerCard(auth_token, this.merchantData!.business.pk, { skyflow_id: cardTokensSkyflowTonder.skyflow_id });
-            showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
+            showMessage("Tarjeta registrada con éxito", this.radioChecked, this.collectorIds.msgNotification);
           } else {
-            showError("No se han configurado los datos de seguridad para guardar tarjeta", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton!)
+            showError("No se han configurado los datos de seguridad para guardar tarjeta", this.radioChecked, this.collectorIds.msgError)
           }
         }else{
-          showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton!)
+          showError("No se han configurado los datos del proveedor de servicio", this.radioChecked, this.collectorIds.msgError)
         }
       } catch (error) {
         const exist_msg_error = typeof error === "object" && error !== null && "message" in error;
-        showError(exist_msg_error ? error?.message as string:"Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton!)
+        showError(exist_msg_error ? error?.message as string:"Ha ocurrido un error", this.radioChecked, this.collectorIds.msgError)
         throw error;
       } finally {}
     }
@@ -646,16 +728,16 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           if (jsonResponseRouter) {
             return jsonResponseRouter;
           } else {
-            showError("No se ha podido procesar el pago", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+            showError("No se ha podido procesar el pago",  this.radioChecked, this.collectorIds.msgError,)
             return false;
           }
         }
       } else {
-        showError("No se han configurado los datos del proveedor de servicio", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+        showError("No se han configurado los datos del proveedor de servicio",  this.radioChecked, this.collectorIds.msgError)
       }
     } catch (error) {
       console.log(error);
-      showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
+      showError("Ha ocurrido un error", this.radioChecked, this.collectorIds.msgError)
       throw error;
     } finally {
       this.#updatePayButton({cardId: this.radioChecked, disabled: false});
@@ -671,14 +753,14 @@ export class InlineCheckout extends BaseInlineCheckout<IInlineCustomizationOptio
           await this._saveCustomerCard(authToken, businessId, cardTokens);
           this.cardsInjected = false;
           await this.#loadCardsList(authToken)
-          showMessage("Tarjeta registrada con éxito", this.collectorIds.msgNotification);
+          showMessage("Tarjeta registrada con éxito",this.radioChecked, this.collectorIds.msgNotification);
         } else {
-          showError("No se han configurado los datos de seguridad para guardar tarjeta", this.collectorIds.msgError, this.collectorIds.tonderSaveCardButton!)
+          showError("No se han configurado los datos de seguridad para guardar tarjeta",  this.radioChecked, this.collectorIds.msgError)
         }
       }catch (error){
         const exist_msg_error = typeof error === "object" && error !== null && "message" in error;
         if(exist_msg_error && error?.message !== 'Error'){
-          showError(error?.message as string, this.collectorIds.msgError, this.collectorIds.tonderPayButton);
+          showError(error?.message as string,  this.radioChecked, this.collectorIds.msgError);
         }
       }
     }

package/src/helpers/constants.ts

@@ -3,6 +3,7 @@ enum PAYMENT_METHOD {
     OXXO = "OXXO",
     SPEI= "SPEI",
     CODI= "CODI",
+    OXXOPAY= "OXXOPAY",
     MERCADOPAGO= "MERCADOPAGO",
     PAYPAL= "PAYPAL",
     COMERCIALMEXICANA= "COMERCIALMEXICANA",