@tonder.io/ionic-full-sdk 0.0.46-beta.9 → 0.0.47-beta.DEV1406.3a5debd

package/src/classes/inlineCheckout.ts

@@ -2,9 +2,9 @@ import { apmItemsTemplate, Card, cardItemsTemplate, cardTemplate, CollectorIds }
 import {
   showError,
   showMessage,
-  mapCards,
+  mapCards, generateRandomString,
 } from '../helpers/utils';
-import { initSkyflow } from '../helpers/skyflow'
+import {initSkyflow, initUpdateSkyflow} from '../helpers/skyflow'
 import { ErrorResponse } from '@tonder.io/ionic-lite-sdk/dist/classes/errorResponse';
 import { CustomerRegisterResponse } from '@tonder.io/ionic-lite-sdk/dist/types/responses';
 import {BaseInlineCheckout} from "@tonder.io/ionic-lite-sdk";
@@ -13,11 +13,13 @@ import {ISaveCardSkyflowRequest} from "@tonder.io/ionic-lite-sdk/dist/types/card
 import {ITonderPaymentMethod} from "@tonder.io/ionic-lite-sdk/dist/types/paymentMethod";
 import {IInlineCheckoutOptions, InCollectorContainer} from "../types/commons";
 import {IInlineCheckout} from "../types/inlineCheckout";
-
+// @ts-ignore
+import Accordion from "accordion-js";
 
 export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckout{
   paymentData = {}
   collectContainer: InCollectorContainer | null;
+  updateCollectContainer: InCollectorContainer | null;
   deletingCards: string[] = [];
   renderPaymentButton: boolean
   renderSaveCardButton?: boolean
@@ -25,6 +27,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
   injectInterval: any
   abortRefreshCardsController: AbortController;
   containerId: string
+  accordionC: {open: any; closeAll: any} | null = null;
   injected: boolean
   cardsInjected: boolean
   apmsInjected = false
@@ -49,12 +52,12 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     customization,
   }: IInlineCheckoutOptions) {
     super({
-      apiKey: apiKey, 
-      returnUrl: returnUrl, 
-      mode: mode, 
-      callBack: callBack, 
-      customization: customization, 
-      tdsIframeId: collectorIds && collectorIds?.tdsIframe ? collectorIds?.tdsIframe : "tdsIframe",
+      apiKey: apiKey,
+      returnUrl: returnUrl,
+      mode: mode,
+      callBack: callBack,
+      customization: customization,
+      tdsIframeId: collectorIds && 'tdsIframe' in collectorIds ? collectorIds?.tdsIframe : "tdsIframe",
       tonderPayButtonId: collectorIds ? collectorIds?.tonderPayButton : "tonderPayButton"
     });
     this.renderPaymentButton = renderPaymentButton || false;
@@ -65,7 +68,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     this.containerId = containerId ? containerId : "tonder-checkout"
     this.injected = false;
     this.cardsInjected = false;
-    this.collectorIds = collectorIds ? collectorIds : {
+    this.collectorIds = {
       cardsListContainer: "cardsListContainer",
       holderName: "collectCardholderName",
       cardNumber: "collectCardNumber",
@@ -79,8 +82,10 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
       apmsListContainer: "apmsListContainer",
       tdsIframe: "tdsIframe"
     }
+    this.collectorIds = collectorIds ? {...this.collectorIds, ...collectorIds} :this.collectorIds
     this.radioChecked = "new"
     this.collectContainer = null;
+    this.updateCollectContainer = null;
 
     this.isOpenPaySandbox = isOpenPaySandbox === undefined ? true : isOpenPaySandbox
     this.isEnrollmentCard = isEnrollmentCard === undefined ? false : isEnrollmentCard
@@ -92,6 +97,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     this.customer = {...this.customer!, email}
   }
 
+  // TODO: DEPRECATED
   public setPaymentData (data: IProcessPaymentRequest) {
     if (!data) return
     this.paymentData = data
@@ -104,7 +110,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     const containerTonderCheckout = document.querySelector(`#${this.containerId}`);
 
     if (containerTonderCheckout) {
-      containerTonderCheckout.innerHTML = cardTemplate(!!this.customStyles, this.collectorIds, 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 })
       await this.#mountTonder();
       this.injected = true
       return;
@@ -112,7 +118,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     const observer = new MutationObserver(async (mutations, obs) => {
       const containerTonderCheckout = document.querySelector(`#${this.containerId}`);
       if (containerTonderCheckout) {
-        containerTonderCheckout.innerHTML = cardTemplate(!!this.customStyles, this.collectorIds, 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 })
         await this.#mountTonder();
         // clearInterval(injectInterval);
         this.injected = true
@@ -183,8 +189,16 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
       const injectInterval = setInterval(() => {
         const queryElement = document.querySelector(`#${this.collectorIds.cardsListContainer}`);
         if (queryElement && this.injected) {
-          queryElement.innerHTML = cardItemsTemplate(!!this.customStyles, cards)
+          const acId = generateRandomString(10)
+          queryElement.innerHTML = cardItemsTemplate({
+            cards,
+            acId: acId,
+            collectorIds: this.collectorIds,
+            renderPaymentButton: this.renderPaymentButton,
+            customStyles: this.customStyles,
+          })
           clearInterval(injectInterval)
+          this.#generateCardsAccordion(acId)
           this.#mountRadioButtons(customerToken)
           this.cardsInjected = true
         }
@@ -192,24 +206,92 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     }
   }
 
-  #mountPayButton() {
+  #generateCardsAccordion(acId: string){
+    this.accordionC = new Accordion(`.accordion-container${acId}`, {
+      triggerClass: "card-item-label",
+      duration: 300,
+      collapse: true,
+      showMultiple: false,
+      onOpen: async (currentElement: any) => {
+        await this.#handleOpenCardAccordion(currentElement)
+      }
+    });
+  }
+
+  async #handleOpenCardAccordion(currentElement: any){
+    const { vault_id, vault_url } = this.merchantData!;
+    const container_radio_id = currentElement.id.replace("card_container-", "");
+
+    if (this.updateCollectContainer && "unmount" in this.updateCollectContainer?.elements?.cvvElement) {
+      this.updateCollectContainer.elements.cvvElement.unmount()
+    }
+
+    document.querySelectorAll(".cvvContainer").forEach((container) => {
+      container.classList.remove("show");
+    });
+
+    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
+
+      );
+      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)
+  }
+
+
+  #mountPayButton(cardId="") {
     if (!this.renderPaymentButton) return;
+    const btnID = `#${this.collectorIds.tonderPayButton}${cardId}`;
+    const payButton: HTMLElement | null = document.querySelector(btnID);
+    const containerID = `#acContainer${cardId}`;
+    const container = document.querySelector(containerID);
 
-    const payButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-    
     if (!payButton) {
       console.error("Pay button not found");
       return;
     }
 
+    if (cardId !== "") {
+      const sdkPayButton: HTMLElement | null = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
+      if(sdkPayButton){
+        sdkPayButton.style.display = "none";
+      }
+    }
+
     const LOCALE_MONEY = "en-Latn-US";
 
     payButton.style.display = "block";
-    
+
     const inCartTotal = Intl.NumberFormat(LOCALE_MONEY, { minimumFractionDigits: 2 }).format(Number(this.cartTotal || 0));
-    
+
     payButton.textContent = `Pagar $${inCartTotal}`;
-    
+
+    document.querySelectorAll(".ac-card-panel-container").forEach((cont) => {
+      cont.classList.remove("show");
+    });
+    if (container) {
+      container.classList.add("show");
+    }
+
     payButton.onclick = async (event) => {
       event.preventDefault();
       await this.#handlePaymentClick(payButton);
@@ -218,14 +300,10 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
   }
 
   async #handlePaymentClick(payButton: any) {
-    const prevButtonContent = payButton.innerHTML;
-    payButton.innerHTML = `<div class="lds-dual-ring"></div>`;
     try {
-      await this.payment(this.paymentData as IProcessPaymentRequest);
+      await this.payment({} as IProcessPaymentRequest);
     } catch (error) {
       console.error("Payment error:", error);
-    } finally {
-      payButton.innerHTML = prevButtonContent;
     }
   }
 
@@ -264,10 +342,23 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     }
   }
 
-  #updatePayButton() {
-    const payButton = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-    if (!payButton) return
-    payButton.textContent = `Pagar $${this.cartTotal}`;
+  #updatePayButton(data?: {cardId?: string | null; updatedTextContent?: boolean; textContent?: string; disabled?: boolean}) {
+    try{
+      const btnID = data?.cardId && data?.cardId !== "new" ? `#${this.collectorIds.tonderPayButton}${data.cardId}`: `#${this.collectorIds.tonderPayButton}`;
+      const updatedText = data?.updatedTextContent || true;
+      const btnTextContent = data?.textContent || `Pagar $${this.cartTotal}`;
+      const disabledBtn = data?.disabled;
+
+      const payButton: HTMLElement | null = document.querySelector(btnID);
+      if (!payButton) return
+      if (updatedText) payButton.textContent = btnTextContent;
+      if (disabledBtn !== undefined && 'disabled' in payButton) {
+        payButton.disabled = disabledBtn;
+      }
+    }catch (e){
+      console.error("Pay button not found due to update", e);
+    }
+
   }
 
   #mountRadioButtons (token: string = "") {
@@ -276,7 +367,8 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
       radio.style.display = "block";
       radio.onclick = async (event) => {
         //event.preventDefault();
-        await this.#handleRadioButtonClick(radio);
+        const position = Array.from(radioButtons).indexOf(radio);
+        await this.#handleRadioButtonClick(radio, position);
       };
     }
     const cardsButtons: HTMLCollectionOf<Element> = document.getElementsByClassName("card-delete-button");
@@ -320,21 +412,30 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
     this.cardsInjected = false;
     await this.#loadCardsList(customerToken)
   }
-  async #handleRadioButtonClick (radio: HTMLElement) {
+  async #handleRadioButtonClick (radio: HTMLElement, position: number | null = null) {
     const containerForm: HTMLElement | null = document.querySelector(".container-form");
     if(containerForm) {
       containerForm.style.display = radio.id === "new" ? "block" : "none";
     }
     if(radio.id === "new") {
+      this.#handleOpenCloseCardAccordion(null, true)
       if(this.radioChecked !== radio.id) {
         await this.#mountForm();
+        this.#mountPayButton()
       }
     } else {
+      this.#handleOpenCloseCardAccordion(position, position !== null)
       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();
@@ -403,9 +504,9 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
   #unmountForm () {
 
     this.injected = false
-    
+
     if(this.collectContainer) {
-      if("unmount" in this.collectContainer.elements.cardHolderNameElement) this.collectContainer.elements.cardHolderNameElement.unmount() 
+      if("unmount" in this.collectContainer.elements.cardHolderNameElement) this.collectContainer.elements.cardHolderNameElement.unmount()
       if("unmount" in this.collectContainer.elements.cardNumberElement) this.collectContainer.elements.cardNumberElement.unmount()
       if("unmount" in this.collectContainer.elements.expiryYearElement) this.collectContainer.elements.expiryYearElement.unmount()
       if("unmount" in this.collectContainer.elements.expiryMonthElement) this.collectContainer.elements.expiryMonthElement.unmount()
@@ -436,18 +537,19 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
 
   }
 
-  async #getCardTokens(tonderButton: string){
-    if(this.collectContainer && "container" in this.collectContainer && "collect" in this.collectContainer.container) {
+  async #getCardTokens(tonderButton: string, cardSelected: string | null = null){
       try {
-        const collectResponseSkyflowTonder: any = await this.collectContainer?.container.collect();
-        return await collectResponseSkyflowTonder["records"][0]["fields"];
+        const containerCollect = cardSelected && cardSelected !== "new" ? this.updateCollectContainer?.container:this.collectContainer?.container;
+        if(containerCollect && "collect" in containerCollect){
+          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)
+        }
       } catch (error) {
         showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
         throw error;
       }
-    } else {
-      showError("Por favor, verifica todos los campos de tu tarjeta", this.collectorIds.msgError, tonderButton)
-    }
   }
   async #updateSaveCardButton(disabled = false, text = "Guardar"){
     try {
@@ -491,17 +593,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
   async _checkout() {
 
     try {
-
-      try {
-
-        const selector: any = document.querySelector(`#${this.collectorIds.tonderPayButton}`);
-        
-        if(selector){
-          selector.disabled = true;
-          selector.innerHTML = "Cargando..."
-        }
-
-      } catch (error) { }
+      this.#updatePayButton({cardId: this.radioChecked, textContent: "Cargando...", disabled: true});
 
       if(this.merchantData!) {
 
@@ -510,8 +602,9 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
           let cardTokensSkyflowTonder: any;
 
           if(this.radioChecked === "new" || this.radioChecked === undefined) {
-            cardTokensSkyflowTonder = await this.#getCardTokens(this.collectorIds.tonderPayButton!)
+            cardTokensSkyflowTonder = await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked)
           } else {
+            await this.#getCardTokens(this.collectorIds.tonderPayButton!, this.radioChecked)
             cardTokensSkyflowTonder = {
               skyflow_id: this.radioChecked
             }
@@ -532,6 +625,8 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
             customer: customerResponse
           });
 
+
+          this.#updatePayButton({cardId: this.radioChecked, disabled: false});
           if (jsonResponseRouter) {
             return jsonResponseRouter;
           } else {
@@ -547,6 +642,7 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
       showError("Ha ocurrido un error", this.collectorIds.msgError, this.collectorIds.tonderPayButton)
       throw error;
     } finally {
+      this.#updatePayButton({cardId: this.radioChecked, disabled: false});
     }
   };
 
@@ -571,4 +667,4 @@ export class InlineCheckout extends BaseInlineCheckout implements IInlineCheckou
       }
     }
   }
-}
+}